Остановка анимации методом stop

Метод stop в библиотеке Lottie Web используется для принудительной остановки анимации с возвратом к начальному кадру. Он применяется как на уровне конкретного экземпляра анимации, так и глобально через объект lottie, влияя на все загруженные анимации.

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

При вызове stop происходит несколько ключевых изменений состояния анимации:

  • анимация прекращает воспроизведение;
  • текущий прогресс сбрасывается на первый кадр;
  • внутренний таймер воспроизведения останавливается;
  • флаг состояния переключается в режим остановки.

В отличие от pause, который фиксирует текущий кадр, stop всегда возвращает анимацию в исходное состояние.

Отличие stop от pause

Различие между этими методами принципиально важно для управления состояниями анимации:

  • pause() — фиксирует текущее положение и сохраняет кадр;
  • stop() — сбрасывает анимацию к началу;
  • play() — запускает воспроизведение с текущего или начального кадра в зависимости от состояния.

Это поведение делает stop инструментом полного перезапуска анимационного цикла.

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

Каждый объект, возвращаемый lottie.loadAnimation, обладает собственным методом управления воспроизведением.

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

animation.stop();

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

Глобальный метод lottie.stop

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

lottie.stop();

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

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

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

При использовании loop: true метод stop прерывает цикл без ожидания завершения текущей итерации. Поведение отличается от естественного окончания анимации:

  • цикл не доигрывается до конца;
  • переход к началу происходит мгновенно;
  • повторное play начинает воспроизведение с первого кадра.

Состояния после вызова stop

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

  • текущий кадр = 0;
  • прогресс = 0%;
  • воспроизведение = false;
  • внутренний таймер обновления деактивирован.

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

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

Метод stop часто рассматривается в контексте других управляющих функций:

  • play() запускает анимацию с текущего состояния;
  • stop() полностью возвращает в начало;
  • destroy() удаляет анимацию и освобождает ресурсы.

В отличие от destroy, остановка не разрушает DOM-структуру и может быть отменена повторным запуском.

Поведение при асинхронной загрузке

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

const animation = lottie.loadAnimation({
  container: document.body,
  renderer: 'svg',
  path: 'data.json'
});

animation.addEventListener('DOMLoaded', () => {
  animation.stop();
});

Особенности работы с SVG-рендерером

При использовании renderer: 'svg' метод stop дополнительно:

  • возвращает DOM-элементы к начальному состоянию;
  • сбрасывает трансформации;
  • очищает промежуточные состояния анимационных слоёв.

Это важно для корректного повторного запуска сложных векторных сцен.

Сценарии применения

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

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

Внутреннее поведение в движке Lottie

На уровне исполнения stop изменяет внутренние параметры анимационного таймлайна:

  • текущий индекс кадра устанавливается в 0;
  • отменяются активные requestAnimationFrame циклы;
  • пересчитывается состояние слоёв композиции.

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

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

При работе с методом stop важно учитывать особенности рендеринга:

  • в Canvas-режиме сброс происходит через полную перерисовку;
  • в SVG-режиме DOM-узлы сохраняются, но их свойства обнуляются;
  • при использовании WebGL поведение зависит от реализации рендера и может включать очистку буферов.

Эти различия не влияют на API, но определяют производительность и визуальную реакцию.

Оглавление