duration Определяет продолжительность анимации в миллисекундах.
Допускаются варианты записи:
400, 1000, 200Поведение параметра линейно влияет на все интерполируемые свойства: чем больше значение, тем медленнее происходит переход между начальным и конечным состоянием.
delay Задаёт задержку перед запуском анимации.
Используется для:
Значение указывается в миллисекундах и применяется до старта вычисления первого кадра.
easing Определяет математическую кривую интерполяции значений во времени.
Поддерживаются:
строковые значения:
linearswingeaseease-inease-outease-in-outпользовательские функции (в расширенных конфигурациях Velocity):
function(t, b, c, d)Кривая easing влияет на:
loop Определяет количество повторов анимации.
Варианты:
true — бесконечный циклfalse или отсутствие параметра — однократное
выполнениеПри каждом повторе происходит полное воспроизведение анимационной цепочки с начала.
display Контролирует CSS-свойство
display на старте и завершении анимации.
Часто используется для:
Возможные значения:
auto — автоматическое определениеnoneblock,
inline-block, flexvisibility Управляет свойством видимости элемента.
Значения:
visiblehiddenВ отличие от display, не влияет на поток документа, но
скрывает элемент визуально.
queue Определяет, в какую очередь попадёт анимация.
Возможные формы:
true — стандартная очередьfalse — немедленное выполнение без очередиПрименяется для:
begin Вызывается перед стартом анимации.
Сигнатура:
Применяется для:
complete Вызывается после завершения анимации.
Срабатывает один раз, когда:
Используется для:
progress Вызывается на каждом кадре анимации.
Сигнатура:
elements — массив анимируемых элементовcomplete — процент завершения (0–1)remaining — оставшееся времяstart — начальное значение времениtweenValue — текущее значение интерполяцииПозволяет:
mobileHA Активирует аппаратное ускорение для мобильных устройств.
Значения:
true — включает translateZ(0) или аналогичные
оптимизацииfalse — отключает аппаратное ускорениеИспользуется для:
Velocity работает с CSS-свойствами через объектную модель, где ключи описывают анимируемые параметры:
Примеры категорий:
width, height,
margin, paddingleft, top,
right, bottomtranslateX, translateY,
scale, rotateopacitybackgroundColor,
colorКаждое свойство интерполируется от начального к конечному значению с учётом easing и duration.
queue: false + свойства анимации Комбинация используется для параллельного запуска анимаций без ожидания завершения предыдущих.
Это влияет на:
синхронизация нескольких элементов Velocity автоматически группирует элементы, если передаётся коллекция DOM-узлов. Все параметры применяются равномерно ко всем элементам массива, если не задана индивидуальная логика внутри callbacks.
Параметры Velocity интерпретируются в строгом порядке:
Некоторые параметры взаимодействуют друг с другом:
loop влияет на повторный вызов begin и
completequeue определяет изоляцию или последовательность
анимацийdelay сдвигает всю цепочку исполнения, включая
callbacksdisplay и visibility могут конфликтовать
при одновременном управлении видимостьюХотя это не опция, параметры влияют на то, как происходит остановка:
loop остановка требует явного завершения
циклаqueue остановка затрагивает только
текущую очередьКомбинации опций формируют различные паттерны поведения:
duration + easing — базовая форма управления
движениемdelay + queue — построение последовательных сценloop + easing — циклические анимации с динамикой
ускоренияprogress + mobileHA — мониторинг и оптимизация
производительности в реальном времени