Установка скорости воспроизведения

В библиотеке Lottie Web скорость воспроизведения анимации задаётся и изменяется динамически, что позволяет управлять ощущением «времени» в анимации без пересборки JSON или изменения таймлайна в After Effects. Основной механизм контроля скорости строится вокруг масштабирования времени, которое применяется ко всему циклу проигрывания.

Базовый механизм изменения скорости

Ключевой метод, отвечающий за скорость воспроизведения:

anim.setSpeed(1);

Параметр принимает числовое значение, где:

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

Фактически скорость интерпретируется как коэффициент временного масштаба. При изменении значения библиотека пересчитывает шаги анимации в рамках внутреннего таймлайна, не изменяя сами ключевые кадры.

Поведение при динамическом изменении скорости

Скорость можно менять в любой момент жизни экземпляра анимации:

anim.setSpeed(0.25);

setTimeout(() => {
  anim.setSpeed(2);
}, 2000);

Изменение применяется мгновенно и влияет на текущую позицию воспроизведения без сброса состояния. Это особенно важно при создании интерактивных интерфейсов, где скорость зависит от пользовательского ввода или состояния приложения.

При этом:

  • текущее положение playhead сохраняется
  • пересчёт времени происходит на следующем кадре рендера
  • нет необходимости перезапускать анимацию

Влияние скорости на цикл воспроизведения

При использовании loop: true изменение скорости влияет на длительность одного цикла. Однако важно учитывать, что реальная «длина» анимации в секундах становится плавающей величиной.

Пример:

const anim = lottie.loadAnimation({
  container: document.getElementById('box'),
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'data.json'
});

anim.setSpeed(3);

В этом случае полный цикл проигрывания сокращается примерно в три раза.

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

Lottie Web поддерживает отрицательные значения скорости:

anim.setSpeed(-1);

Такое значение приводит к:

  • обратному воспроизведению кадров
  • инверсии направления таймлайна
  • сохранению всех параметров анимации (loop, segments)

Особенности поведения:

  • при достижении начала анимации в режиме loop происходит переход к концу
  • события завершения могут срабатывать в зависимости от состояния сегментов
  • SVG-рендер и Canvas ведут себя одинаково в рамках временной логики

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

Скорость в Lottie Web не является независимым параметром каждого слоя или композиции. Она применяется глобально ко всему экземпляру анимации.

Это означает:

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

Дополнительно стоит учитывать, что:

  • при очень высоких значениях скорости возможны пропуски кадров
  • при слишком низких значениях увеличивается нагрузка на рендеринг из-за частых обновлений состояния
  • производительность зависит от выбранного renderer (SVG, Canvas, HTML)

Взаимодействие со segments и управлением временем

При использовании сегментов:

anim.playSegments([10, 60], true);
anim.setSpeed(2);

скорость применяется только внутри заданного диапазона кадров. Это позволяет создавать ускоренные или замедленные фрагменты анимации без изменения глобального поведения.

Важно учитывать:

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

Скорость и управление через play / pause

Методы управления воспроизведением:

anim.pause();
anim.play();
anim.setSpeed(1.5);

Скорость начинает влиять только в момент активного воспроизведения. Если анимация поставлена на паузу, изменение скорости не приводит к визуальным изменениям до вызова play().

Изменение скорости через свойство объекта

Помимо метода setSpeed, в некоторых реализациях доступно прямое свойство:

anim.speed = 2;

Однако этот способ считается менее предпочтительным, так как:

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

Метод setSpeed() остаётся основным и стабильным API.

Практическое влияние на рендеринг

Изменение скорости напрямую влияет на частоту обновления кадров:

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

Векторные SVG-анимации особенно чувствительны к слишком высоким скоростям, так как браузеру приходится быстро перестраивать DOM-структуру.

Canvas-рендер более устойчив к высоким коэффициентам скорости, но может терять плавность при сложных сценах.

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

Часто управление скоростью применяется в интерфейсах, где анимация реагирует на действия пользователя:

document.addEventListener('mousemove', (e) => {
  const speed = (e.clientX / window.innerWidth) * 3;
  anim.setSpeed(speed);
});

Такой подход позволяет:

  • создавать эффект «живой» анимации
  • синхронизировать движение с жестами
  • управлять визуальной динамикой без пересчёта JSON

Комбинация скорости с направлением

Скорость и направление воспроизведения связаны между собой:

anim.setDirection(-1);
anim.setSpeed(2);

В этом случае направление задаёт вектор движения, а скорость масштабирует его интенсивность. При отрицательной скорости направление фактически инвертируется, но setDirection остаётся более явным способом управления логикой воспроизведения.

Особенности работы в разных режимах loop

При loop: false изменение скорости влияет только на один проход анимации. При loop: true поведение становится цикличным, и скорость влияет на частоту повторений.

При резком изменении скорости во время перехода между циклами возможны микросдвиги тайминга, особенно в Canvas-рендере, где синхронизация кадров зависит от requestAnimationFrame.

Практические ограничения производительности

При проектировании интерфейсов с динамической скоростью важно учитывать:

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

Оптимальным считается использование ограниченного диапазона значений, например от 0.25 до 2.5, если нет специальных требований к эффектам.

Поведение при пересоздании анимации

При вызове:

anim.destroy();

значение скорости не сохраняется. При повторной инициализации анимации скорость необходимо задавать заново, так как экземпляр полностью пересоздаётся вместе с внутренним состоянием таймлайна.

Оглавление