Полный список свойств

Базовый набор параметров анимации в Velocity.js формирует основу управления движением элементов в DOM. Почти все свойства передаются в объекте настроек при вызове Velocity(element, properties, options) и определяют поведение анимации от времени выполнения до взаимодействия с очередями и событиями жизненного цикла.

duration Определяет длительность анимации в миллисекундах.

  • Тип: Number | String

  • Примеры значений:

    • 300
    • "fast" (эквивалентно ~200 мс)
    • "slow" (эквивалентно ~600 мс)

Влияет напрямую на скорость интерполяции всех анимируемых свойств.

delay Задаёт задержку перед началом анимации.

  • Тип: Number
  • Единица: миллисекунды

Используется для построения последовательных эффектов и каскадных переходов.

easing Определяет функцию изменения скорости анимации во времени.

  • Тип: String | Array

Поддерживаемые варианты:

  • линейные: "linear"
  • стандартные: "swing"
  • расширенные кривые Безье: [0.25, 0.1, 0.25, 1]
  • предустановленные кривые: "ease", "ease-in", "ease-out", "ease-in-out"

Easing управляет ощущением «физики» движения, влияя на ускорение и замедление.

Коллбэки жизненного цикла

begin Вызывается один раз перед стартом анимации.

  • Тип: Function
  • Контекст: DOM-элемент

Используется для подготовки состояния перед изменением стилей.

complete Срабатывает после завершения анимации.

  • Тип: Function

Позволяет выполнять цепочки анимаций или очистку состояния.

progress Вызывается на каждом кадре анимации.

  • Тип: Function(percentComplete, remaining, tweenValue)

Позволяет отслеживать прогресс и синхронизировать внешние эффекты.

Управление очередями

queue Определяет, в какую очередь помещается анимация.

  • Тип: String | Boolean

Значения:

  • "fx" — стандартная очередь
  • false — отключение очереди (параллельное выполнение)

Позволяет управлять последовательностью анимаций на одном элементе.

Поведение отображения элемента

display Управляет CSS-свойством display в процессе анимации.

  • Тип: String

Примеры:

  • "block"
  • "inline-block"
  • "flex"

Часто используется для появления скрытых элементов.

visibility Управляет свойством visibility.

  • Тип: String

Значения:

  • "visible"
  • "hidden"

Позволяет скрывать элемент без влияния на поток документа.

Повторение и циклы

loop Определяет количество повторов анимации.

  • Тип: Number | Boolean

Значения:

  • true — бесконечный цикл
  • 3 — три повтора

После завершения каждого цикла анимация возвращается к начальному состоянию.

repeat Альтернативный механизм повторения с более точным контролем.

  • Тип: Number

Используется вместе с repeatDelay.

repeatDelay Задержка между повторами анимации.

  • Тип: Number (мс)

Позволяет создавать паузы в циклических анимациях.

Управление скоростью и направлением

speed Модификатор общей скорости анимации.

  • Тип: Number

  • 1 — нормальная скорость

  • 0.5 — в два раза медленнее

  • 2 — в два раза быстрее

Применяется как множитель к duration.

backwards Инвертирует направление анимации.

  • Тип: Boolean

Используется для эффектов «отката» состояния.

sync Синхронизирует анимации между несколькими элементами.

  • Тип: Boolean

Если true, все элементы стартуют одновременно.

Оптимизация и производительность

mobileHA Включает аппаратное ускорение для мобильных устройств.

  • Тип: Boolean
  • По умолчанию: true

Добавляет CSS-трансформации для повышения плавности.

Управление стилями в процессе анимации

stagger Создаёт задержку между анимациями элементов коллекции.

  • Тип: Number

Пример поведения:

  • первый элемент стартует сразу
  • каждый следующий с задержкой stagger

Используется для каскадных эффектов.

drag Позволяет анимации «догонять» изменения значений.

  • Тип: Boolean

Создаёт эффект физического движения с инерцией.

queue: false + drag часто используется для интерактивных интерфейсов.

Управление начальным и конечным состоянием

beginProperties (внутренний механизм Velocity) Определяет стартовые значения свойств, если они не заданы явно.

completeProperties (логический уровень завершения) Используется для фиксации финального состояния после анимации.

Работа с transform-свойствами

Velocity.js обрабатывает трансформации через абстракцию свойств:

  • translateX
  • translateY
  • translateZ
  • scale
  • scaleX
  • scaleY
  • rotateZ

Каждое из этих свойств анимируется независимо, но объединяется в единый transform при рендере.

Особенности:

  • интерполяция происходит без перезаписи CSS вручную
  • поддерживается комбинирование нескольких трансформаций
  • порядок вычислений фиксирован внутренним движком

Прозрачность и цветовые свойства

Поддерживаются стандартные CSS-свойства:

  • opacity
  • color
  • backgroundColor
  • borderColor

Особенность обработки заключается в интерполяции RGB/HEX значений в числовом пространстве, что позволяет плавные переходы между цветами без скачков.

Размеры и геометрия

Анимации могут применяться к:

  • width
  • height
  • padding
  • margin
  • borderWidth

При этом значения могут быть заданы как:

  • пиксели (100px)
  • проценты (50%)
  • авто-значения через внутреннюю нормализацию Velocity

Специальные флаги поведения

ignoreRateLimit Отключает внутреннее ограничение частоты обновлений.

  • Тип: Boolean

Используется при высокочастотных интерактивных анимациях.

loopBegin / loopComplete (в логике расширений) Позволяют реагировать на каждый цикл loop.

Комбинированные настройки

Некоторые параметры работают только в связке:

  • loop + delay — формирование ритмических эффектов
  • stagger + sync — синхронизированные каскады
  • queue: false + duration — параллельные анимации разной длительности
  • easing + progress — построение кастомной физики движения

Внутренняя модель интерполяции

Каждое свойство проходит три стадии обработки:

  1. Нормализация значения Преобразование строковых значений в числовой формат

  2. Интерполяция Вычисление промежуточных значений на основе времени и easing

  3. Рендеринг Применение результата через style DOM-элемента или transform pipeline

Системные ограничения параметров

  • duration не может быть отрицательным
  • easing должен быть валидной функцией или массивом Безье
  • queue принимает только допустимые строки или false
  • loop игнорируется при использовании display: none в некоторых сценариях

Связь параметров с движком рендеринга

Каждое свойство анимации в Velocity.js влияет на отдельный этап вычислений:

  • временные параметры (duration, delay) — планирование кадров
  • физика движения (easing, drag, backwards) — математическая модель интерполяции
  • поток выполнения (queue, sync) — диспетчер задач
  • визуальное поведение (display, visibility) — CSS-патчинг слоя отображения
Оглавление