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



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

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

Описание

Наш мяч будет падать с высоты на стол, от которого будет отпрыгивать до тех пока, пока не остановится на столе.

С каждым отскоком мяч будет подниматься на все более меньшую, по сравнению с первоначальной, высоту.

Вот так вот будет выглядеть наш мяч:

Мяч

А вот так стол:

Стол

Реализация

Реализовывать описанную выше анимацию будем с использованием библиотеки Jquery.

Давайте рассмотрим HTML верстку:

	<div id="wrap">
		<img id="ball" src="http://sergey-oganesyan.ru/wp-content/uploads/2014/11/ball.png">
		<img id="table" src="http://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 - время в миллисекундах.

Теперь можете взглянуть на реальный пример и скачать его к себе на компьютер!

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




Подписаться на обновления:

Группа в Контакте: Продвижение

Похожие публикации:

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

Ваш email не будет опубликован. Обязательные поля отмечены *

*

code

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>