Методы play и pause

В библиотеке Lottie Web управление анимацией строится вокруг экземпляра анимации, который возвращается при инициализации через lottie.loadAnimation. Этот экземпляр предоставляет набор методов, среди которых ключевую роль в базовом управлении воспроизведением играют play() и pause().

Эти методы относятся к уровню управления состоянием анимации и напрямую воздействуют на внутренний таймер проигрывания, не изменяя саму структуру или данные анимации.

Метод play()

Метод play() запускает или возобновляет воспроизведение анимации с текущего кадра. Если анимация была остановлена, воспроизведение продолжается с того места, где оно было прервано.

Поведение метода

  • запускает анимацию, если она была остановлена через pause()
  • продолжает воспроизведение с текущего кадра
  • учитывает направление анимации (direction)
  • не сбрасывает прогресс
  • не влияет на зацикливание (loop)

Базовый пример использования

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

anim.play();

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

Повторный вызов play()

Повторный вызов play() не перезапускает анимацию с начала, если она уже находится в состоянии воспроизведения. Метод не сбрасывает текущий кадр и не влияет на временную шкалу.

anim.play();
anim.play();

Поведение остаётся идентичным первому вызову: анимация продолжает проигрываться без прерывания.

Взаимодействие с текущим состоянием

play() влияет на внутренний флаг состояния проигрывания. При этом Lottie Web не хранит отдельного публичного состояния “playing”, однако его можно косвенно определить через логику приложения.

Типовые сценарии:

  • анимация была поставлена на паузу → play() возобновляет
  • анимация завершилась (при loop: false) → поведение зависит от текущего кадра и конфигурации, возможен возврат к последнему кадру или завершённое состояние

Метод pause()

Метод pause() останавливает воспроизведение анимации на текущем кадре. Таймер обновления кадров прекращает изменение прогресса до следующего вызова play().

Поведение метода

  • фиксирует текущий кадр
  • останавливает прогресс анимации
  • не сбрасывает состояние
  • не очищает canvas/SVG/DOM
  • сохраняет текущую позицию временной шкалы

Базовый пример использования

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

anim.pause();

После вызова pause() анимация визуально «замирает» на текущем кадре.

Повторный вызов pause()

Повторный вызов pause() не изменяет состояние анимации:

anim.pause();
anim.pause();

Анимация остаётся остановленной, без дополнительных эффектов или сброса кадров.

Фиксация состояния

pause() не влияет на:

  • текущий прогресс (currentFrame)
  • направление воспроизведения
  • цикличность
  • скорость (setSpeed)

Он лишь останавливает обновление кадров, сохраняя всё остальное состояние неизменным.

Внутренний механизм управления play/pause

Lottie Web использует цикл обновления кадров, основанный на requestAnimationFrame. При вызове play() запускается или возобновляется этот цикл, а при pause() — прекращается выполнение обновляющей функции.

Упрощённо логика выглядит следующим образом:

  • play() → запуск render loop
  • pause() → остановка render loop

При этом сам объект анимации остаётся в памяти и сохраняет все параметры.

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

При loop: false анимация может достигать конечного кадра и оставаться в завершённом состоянии.

В этом случае:

  • pause() фиксирует текущий кадр (обычно последний)
  • play() может не привести к повторному воспроизведению без изменения диапазона или явного сброса

Типичный сценарий:

anim.goToAndStop(0, true);
anim.play();

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

Комбинирование play и pause в логике управления

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

Часто используется простая логика переключателя:

let isPlaying = false;

function toggleAnimation() {
  if (isPlaying) {
    anim.pause();
  } else {
    anim.play();
  }
  isPlaying = !isPlaying;
}

Хотя Lottie Web не предоставляет прямого метода isPaused(), состояние обычно контролируется на уровне приложения.

Управление несколькими экземплярами

При работе с несколькими анимациями каждый экземпляр имеет собственные методы play() и pause():

const anim1 = lottie.loadAnimation({...});
const anim2 = lottie.loadAnimation({...});

anim1.play();
anim2.pause();

Состояния не пересекаются, каждый экземпляр управляется независимо.

Взаимодействие с autoplay

Параметр autoplay влияет только на начальное состояние:

  • autoplay: true → автоматический запуск после загрузки
  • autoplay: false → требуется явный play()

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

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

// анимация не стартует
anim.play();  // запуск
anim.pause(); // остановка

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

При потере видимости вкладки браузер может снижать частоту requestAnimationFrame. В таких условиях:

  • play() остаётся активным состоянием, но рендер может замедляться
  • pause() полностью прекращает обновления, снижая нагрузку

В сложных интерфейсах часто используется принудительная пауза при скрытии элемента:

document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    anim.pause();
  } else {
    anim.play();
  }
});

Сочетание с другими методами управления временем

Методы play() и pause() часто используются вместе с:

  • stop() — сброс на начальный кадр
  • goToAndStop() — переход к конкретному кадру и остановка
  • setSpeed() — изменение скорости воспроизведения

Комбинация позволяет строить сложные сценарии управления анимацией без модификации JSON-данных.

Поведение при destroy

После вызова destroy() экземпляр анимации уничтожается:

  • play() и pause() становятся недоступными
  • внутренний render loop прекращается
  • DOM-структура очищается
anim.destroy();
anim.play(); // не имеет эффекта

Типичные ошибки использования

  • ожидание сброса анимации при pause() (pause не обнуляет прогресс)
  • попытка определить состояние через внутренние поля объекта (нет стабильного публичного флага)
  • вызов play() без учёта loop: false и завершённого состояния
  • управление несколькими анимациями через общий флаг без синхронизации экземпляров
Оглавление