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

Velocity() / $.Velocity()

Velocity.js предоставляет центральную функцию выполнения анимаций:

Velocity(element, properties, options)

или в jQuery-интеграции:

$.Velocity(element, properties, options)

Основные режимы вызова:

  • Анимация DOM-элемента
  • Анимация массива элементов
  • Работа с нативными NodeList
  • Управление очередями анимаций

Параметры:

  • element — DOM-узел, коллекция или селектор
  • properties — объект CSS-свойств или команд (например, { opacity: 0, translateX: 100 })
  • options — объект настроек анимации

Ключевые возможности:

  • Аппаратное ускорение через transform
  • Контроль easing-функций
  • Тайминги и задержки
  • Очереди анимаций
  • Callback-функции (begin, complete, progress)

Методы управления анимацией на элементах

.velocity()

Основной метод, добавляемый к DOM-элементам при использовании Velocity:

element.velocity(properties, options)

Поддерживает несколько режимов:

  • запуск анимации
  • выполнение команд
  • чтение/запись состояния через hooks

.velocity("stop")

Прерывание текущей анимации:

$(element).velocity("stop")

Режимы остановки:

  • stop — останавливает текущую анимацию, оставляя текущее состояние
  • stop, true — очищает очередь анимаций
  • stop, false, true — завершает текущую анимацию мгновенно

Используется при:

  • отмене пользовательских взаимодействий
  • переключении состояний UI
  • предотвращении накопления очереди анимаций

.velocity("finish")

Мгновенное завершение всех анимаций:

$(element).velocity("finish")

Поведение:

  • доводит текущую анимацию до конечного состояния
  • очищает очередь
  • вызывает все callback-и завершения

.velocity("reverse")

Разворот текущей анимации:

$(element).velocity("reverse")

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

  • инвертирует текущие значения свойств
  • работает только с активной анимацией Velocity
  • учитывает easing и duration исходной анимации

.velocity("pause") и .velocity("resume")

Управление временной остановкой:

$(element).velocity("pause")
$(element).velocity("resume")

Поведение:

  • pause фиксирует текущее состояние анимации без завершения
  • resume продолжает с момента остановки

Используется в:

  • кастомных слайдерах
  • интерактивных интерфейсах
  • сложных сценах анимации

Статические методы Velocity

Velocity.RegisterEffect()

Регистрация кастомного эффекта:

Velocity.RegisterEffect(name, definition)

Структура эффекта:

  • defaultDuration
  • calls — массив последовательных анимационных шагов
  • reset — начальные состояния

Пример логики:

  • объединение нескольких анимаций в один вызов
  • создание переиспользуемых пресетов

Velocity.RegisterUI()

Интеграция UI Pack эффектов:

Velocity.RegisterUI(elements, properties)

Назначение:

  • подключение готовых UI-анимаций
  • расширение набора эффектов
  • работа с предустановленными сценариями движения

Velocity.RunSequence()

Последовательное выполнение анимаций:

Velocity.RunSequence(sequence)

Структура sequence:

[
  { e: element, p: { opacity: 1 }, o: { duration: 300 } },
  { e: element, p: { translateY: 50 }, o: { duration: 200 } }
]

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

  • строгий порядок выполнения
  • автоматическое связывание шагов
  • поддержка задержек и callbacks

Velocity.hook()

Работа с CSS hooks:

Velocity.hook(element, "translateX", "100px")

Режимы:

  • запись значения
  • чтение значения

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

  • transform hooks (translateX, scale, rotate)
  • opacity hooks
  • color hooks (в некоторых конфигурациях)

Используется для:

  • точечной манипуляции стилями
  • синхронизации состояния DOM
  • оптимизации без перезапуска анимации

Velocity.Utilities

Набор внутренних утилит:

  • easing-функции
  • расчет прогрессии
  • нормализация значений
  • работа с временными шкалами

Хотя не всегда публично документирован, используется внутри:

  • эффектов
  • UI Pack
  • sequence engine

Командный интерфейс .velocity()

Velocity поддерживает строковые команды:

Очередь и управление

  • "stop"
  • "finish"
  • "reverse"
  • "pause"
  • "resume"

Внутренние режимы выполнения

  • "fadeIn"
  • "fadeOut"
  • "slideUp"
  • "slideDown" (через UI Pack)

Эти команды работают как высокоуровневые пресеты поверх базового engine.

Hook API

Общая модель hook-методов

Hook API позволяет управлять CSS-свойствами напрямую:

Velocity.hook(element, property, value)

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

Transform hooks

  • translateX
  • translateY
  • translateZ
  • scale
  • rotate
  • skew

Visual hooks

  • opacity
  • color (в зависимости от конфигурации)

Особенности реализации:

  • отсутствие reflow при трансформациях
  • прямое управление style.transform
  • нормализация единиц измерения

Внутренние методы движка

Движок очередей

Velocity использует внутреннюю систему очередей:

  • очередь на элемент
  • глобальная очередь
  • синхронизация между группами элементов

Команды управления:

  • enqueue (добавление в очередь)
  • dequeue (удаление/выполнение)
  • clearQueue (очистка)

Tween engine

Основная вычислительная модель:

  • интерполяция значений
  • расчёт easing
  • нормализация времени
  • обработка frame loop

Работа с элементами через массивы

Все методы поддерживают:

  • NodeList
  • HTMLCollection
  • массив DOM-элементов

Поведение:

  • параллельное выполнение анимации
  • независимые состояния
  • синхронизация через sequence при необходимости

Интеграция с jQuery API

При подключении jQuery-версии:

$().velocity()

Расширяет стандартный jQuery API:

  • совместимость с .animate()
  • поддержка цепочек вызовов
  • единая модель очередей

Отличия от jQuery animate:

  • transform вместо layout-изменений
  • более высокая производительность
  • аппаратное ускорение по умолчанию

Командные режимы исполнения

Velocity поддерживает режимы:

CSS-режим

  • работа через transform/opacity
  • минимизация reflow

JS-режим

  • точный контроль значений
  • вычисление промежуточных состояний

Hybrid-режим

  • автоматический выбор стратегии
  • оптимизация под свойства

Временные функции управления

Delay внутри options

{ delay: 300 }

Позволяет:

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

Progress callback

progress: function(elements, complete, remaining, start, tweenValue) {}

Данные:

  • прогресс выполнения
  • оставшееся время
  • текущие значения tween

Механизм завершения и очистки

Complete callback

Вызывается после завершения:

  • всех шагов sequence
  • одиночной анимации
  • UI эффекта

Begin callback

Срабатывает перед стартом:

  • инициализация состояния
  • подготовка DOM

Итоговая структура API

Velocity.js API состоит из уровней:

  • Core функция Velocity()
  • DOM-методы .velocity()
  • Static API (RegisterEffect, RunSequence, hook)
  • UI Pack расширения
  • Sequence engine
  • Hook system
  • Queue system
Оглавление