reset и finish

В библиотеке Vivus управление состоянием анимации не ограничивается запуском через play(). Существенную роль в интерактивных интерфейсах и сценариях повторного использования SVG-анимаций играют методы reset() и finish(), позволяющие жестко контролировать текущее положение анимации на временной шкале.

reset(): возврат анимации к исходному состоянию

Метод reset() полностью обнуляет прогресс анимации и возвращает SVG-элементы в состояние до начала отрисовки.

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

При вызове:

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

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

reset() применяется в ситуациях, где требуется повторное воспроизведение анимации с начала без перезагрузки страницы или пересоздания экземпляра:

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

Пример базового использования

const anim = new Vivus('my-svg', {
  type: 'delayed',
  duration: 200
});

// запуск анимации
anim.play();

// сброс состояния через 2 секунды
setTimeout(() => {
  anim.reset();
}, 2000);

После вызова reset() SVG возвращается к начальному состоянию, и для повторного запуска требуется снова вызвать play().

Повторный запуск после reset

Частая схема использования:

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

Важный момент заключается в том, что reset() не инициирует повторную анимацию автоматически, а лишь подготавливает объект к новому запуску.

Взаимодействие с пользовательскими событиями

reset() часто связывается с событиями интерфейса:

document.getElementById('restart').addEventListener('click', () => {
  anim.reset();
  anim.play();
});

Такая схема используется в интерактивных прототипах, обучающих визуализациях и графических панелях.

finish(): мгновенное завершение анимации

Метод finish() переводит анимацию в полностью завершённое состояние без промежуточных кадров.

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

При вызове:

  • вся SVG-анимация мгновенно доводится до конца
  • все пути становятся полностью прорисованными
  • текущий прогресс устанавливается в 100%
  • активная анимация прекращается

Логика применения

finish() используется, когда требуется:

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

Пример использования finish()

const anim = new Vivus('my-svg', {
  type: 'sync',
  duration: 150
});

// мгновенное завершение через 1 секунду
setTimeout(() => {
  anim.finish();
}, 1000);

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

Отличие finish от play до конца

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

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

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

Сброс и мгновенное завершение

anim.reset();
anim.finish();

Такой вызов переводит SVG в завершённое состояние, минуя анимацию. На практике используется редко, но может применяться для инициализации интерфейса в «готовом» виде.

Переключение между состояниями

function toggleAnimation(state) {
  if (state === 'start') {
    anim.reset();
    anim.play();
  }

  if (state === 'end') {
    anim.finish();
  }
}

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

Влияние на внутреннее состояние Vivus

Оба метода воздействуют на внутренний механизм управления путями SVG:

  • reset() возвращает состояние stroke-dashoffset к начальному значению
  • finish() устанавливает stroke-dashoffset в конечное значение (обычно 0)

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

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

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

  • начальное (после reset())
  • промежуточное (во время play())
  • завершённое (после finish())

Такой подход позволяет строить предсказуемые анимационные машины состояний, где Vivus выступает как слой визуального исполнения SVG-переходов.

Оглавление