Всем привет! В этом небольшом уроке я покажу, как можно сделать анимацию падающего с высоты мяча!
Описание
Наш мяч будет падать с высоты на стол, от которого будет отпрыгивать до тех пока, пока не остановится на столе.
С каждым отскоком мяч будет подниматься на все более меньшую, по сравнению с первоначальной, высоту.
Вот так вот будет выглядеть наш мяч:
А вот так стол:
Реализация
Реализовывать описанную выше анимацию будем с использованием библиотеки 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) код:
По клику на элемент с id ball (нажали на мяч) происходит поочередное выполнение анимации – поднимание и опускание мяча.
Например:
.animate({ marginTop: '300px'}, 400) - означает, что у мяча изменится отступ сверху с первоначального значения до 300 пикселей за 400 миллисекунд.
То есть вся анимация основана на том, что у мяча изменяется отступ сверху за определенное время, – изменяя значение отступа сверху и скорость (время) можно управлять анимацией.
Когда отступ сверху равен 0 – мяч находится вверху (верхняя точка), когда отступ равен 300 пикселям – мяч находится на столе (нижняя точка).
Я постарался сделать наиболее реалистичный отскок, но с точки зрения физики, я думаю, здесь есть над чем поработать.
Если вы хотите изменить плавность и реалистичность отскоков, либо изменить количество отскоков, то просто измените (добавьте) строчку вида:
.animate({ marginTop: 'Xpx'}, Y)
где X - количество пикселей, а Y - время в миллисекундах.
Теперь можете взглянуть на реальный пример и скачать его к себе на компьютер!
Посмотреть результат
Скачать
На этом у меня все, надеюсь, вам пригодится данный урок, желаю вам удачи, пока!
Если вам нужна помощь в создании какого-либо функционала, сайта, сервиса, тестов или калькуляторов, то готов помочь, подробнее на странице услуг.