Velocity.timestamp

Velocity.timestamp — внутреннее служебное свойство библиотеки Velocity.js, представляющее собой текущее значение времени, используемое движком анимации для синхронизации кадров, расчёта длительности и управления состоянием анимаций.

Назначение и роль в движке

В основе работы Velocity лежит цикл рендеринга, синхронизированный с браузерным API requestAnimationFrame. На каждом шаге этого цикла вычисляется временная метка (timestamp), которая затем используется для:

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

Velocity.timestamp хранит текущее время в миллисекундах с момента начала отсчёта (обычно — с момента запуска страницы или анимационного цикла).

Источник значения

Значение timestamp передаётся браузером в колбэк функции requestAnimationFrame. Внутри Velocity оно может быть:

  • либо напрямую использовано из аргумента requestAnimationFrame
  • либо получено через performance.now для повышения точности

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

Использование внутри Velocity

Свойство не предназначено для прямого использования разработчиком, но играет ключевую роль в следующих внутренних механизмах:

1. Расчёт прогресса анимации

Прогресс определяется как отношение прошедшего времени к общей длительности:

progress = (currentTime - startTime) / duration

Где:

  • currentTime — значение Velocity.timestamp
  • startTime — момент начала анимации
  • duration — длительность анимации

2. Управление кадрами

Velocity использует timestamp для:

  • предотвращения пропуска кадров
  • компенсации задержек (например, при низком FPS)
  • сглаживания анимации

Если кадр был пропущен, расчёт всё равно будет корректным, так как используется абсолютное время, а не фиксированный шаг.

3. Синхронизация нескольких анимаций

При запуске нескольких анимаций одновременно:

  • все они используют общий Velocity.timestamp
  • это гарантирует одинаковый временной базис
  • устраняет рассинхронизацию между элементами

Влияние на easing-функции

Easing-функции в Velocity (например, easeInOut, spring, linear) зависят от нормализованного прогресса, который рассчитывается на основе timestamp.

Пример:

easedProgress = easingFunction(progress)

Точность timestamp напрямую влияет на:

  • плавность кривой
  • отсутствие «рывков»
  • корректную интерполяцию значений

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

Высокая точность

Использование performance.now() обеспечивает:

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

Независимость от FPS

В отличие от старых подходов (например, setInterval):

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

Централизованное управление временем

Velocity.timestamp обновляется один раз за кадр и используется всеми активными анимациями:

  • снижает нагрузку
  • исключает дублирование вычислений
  • обеспечивает консистентность

Внутренний жизненный цикл

  1. Браузер вызывает requestAnimationFrame(callback)
  2. В callback передаётся timestamp
  3. Velocity сохраняет значение в Velocity.timestamp
  4. Запускается обновление всех активных анимаций
  5. Для каждой анимации вычисляется прогресс
  6. Применяются изменения к DOM

Сравнение с альтернативами

Подход Точность Синхронизация Производительность
setInterval Низкая Нет Средняя
Date.now() Средняя Ограниченная Средняя
performance.now() Высокая Да Высокая
Velocity.timestamp Высокая Полная Оптимизирована

Потенциальные проблемы и нюансы

1. Долгие вкладки (background tabs)

При переходе вкладки в фон:

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

Velocity компенсирует это, корректируя прогресс.

2. Нагрузки на CPU

При сильной загрузке:

  • интервалы между кадрами увеличиваются
  • timestamp продолжает расти
  • анимация «догоняет» реальное время

3. Сбои синхронизации (редко)

В сложных сценариях (например, при ручной манипуляции временем):

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

Практическое значение для разработчика

Хотя Velocity.timestamp является внутренним свойством, понимание его работы важно для:

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

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

Velocity.timestamp тесно связан с:

  • очередью анимаций (animation queue)
  • тикером (animation tick loop)
  • системой easing
  • механизмом остановки/возобновления анимаций

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

Оглавление