JQuery анимирует максимальную скорость

Question

Можно ли позволить, чтобы при анимации скорость анимации достигала максимального значения?Поэтому он должен работать как обычно, и когда скорость достигает определенного значения, он должен оставаться на этой максимальной скорости.

Как мне этого достичь?

Answer 1

Максимальная скорость анимации определяется расстоянием, на которое анимация должна двигаться, продолжительностью анимации и функцией замедления (где она должна ускоряться / замедляться). Простейшим примером будет линейное ослабление (постоянная скорость). В этом случае скорость в пикселях / сек будет просто общим пиксельным расстоянием, на которое перемещается анимация, деленным на продолжительность анимации в секундах. Вы управляете обоими этими параметрами (длительностью и расстоянием), поэтому можете установить их так, как вам нравится.

Для нелинейных анимаций общее ощущение скорости по-прежнему определяется расстоянием и продолжительностью, но точное ускорение / замедление в этом интервале продолжительности определяется функцией замедления. Чтобы создать свои собственные функции, нужно немного привыкнуть, но уже построено много.

jQuery имеет две встроенные функции замедления, называемые "swing" и "linear". Существует множество встроенных функций замедления, из которых вы можете выбрать, в том числе jQueryUI и различные сторонние функции замедления, например these .

.

Answer 2

Это звучит очень похоже на проблему ослабления, но если не считать математики и технических ноу-хау при ее создании самостоятельно, у вас всегда есть возможность последовательно соединить две анимации.

$('#foo')
    .animate({ /* start off the animation */ }, 1000, 'swing')
    .animate({ /* finish the animation */ }, 1000, 'linear')
    ;

... иличто-то похожее.

Имейте в виду, что анимации в одной (элементной) очереди, в то время как анимации в разных запускаются параллельно.