Событие destroy

Экземпляр анимации в Lottie Web представляет собой объект, который управляет загрузкой, воспроизведением, рендерингом и освобождением ресурсов. Внутри этого объекта реализован жизненный цикл, включающий инициализацию, активное состояние и завершение работы. Одним из ключевых моментов завершения является событие destroy, сигнализирующее о полном уничтожении экземпляра и освобождении всех связанных ресурсов.

Событие destroy

destroy — это финальная точка жизненного цикла экземпляра анимации. Оно возникает в момент, когда экземпляр полностью уничтожается методом destroy(). После этого объекта больше не существует как активной сущности, и любые взаимодействия с ним считаются недопустимыми.

Основная задача события заключается в информировании внешнего кода о том, что:

  • DOM-объекты, связанные с анимацией, удалены или более не используются
  • внутренние слушатели событий сняты
  • таймеры и requestAnimationFrame-циклы остановлены
  • память, занятая ресурсами анимации, освобождена

Когда инициируется destroy

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

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

anim.destroy();

После выполнения destroy() библиотека завершает все внутренние процессы и инициирует цепочку очистки, завершающуюся триггером события.

Дополнительно событие может быть вызвано косвенно в рамках:

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

Внутренние процессы при destroy

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

1. Остановка анимационного цикла

Прекращается использование requestAnimationFrame. Все активные кадры больше не запрашиваются.

2. Удаление обработчиков событий

Снимаются все подписки на события:

  • click
  • resize
  • visibilitychange
  • внутренние события рендера

3. Очистка DOM-структуры

В зависимости от рендерера:

  • SVG: удаляются созданные элементы <svg>, <g>, <path>
  • Canvas: очищается контекст и привязанные буферы
  • HTML: удаляются динамически созданные элементы

4. Обнуление внутренних ссылок

Все ссылки на данные анимации, композиции и слои удаляются для ускорения сборки мусора.

Подписка на событие destroy

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

anim.addEventListener('destroy', () => {
  console.log('Анимация уничтожена');
});

Подписка применяется для синхронизации внешней логики с завершением жизненного цикла, например:

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

Поведение после уничтожения экземпляра

После вызова destroy() экземпляр становится неактивным. Любые попытки обращения к нему приводят к неопределённому поведению:

anim.play(); // не гарантируется выполнение
anim.stop(); // может не иметь эффекта

Фактически объект теряет валидность как управляющая сущность.

Ключевое свойство состояния после уничтожения:

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

Типичные сценарии использования destroy

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

При динамической смене конфигурации:

anim.destroy();

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

Очистка при удалении DOM-узла

Если контейнер удаляется из DOM, анимация должна быть уничтожена вручную:

const container = document.getElementById('box');

anim.destroy();
container.remove();

Интеграция с компонентной архитектурой

В архитектурах с жизненным циклом компонентов уничтожение анимации привязывается к этапу unmount:

  • React: cleanup в useEffect
  • Vue: beforeUnmount
  • Angular: ngOnDestroy

Утечки памяти при отсутствии destroy

Игнорирование уничтожения приводит к накоплению:

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

Особенно критично при многократном создании анимаций в SPA. В таких условиях утечки проявляются как постепенное увеличение потребления памяти и деградация производительности рендера.

Различие между stop и destroy

stop()

  • останавливает воспроизведение
  • сохраняет состояние анимации
  • не освобождает ресурсы
  • может быть возобновлён через play()

destroy()

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

Особенности поведения в разных рендерах

SVG-рендерер

Наиболее затратный по DOM. После destroy() происходит полное удаление SVG-структуры, включая все вложенные группы и пути.

Canvas-рендерер

Основной акцент на очистке контекста и освобождении буферов. DOM при этом остаётся минимальным.

HTML-рендерер

Удаляются динамически созданные HTML-элементы, привязанные к кадрам анимации.

Событие destroy и сборщик мусора

Событие играет важную роль в подготовке объекта к сборке мусора. После его срабатывания:

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

Однако финальная очистка памяти зависит от поведения движка JavaScript, поэтому корректный вызов destroy() является критическим условием для предотвращения утечек.

Повторная инициализация после destroy

После уничтожения экземпляра восстановление возможно только через создание нового объекта:

anim.destroy();

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

Старый экземпляр не сохраняет состояния и не может быть реанимирован.

Оглавление