Click-триггеры

Click-триггеры в Vivus реализуются через связку стандартных DOM-событий и управления состоянием экземпляра SVG-анимации. Библиотека Vivus не навязывает собственную систему событийного управления, а предоставляет методы контроля анимации, которые подключаются к любым пользовательским триггерам, включая click, mouseenter, scroll и программные вызовы.

Основная модель работы строится вокруг экземпляра Vivus, который управляет отрисовкой SVG по заданному алгоритму (последовательному, синхронному или задержанному). Click-триггер в этой архитектуре выступает внешним источником запуска или повторного запуска анимации.

Базовая модель подключения click-события

Интеграция click-триггера реализуется через стандартный обработчик DOM:

const myVivus = new Vivus('svg-element', {
  type: 'oneByOne',
  duration: 120,
  start: 'manual'
});

document.getElementById('trigger').addEventListener('click', () => {
  myVivus.play();
});

Ключевой параметр здесь — start: 'manual'. Он отключает автоматический запуск анимации и переводит управление полностью на внешние события.

Метод play() запускает анимацию с текущего состояния SVG, если оно сброшено или находится в начале.

Повторный запуск анимации по клику

Повторное воспроизведение требует явного сброса состояния. Vivus хранит внутренний прогресс отрисовки, поэтому без сброса повторный play() не всегда приводит к ожидаемому результату.

const myVivus = new Vivus('svg-element', {
  type: 'delayed',
  duration: 200,
  start: 'manual'
});

const button = document.getElementById('trigger');

button.addEventListener('click', () => {
  myVivus.reset().play();
});

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

Переключение состояний: play / stop / reset

Click-триггеры часто используются не только для запуска, но и для управления состоянием анимации. Типовой паттерн включает переключение между воспроизведением и остановкой.

const vivus = new Vivus('svg-element', {
  type: 'sync',
  duration: 150,
  start: 'manual'
});

let isPlaying = false;

document.getElementById('trigger').addEventListener('click', () => {
  if (isPlaying) {
    vivus.stop();
    isPlaying = false;
  } else {
    vivus.play();
    isPlaying = true;
  }
});

Метод stop() фиксирует текущее состояние отрисовки без сброса прогресса, что позволяет продолжить анимацию с текущего момента при повторном запуске.

Поведение click-триггера при разных типах анимации

Vivus поддерживает несколько режимов отрисовки SVG, и реакция click-триггера зависит от выбранного типа.

oneByOne

Каждый путь SVG отрисовывается последовательно. Click-триггер в этом режиме приводит к заметному линейному запуску анимации.

new Vivus('svg-element', {
  type: 'oneByOne',
  duration: 100,
  start: 'manual'
});

Повторный клик без reset() может привести к отсутствию визуального эффекта, поскольку часть путей уже отрисована.

delayed

Каждый путь получает задержку относительно предыдущего. Click-триггер инициирует каскадную анимацию.

new Vivus('svg-element', {
  type: 'delayed',
  duration: 180,
  start: 'manual'
});

В этом режиме особенно важен reset() при повторных запусках, так как прогресс распределён по временной шкале.

sync

Все пути анимируются одновременно. Click-триггер вызывает синхронное воспроизведение.

new Vivus('svg-element', {
  type: 'sync',
  duration: 120,
  start: 'manual'
});

Этот режим наиболее устойчив к повторным вызовам play() без сброса состояния.

Делегирование click-триггеров

При работе с большим количеством SVG-элементов применяется делегирование событий. Это снижает количество обработчиков и упрощает управление группой анимаций.

const svgs = document.querySelectorAll('.animated-svg');

const instances = Array.from(svgs).map((el) =>
  new Vivus(el, {
    type: 'delayed',
    duration: 150,
    start: 'manual'
  })
);

document.body.addEventListener('click', (event) => {
  const target = event.target.closest('.animated-svg');
  if (!target) return;

  const index = Array.from(svgs).indexOf(target);
  const instance = instances[index];

  instance.reset().play();
});

Делегирование позволяет привязать click-триггер к родительскому контейнеру, минимизируя количество подписок на события.

Привязка click-триггера к SVG-области

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

const svg = document.getElementById('svg-element');

const vivus = new Vivus(svg, {
  type: 'oneByOne',
  duration: 140,
  start: 'manual'
});

svg.addEventListener('click', () => {
  vivus.reset().play();
});

SVG выступает одновременно визуальным объектом и интерактивным контроллером анимации.

Зацикливание через click-триггер

Click-триггеры часто используются для реализации циклической анимации, где каждое нажатие перезапускает процесс.

const vivus = new Vivus('svg-element', {
  type: 'delayed',
  duration: 160,
  start: 'manual'
});

document.getElementById('trigger').addEventListener('click', () => {
  vivus.stop();
  vivus.reset();
  vivus.play();
});

Комбинация stop() и reset() гарантирует полное возвращение к исходному состоянию перед новым запуском.

Сложные click-сценарии с несколькими SVG

При работе с композициями SVG-анимаций click-триггер может управлять несколькими экземплярами Vivus одновременно.

const header = new Vivus('header-svg', {
  type: 'sync',
  duration: 100,
  start: 'manual'
});

const icon = new Vivus('icon-svg', {
  type: 'delayed',
  duration: 140,
  start: 'manual'
});

document.getElementById('trigger').addEventListener('click', () => {
  header.reset().play();
  icon.reset().play();
});

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

Управление интенсивностью click-триггера

Click-триггер может быть ограничен логически, чтобы предотвратить частые перезапуски анимации. В таких сценариях вводится контроль состояния.

let locked = false;

const vivus = new Vivus('svg-element', {
  type: 'oneByOne',
  duration: 120,
  start: 'manual'
});

document.getElementById('trigger').addEventListener('click', () => {
  if (locked) return;

  locked = true;

  vivus.reset().play();

  setTimeout(() => {
    locked = false;
  }, 1500);
});

Логическая блокировка предотвращает наложение анимационных циклов.

Использование click-триггера как переключателя визуального состояния

Click может выступать не только запуском анимации, но и механизмом переключения между статичным и анимированным состоянием SVG.

const vivus = new Vivus('svg-element', {
  type: 'sync',
  duration: 130,
  start: 'manual'
});

let animated = false;

document.getElementById('trigger').addEventListener('click', () => {
  if (!animated) {
    vivus.reset().play();
    animated = true;
  } else {
    vivus.stop();
    animated = false;
  }
});

Такой подход позволяет использовать одну и ту же SVG-структуру как статичный и динамический элемент интерфейса.

Особенности взаимодействия click-триггера и состояния DOM

SVG, управляемый Vivus, изменяет атрибуты stroke-dasharray и stroke-dashoffset для имитации рисования. Click-триггер фактически управляет изменением этих параметров через API библиотеки, а не напрямую через DOM.

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

Комбинирование click-триггера с другими событиями

Click-триггер часто комбинируется с hover-событиями и программными вызовами. В таких схемах click выступает как финальный контроллер состояния.

const vivus = new Vivus('svg-element', {
  type: 'delayed',
  duration: 150,
  start: 'manual'
});

document.getElementById('trigger').addEventListener('mouseenter', () => {
  vivus.stop();
});

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

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

Оглавление