Падающий мяч на JavaScript!


Всем привет! В этом небольшом уроке я покажу, как можно сделать анимацию падающего с высоты мяча! Падающий мяч на JavaScript!

Описание

Наш мяч будет падать с высоты на стол, от которого будет отпрыгивать до тех пока, пока не остановится на столе. С каждым отскоком мяч будет подниматься на все более меньшую, по сравнению с первоначальной, высоту. Вот так вот будет выглядеть наш мяч: Мяч А вот так стол: Стол

Реализация

Реализовывать описанную выше анимацию будем с использованием библиотеки Jquery. Давайте рассмотрим HTML верстку:
	<div id="wrap">
		<img id="ball" src="https://sergey-oganesyan.ru/wp-content/uploads/2014/11/ball.png">
		<img id="table" src="https://sergey-oganesyan.ru/wp-content/uploads/2014/11/table.jpg">	
	</div>
Общий блок с идентификатором wrap содержит 2 картинки - картинку мяча (с прозрачным фоном в формате png) и картинку стола, от которого будет отпрыгивать мяч. CSS верстка:
#wrap{
    width: 200px;
    margin: 0 auto;
}
#ball{
	width:60px;
    margin: 0 auto;
    margin-top: 0;
    display: block;
    cursor: pointer;
	position: absolute;
}
#table{
	width: 400px;
    margin: 260px 0 0 -170px;
}
Общий блок с id wrap выравниваем по центру, #ball - стили для мяча (изначально отступ сверху равен нулю, чтобы мяч был над столом). И #table - это соответственно стили для стола. Итак, теперь давайте разберем JavaScript (Jquery) код:
<script type="text/javascript">
	$(document).ready(function(){
		$('#ball').click(function(){
			$(this)
			.animate({ marginTop: '300px'}, 400)
				.animate({ marginTop: '140px'}, 300)
			.animate({ marginTop: '300px'}, 300)
				.animate({ marginTop: '200px'}, 300)
			.animate({ marginTop: '300px'}, 300)
				.animate({ marginTop: '240px'}, 250)
			.animate({ marginTop: '300px'}, 250)
				.animate({ marginTop: '270px'}, 200)
			.animate({ marginTop: '300px'}, 200)
				.animate({ marginTop: '280px'}, 150)
			.animate({ marginTop: '300px'}, 150)
				.animate({ marginTop: '290px'}, 100)
			.animate({ marginTop: '300px'}, 100)
				.animate({ marginTop: '295px'}, 100)
			.animate({ marginTop: '300px'}, 100);
		});
	});
</script>
По клику на элемент с id ball (нажали на мяч) происходит поочередное выполнение анимации - поднимание и опускание мяча. Например:
.animate({ marginTop: '300px'}, 400) - означает, что у мяча изменится отступ сверху с первоначального значения до 300 пикселей за 400 миллисекунд.
То есть вся анимация основана на том, что у мяча изменяется отступ сверху за определенное время, - изменяя значение отступа сверху и скорость (время) можно управлять анимацией. Когда отступ сверху равен 0 - мяч находится вверху (верхняя точка), когда отступ равен 300 пикселям - мяч находится на столе (нижняя точка). Я постарался сделать наиболее реалистичный отскок, но с точки зрения физики, я думаю, здесь есть над чем поработать. Если вы хотите изменить плавность и реалистичность отскоков, либо изменить количество отскоков, то просто измените (добавьте) строчку вида:
.animate({ marginTop: 'Xpx'}, Y)

где X - количество пикселей, а Y - время в миллисекундах.
Теперь можете взглянуть на реальный пример и скачать его к себе на компьютер!

Посмотреть результат

Скачать

На этом у меня все, надеюсь, вам пригодится данный урок, желаю вам удачи, пока!


Раздел: Программирование

Дата последнего изменения: 2017-03-22 20:44:41

Просмотров: 11976

Читайте также:

Игра Угадай число на JavaScript!
Html таблица на JavaScript
Сортировка пузырьком на JavaScript
Движущаяся машина на JavaScript!
Видео галерея на JavaScript!
Генератор случайных картинок на JavaScript!
Как изменить фон страницы на JavaScript
Анимация на чистом javascript

Оставить комментарий

* Комментарий: (отменить ответ)

* Ваше имя:

Ваш e-mail:

*