Как сделать простую анимацию с отскоком?

Question

[ArtJH]

Вот сложный пример
https://codepen.io/suez/pen/oXLroX

Посмотрите на анимацию деревьев. Как сделать простую анимацию с дивом, который падает, отскакивает вверх и снова вниз. У меня как-то криво получилось.

Comments

[WapSter]

А где там анимация, то?

[ArtJH]

WapSter, потяни по стрелкам вниз

[McBernar]

Норм на самом деле. Может только еще одного шага не хватает, чтобы в конце так резко не рубилось. Ну или это, по-идее, должно лечиться простым ease-out.

[WapSter]

ArtJH, точно видимо стоит поспать.. Ну это не сложно, если не нужна реалистичность, то допустим есть высота падания элемента 250, нам нужен какой-то коэфициент который будет определять высоту подпрыгивания, 250*0.3= 75. Дальше 75*0.3= 22.5, в следующем паденни можно уменьшать этот коэфициент так, как элемент потерял часть эннергии. Если нужно более реалистично воспользуйся формулами из физики, но там их дофига)

[ArtJH]

WapSter, я пытался сам написать эту формулу из-за этого выходило коряво, спасибо

Answer 1

[Stalker_RED]

гуглишь "easing functions" получаешь кучу готовых формул.

Вот тут даже с анимированными приевьюшками https://easings.net/ru
Для деревьев попробуйте easeOutElastic и какой-то постоянный коэффициент.
Вот тут можно прям визуально потягать ползунки руками (на флеше, придется разблокировать). Возможно такой сервис и без флеша есть, но сходу нагуглить не удалось.

Comments

[ArtJH]

Спасибо