В Velocity.js управление характером анимации строится вокруг функции плавности, определяющей распределение скорости изменения значений во времени. При создании сложных интерфейсных эффектов одна функция редко используется изолированно — чаще формируется композиция нескольких кривых, применяемых к разным аспектам анимации.
Комбинирование функций плавности в Velocity.js реализуется на нескольких уровнях:
Такой подход позволяет формировать сложные динамические поведения без необходимости ручного расчёта временных функций.
В Velocity.js допускается указание отдельных функций плавности для каждого анимируемого свойства. Это создаёт возможность независимого управления поведением различных параметров элемента.
Velocity(element, {
translateX: 300,
opacity: 0.2,
scale: 0.8
}, {
easing: {
translateX: "easeInOutCubic",
opacity: "easeOutQuad",
scale: "spring"
}
});В таком подходе формируется многослойная динамика:
Композиция возникает не через объединение функций в одну, а через распределение поведения по параметрам.
Velocity.js позволяет выстраивать цепочки анимаций, где каждая следующая стадия использует собственную функцию плавности. Это создаёт эффект трансформации кривой во времени.
Velocity(element, { translateY: -50 }, { easing: "easeOutQuad" })
.then(() => Velocity(element, { translateY: 0 }, { easing: "easeInBounce" }))
.then(() => Velocity(element, { scale: 1.2 }, { easing: "easeInOutSine" }));При таком подходе комбинирование реализуется через смену динамической модели:
Каждая функция действует локально, но визуально воспринимается как единый непрерывный процесс.
Velocity.js поддерживает передачу массива чисел для определения пользовательской кривой Безье. Это позволяет формировать сложные формы ускорения без разбиения на отдельные анимации.
Velocity(element, {
translateX: 400
}, {
easing: [0.25, 0.1, 0.25, 1]
});Массив интерпретируется как параметры кубической кривой Безье. Комбинирование нескольких easing-кривых достигается через:
Такой способ применяется для точной подгонки ощущений движения под визуальный дизайн.
Более сложная композиция возникает при разбиении движения на сегменты, каждый из которых имеет собственную функцию плавности.
Velocity(element, { translateX: 150 }, { duration: 200, easing: "easeInQuad" })
.then(() => Velocity(element, { translateX: 300 }, { duration: 300, easing: "easeOutCubic" }))
.then(() => Velocity(element, { translateX: 450 }, { duration: 200, easing: "easeInOutQuart" }));В результате формируется составная кривая движения, состоящая из нескольких участков:
Каждый сегмент воспринимается как часть единого процесса, хотя технически является отдельной анимацией.
Velocity.js допускает использование пользовательских функций плавности, что расширяет возможности композиции. Такие функции могут комбинироваться с предустановленными значениями через чередование или параллельное применение к разным свойствам.
Velocity.Easings["customElastic"] = function (p) {
return Math.sin(-13 * (p + 1) * Math.PI / 2) * Math.pow(2, -10 * p) + 1;
};
Velocity(element, {
scale: 1.5,
opacity: 0
}, {
easing: {
scale: "customElastic",
opacity: "easeOutQuad"
}
});В такой конфигурации формируется контраст динамик:
Композиция создаётся через различие характеров функций, а не их математическое объединение.
Velocity.js позволяет запускать несколько анимаций одновременно. При этом каждая может использовать собственную функцию плавности, формируя многослойное движение.
Velocity(element, { translateX: 300 }, { duration: 600, easing: "easeInOutQuad" });
Velocity(element, { opacity: 0 }, { duration: 400, easing: "easeOutCubic" });
Velocity(element, { scale: 1.2 }, { duration: 800, easing: "easeInSine" });Временное перекрытие создаёт эффект сложной динамической системы:
Такой подход применяется для формирования глубины и многослойности интерфейсной анимации.
При построении длинных цепочек анимаций часто возникает необходимость согласования характеров движения между этапами. В Velocity.js это достигается повторным использованием или модификацией предыдущих функций.
const baseEasing = "easeInOutCubic";
Velocity(element, { x: 100 }, { easing: baseEasing })
.then(() => Velocity(element, { x: 200 }, { easing: "easeOutCubic" }))
.then(() => Velocity(element, { x: 300 }, { easing: baseEasing }));Такой подход формирует ритмическую структуру:
Композиция здесь строится на повторении и вариации одной модели.
Функции плавности часто комбинируются не напрямую, а через изменение временных характеристик анимации. При одинаковом easing визуальный эффект существенно меняется за счёт duration и delay.
Velocity(element, { translateY: 200 }, {
duration: 300,
easing: "easeOutQuad"
});
Velocity(element, { translateY: 0 }, {
duration: 900,
easing: "easeOutQuad",
delay: 200
});Изменение длительности приводит к трансформации восприятия кривой:
Таким образом, комбинирование достигается параметрически, без смены самой функции.
В прикладных сценариях интерфейсной анимации часто используется совмещение всех рассмотренных методов:
Пример комплексной структуры:
Velocity(element, {
translateX: 400,
scale: 1.1
}, {
easing: {
translateX: "easeInOutCubic",
scale: "customElastic"
},
duration: 600
})
.then(() => Velocity(element, {
opacity: 0.3
}, {
easing: "easeOutQuad",
duration: 300
}))
.then(() => Velocity(element, {
translateX: 0,
scale: 1
}, {
easing: "easeInOutSine",
duration: 700
}));В результате формируется многофазная динамика, в которой каждая компонента движения подчиняется собственной функции, но все вместе образуют согласованную траекторию поведения элемента.