Описание всех методов

Библиотека Vivus управляет анимацией SVG-пути через объект экземпляра, создаваемый при инициализации. Все взаимодействие с анимацией происходит через набор методов, позволяющих контролировать жизненный цикл от запуска до полного завершения.

play()

Метод запускает или продолжает анимацию от текущего положения кадра.

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

  • если анимация была остановлена через stop(), она продолжится с текущего кадра
  • если анимация завершена, запуск может зависеть от режима (например, inViewport, delayed, oneByOne)
  • повторный вызов не перезапускает анимацию заново, а лишь снимает состояние паузы

Типичное использование:

  • управление анимацией по событию (scroll, hover, click)
  • возобновление после паузы

stop()

Останавливает выполнение анимации без сброса текущего состояния.

Ключевые характеристики:

  • текущий кадр фиксируется
  • прогресс сохраняется
  • последующий play() продолжает с того же места

Метод используется для:

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

reset()

Сбрасывает анимацию в начальное состояние.

Поведение:

  • все пути SVG возвращаются к исходному виду
  • внутренний прогресс устанавливается в 0
  • анимация считается не начатой

Используется:

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

finish()

Принудительно завершает анимацию.

Особенности:

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

Применение:

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

destroy()

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

После вызова:

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

Особенности:

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

Применяется:

  • при удалении компонента из DOM
  • в SPA при смене маршрута
  • для предотвращения утечек памяти

setFrame(frame)

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

Параметры:

  • frame — числовое значение текущего кадра

Поведение:

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

Использование:

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

getStatus()

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

Типичные значения состояния:

  • start — анимация не начата
  • progress — анимация в процессе выполнения
  • end — завершена
  • stop — остановлена пользователем

Применение:

  • проверка перед запуском play()
  • синхронизация UI-индикаторов
  • управление логикой переключения состояний

Методы управления скоростью и направлением

В некоторых реализациях Vivus предусмотрены дополнительные параметры управления, влияющие на поведение анимации при запуске.

setSpeed(speed)

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

Характеристики:

  • speed > 1 — ускорение анимации
  • speed < 1 — замедление
  • влияет только на будущие кадры, не пересчитывает уже отрисованные

Используется:

  • адаптация под пользовательские сценарии
  • создание эффекта ускоренной прокрутки

обратное воспроизведение через reset + play

Прямого метода reverse нет, но поведение может быть имитировано:

  • вызов reset() обнуляет состояние
  • последующий контроль прогресса через setFrame() позволяет реализовать обратную анимацию вручную

Взаимодействие методов между собой

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

  • play() и stop() работают как переключатель активности
  • reset() возвращает систему в исходную точку, обнуляя результат finish()
  • finish() завершает состояние независимо от play()
  • setFrame() выступает как низкоуровневый контроллер, обходящий стандартный поток анимации
  • destroy() разрывает всю цепочку управления

Типичная логика управления:

  • начальная инициализация → reset()
  • запуск → play()
  • временная пауза → stop()
  • завершение → finish() или естественный конец
  • полное удаление → destroy()

Особенности внутреннего состояния экземпляра

Vivus хранит состояние анимации в виде внутренних параметров, связанных с:

  • текущим индексом пути
  • прогрессом отрисовки stroke
  • временем выполнения кадра
  • режимом анимации

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

Оглавление