Функции плавности (easing) в Velocity.js определяют характер изменения анимации во времени, задавая зависимость между прогрессом выполнения и фактическим значением анимируемого свойства. Именно они отвечают за ощущение «естественности» движения: ускорение, замедление, упругость, резкие шаги или линейное изменение.
В основе любой анимации лежит функция:
t → f(t), где
Velocity.js принимает easing как строку, массив или специальный идентификатор, преобразуя его в математическую функцию интерполяции.
Самая простая форма изменения значений — отсутствие ускорения и замедления.
linearИзменение происходит равномерно на всём протяжении анимации.
Velocity(element, { left: "500px" }, { easing: "linear" });Особенности:
Velocity.js поддерживает стандартные easing-строки, совместимые с jQuery UI и CSS-анимациями.
easeУниверсальная плавность, близкая к cubic-bezier(0.25, 0.1, 0.25, 1)
Velocity(element, { opacity: 1 }, { easing: "ease" });ease-inРазгон в начале анимации и стабильное движение дальше.
Подходит для появления объектов из состояния покоя.
ease-outБыстрое начало и плавное завершение.
Используется для исчезновения или завершения движения.
ease-in-outКомбинированная кривая ускорения и замедления.
Наиболее «естественная» форма движения в интерфейсах.
Velocity.js поддерживает набор более детализированных математических функций, часто совпадающих с jQuery UI easing.
easeInQuad,
easeOutQuad, easeInOutQuadКвадратичные кривые обеспечивают более выраженное ускорение.
Velocity(element, { top: "300px" }, { easing: "easeInQuad" });Характер:
easeInCubic,
easeOutCubic, easeInOutCubicКубические кривые:
Особенности:
easeInQuart,
easeOutQuart, easeInOutQuartЧетвёртая степень:
Применение:
easeInQuint,
easeOutQuint, easeInOutQuintПятая степень:
Эти функции используют синусоидальные кривые для максимально «органичного» движения.
easeInSine,
easeOutSine, easeInOutSineОсобенности:
easeInExpo,
easeOutExpo, easeInOutExpoЭкспоненциальные кривые:
Характер:
easeInCirc,
easeOutCirc, easeInOutCircКруговые функции:
springVelocity.js поддерживает физически-ориентированную модель движения, имитирующую пружину.
Velocity(element, { translateY: "200px" }, { easing: "spring" });Особенности:
Модель поведения:
Используется для:
steps(n, direction)Дискретная функция, разбивающая анимацию на фиксированное количество шагов.
Velocity(element, { width: "300px" }, { easing: "steps(10, end)" });Параметры:
n — количество шагов
direction:
start — скачок в начале шагаend — скачок в конце шагаПоведение:
Применение:
Velocity.js позволяет использовать собственные cubic-bezier кривые, задаваемые массивом из четырёх чисел.
Velocity(element, { opacity: 1 }, {
easing: [0.17, 0.67, 0.83, 0.67]
});Структура:
Свойства:
Типичные значения:
[0.25, 0.1, 0.25, 1] — стандартная плавность[0.42, 0, 0.58, 1] — ease-in-outVelocity.js допускает использование сторонних easing-плагинов и пользовательских функций.
Velocity(element, { scale: 2 }, {
easing: function (t) {
return Math.pow(t, 3) * Math.sin(t * Math.PI);
}
});Поведение:
Easing не существует изолированно. Он влияет на:
При увеличении duration:
При уменьшении duration:
Velocity.js позволяет создавать последовательности анимаций, где каждая стадия использует свою кривую:
Velocity(element, { top: "100px" }, { easing: "easeInQuad" })
.then(() =>
Velocity(element, { top: "0px" }, { easing: "easeOutBounce" })
);Характер:
Используются для интерфейсов и UI-анимаций.
Используются для акцентных эффектов.
Используются для имитации реального мира.
Используются для технических визуализаций.
Разные кривые напрямую меняют восприятие интерфейса: