destroy

Метод destroy в vivus относится к завершающему этапу жизненного цикла экземпляра анимации и используется для полного удаления всех следов работы библиотеки из DOM и памяти. В отличие от временной остановки или сброса анимации, данный метод выполняет необратимую очистку связанной инфраструктуры объекта.

Каждый экземпляр Vivus при создании:

  • анализирует структуру SVG
  • преобразует пути (<path>) для построчного рисования
  • навешивает внутренние обработчики анимации
  • сохраняет состояние прогресса отрисовки
  • может запускать циклы анимации через requestAnimationFrame или таймеры

Метод destroy завершает этот цикл, переводя экземпляр в состояние, при котором дальнейшее использование невозможно без пересоздания.

Ключевая идея: полное освобождение ресурсов, а не временная приостановка.

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

При вызове destroy() выполняется последовательность операций:

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

Любые активные анимационные циклы прерываются:

  • отменяются requestAnimationFrame
  • останавливаются внутренние таймеры
  • прекращается обновление stroke-offset

Это гарантирует, что SVG больше не изменяется со стороны библиотеки.

2. Очистка внутренних ссылок

Удаляются все ссылки на DOM-элементы:

  • массивы путей (path коллекции)
  • вычисленные длины контуров
  • кешированные значения прогресса
  • служебные структуры состояния

Это критично для предотвращения утечек памяти в долгоживущих приложениях.

3. Разрыв связей с DOM

Vivus перестаёт управлять SVG-элементом:

  • удаляются inline-стили, если они были добавлены библиотекой
  • обнуляются transform/transition, связанные с анимацией
  • снимаются привязанные обработчики событий

После этого SVG остаётся в DOM, но становится «статическим».

4. Обнуление экземпляра

Внутреннее состояние объекта переводится в неактивное:

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

Отличие destroy от stop и reset

В архитектуре Vivus важно различать уровни управления состоянием.

stop

Остановка текущей анимации без разрушения объекта:

  • состояние сохраняется
  • можно продолжить выполнение
  • DOM остаётся под управлением библиотеки

reset

Сброс прогресса анимации:

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

destroy

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

  • управление SVG прекращается полностью
  • восстановление невозможно
  • ресурсы освобождаются

Внутренняя модель очистки

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

Удаление requestAnimationFrame

Типичный цикл анимации Vivus завязан на requestAnimationFrame. При destroy:

  • идентификатор кадра сохраняется при запуске
  • затем передаётся в cancelAnimationFrame
  • последующие вызовы игнорируются

Это предотвращает «фоновые» обновления после удаления компонента.

Очистка массивов путей

Каждый SVG path преобразуется в объект:

  • длина линии
  • dasharray/dashoffset параметры
  • прогресс отрисовки

destroy очищает эти структуры, позволяя сборщику мусора освободить память.

Удаление модификаций стилей

Vivus часто изменяет:

  • stroke-dasharray
  • stroke-dashoffset
  • inline transition properties

После destroy библиотека не гарантирует возврат к исходным значениям, поэтому важно учитывать: состояние SVG после destroy считается финальным.

Использование destroy в SPA архитектурах

В приложениях с динамическим интерфейсом (React, Vue, Angular или vanilla SPA) destroy становится обязательным элементом управления жизненным циклом.

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

  • компонент монтируется → создаётся экземпляр Vivus
  • выполняется анимация SVG
  • компонент размонтируется → вызывается destroy

Игнорирование destroy приводит к:

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

Особенно критично при повторном создании одинаковых SVG-анимаций.

Поведение после вызова destroy

После выполнения метода экземпляр:

  • не реагирует на повторные вызовы play, stop, reset
  • не изменяет DOM
  • не содержит валидных ссылок на элементы SVG

Фактически объект остаётся, но теряет функциональную значимость.

Важно учитывать, что сама ссылка на экземпляр JavaScript не удаляется автоматически — она должна быть обнулена вручную, если требуется полное освобождение:

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

Особенности работы с повторной инициализацией

При необходимости повторного создания анимации на том же SVG:

  • сначала вызывается destroy
  • затем создаётся новый экземпляр Vivus
  • старые вычисленные данные не переиспользуются

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

Потенциальные ошибки при использовании destroy

Вызов destroy во время активной анимации

Может привести к:

  • обрыву кадра отрисовки
  • визуальному «разрыву» SVG
  • неконсистентному состоянию стилей

Повторный вызов destroy

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

Удаление DOM до destroy

Если SVG удалён из документа до вызова destroy:

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

Роль destroy в оптимизации производительности

В долгоживущих интерфейсах destroy является ключевым механизмом:

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

При правильном использовании метод становится частью общей стратегии управления ресурсами SVG-анимации.

Оглавление