Vanilla JavaScript подход

Vivus представляет собой легковесную библиотеку для анимации SVG-путей с использованием чистого JavaScript без зависимости от фреймворков. Основная идея — последовательное «прорисовывание» линий SVG, создающее эффект рисования от руки.

Подключение через CDN:

<script src="https://cdn.jsdelivr.net/npm/vivus@latest/dist/vivus.min.js"></script>

SVG может быть встроен напрямую в HTML или загружен как внешний файл. Оба подхода поддерживаются, но различаются по уровню контроля и гибкости.

Подготовка SVG для анимации

Ключевое требование — SVG должен содержать пути (<path>), так как именно они анимируются. Примитивы вроде <rect>, <circle> и <line> часто конвертируются в path на этапе экспорта из редакторов (Figma, Illustrator, Inkscape).

Пример корректной структуры:

<svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
  <path d="M10 10 H 190 V 190 H 10 Z" />
</svg>

Важно:

  • каждый path должен иметь корректный d
  • избегается использование fill-анимаций при базовой работе Vivus
  • сложные SVG лучше оптимизировать через SVGO

Базовая инициализация

Минимальный запуск анимации выполняется через создание экземпляра:

<script>
  new Vivus('logo', {
    duration: 200,
    type: 'delayed'
  });
</script>

Параметры:

  • logo — id SVG элемента
  • duration — длительность анимации в кадрах
  • type — тип поведения отрисовки

Типы анимации

delayed

Каждый path анимируется последовательно с небольшой задержкой:

new Vivus('logo', {
  duration: 180,
  type: 'delayed'
});

Используется для логотипов и иллюстраций, где важен «живой» эффект рисования.

sync

Все пути анимируются одновременно:

new Vivus('logo', {
  duration: 180,
  type: 'sync'
});

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

oneByOne

Пути прорисовываются строго по очереди:

new Vivus('logo', {
  duration: 180,
  type: 'oneByOne'
});

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

Работа с внешними SVG файлами

Поддерживается загрузка SVG по URL:

new Vivus('logo-container', {
  file: '/assets/logo.svg',
  duration: 200,
  type: 'delayed'
});

Контейнер:

<div id="logo-container"></div>

SVG внедряется внутрь DOM автоматически, после чего применяется анимация.

Управление воспроизведением

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

const animation = new Vivus('logo', {
  duration: 200,
  type: 'delayed'
});

Методы:

play

Запуск или продолжение:

animation.play();

stop

Остановка анимации:

animation.stop();

reset

Сброс состояния к исходному:

animation.reset();

finish

Мгновенное завершение:

animation.finish();

Callback после завершения

Поддерживается функция обратного вызова:

new Vivus('logo', {
  duration: 200,
  type: 'delayed',
  onReady: function (vivus) {
    vivus.play();
  }
}, function () {
  console.log('animation complete');
});

Callback полезен при построении последовательных сцен интерфейса.

Настройка задержек и скорости

Параметр duration напрямую влияет на плавность и скорость отрисовки. Чем больше значение, тем медленнее анимация.

Практическое поведение:

  • 50–100 — быстрые UI-анимации
  • 150–300 — логотипы и иллюстрации
  • 300+ — художественная отрисовка

Управление порядком анимации SVG-путей

Порядок в DOM определяет последовательность отрисовки. Это критический фактор при использовании oneByOne.

Пример структуры:

<svg id="logo">
  <path d="..." />
  <path d="..." />
  <path d="..." />
</svg>

Изменение порядка элементов изменяет визуальную логику анимации без изменения JavaScript.

Интеграция с динамически создаваемыми SVG

SVG может создаваться через JavaScript до инициализации Vivus:

const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('id', 'dynamic');
svg.setAttribute('viewBox', '0 0 100 100');

const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
path.setAttribute('d', 'M10 10 H 90 V 90 H 10 Z');

svg.appendChild(path);
document.body.appendChild(svg);

new Vivus('dynamic', {
  duration: 150,
  type: 'sync'
});

Особенности работы с stroke

Vivus работает через свойства stroke-dasharray и stroke-dashoffset.

Для корректного эффекта необходимо:

path {
  stroke: black;
  fill: none;
  stroke-width: 2;
}

Любая заливка (fill) может визуально скрыть эффект рисования.

Оптимизация SVG перед анимацией

Критически важно уменьшать сложность SVG:

  • удаление лишних групп (<g>)
  • упрощение кривых
  • минимизация количества path
  • удаление метаданных

Инструменты оптимизации:

  • SVGO
  • встроенные оптимизаторы редакторов

Контроль повторного воспроизведения

Повторная анимация возможна через reset + play:

animation.reset();
animation.play();

Используется в интерфейсах с повторяемыми эффектами (например, hover или scroll-triggered анимации).

Работа с несколькими экземплярами

Несколько SVG могут анимироваться независимо:

const a = new Vivus('icon1', { duration: 120, type: 'sync' });
const b = new Vivus('icon2', { duration: 200, type: 'delayed' });
const c = new Vivus('icon3', { duration: 160, type: 'oneByOne' });

Каждый экземпляр управляет собственным DOM-элементом без пересечений состояния.

Типичные ограничения и поведение

  • CSS-анимации не конфликтуют напрямую, но могут перекрывать визуально
  • сложные фильтры SVG (blur, shadow) могут снижать производительность
  • большое количество path приводит к увеличению времени расчётов
  • анимация всегда основана на stroke, а не на fill

Использование в чистом JavaScript интерфейсе

Без фреймворков Vivus интегрируется напрямую в DOM-логику:

document.addEventListener('DOMContentLoaded', () => {
  const logo = new Vivus('logo', {
    duration: 180,
    type: 'delayed'
  });

  document.querySelector('#restart').addEventListener('click', () => {
    logo.reset().play();
  });
});

Такой подход характерен для классических SPA без зависимостей или для статических сайтов с интерактивными элементами.

Оглавление