Создание простейшей анимации

Для начала требуется подключить библиотеку Vivus. Самый простой способ — использовать CDN:

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

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

Подготовка SVG

Vivus работает только с векторной графикой в формате SVG, причём анимация строится на основе обводок (stroke). Заливки (fill) не участвуют в процессе «рисования».

Простейший SVG-пример:

<svg id="my-svg" viewBox="0 0 200 200">
  <path d="M10 10 L190 10 L190 190 L10 190 Z"
        stroke="black"
        fill="none"
        stroke-width="2"/>
</svg>

Ключевые моменты:

  • id обязателен для привязки анимации
  • fill="none" — убирает заливку
  • stroke задаёт линию, которая будет анимироваться
  • чем проще пути (path), тем предсказуемее результат

Базовое создание анимации

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

<script>
  new Vivus('my-svg');
</script>

Аргумент — это id SVG-элемента.

После выполнения скрипта SVG будет «нарисован» автоматически.

Принцип работы

Vivus имитирует процесс рисования, управляя свойствами SVG:

  • stroke-dasharray
  • stroke-dashoffset

Библиотека вычисляет длину каждого пути и постепенно уменьшает смещение, создавая эффект появления линии.

Управление типом анимации

Vivus поддерживает несколько типов анимации. Они определяют порядок прорисовки элементов.

Пример с указанием типа:

new Vivus('my-svg', {
  type: 'delayed'
});

Основные типы:

  • delayed — элементы появляются с задержкой друг относительно друга
  • sync — все линии рисуются одновременно
  • oneByOne — последовательная прорисовка каждого пути
  • scenario — пользовательский сценарий через атрибуты
  • scenario-sync — синхронизированный сценарий

Настройка длительности

Длительность анимации задаётся через параметр duration:

new Vivus('my-svg', {
  duration: 200
});

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

  • значение — это количество кадров, а не миллисекунды
  • фактическая длительность зависит от FPS браузера
  • увеличение значения замедляет анимацию

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

Параметр start определяет, когда начинается анимация:

new Vivus('my-svg', {
  start: 'autostart'
});

Варианты:

  • autostart — запуск сразу после загрузки
  • manual — ручной запуск
  • inViewport — запуск при появлении в области видимости

Пример ручного запуска:

var anim = new Vivus('my-svg', { start: 'manual' });

// запуск позже
anim.play();

Колбэк после завершения

Vivus позволяет выполнить функцию после окончания анимации:

new Vivus('my-svg', {}, function () {
  console.log('Анимация завершена');
});

Колбэк полезен для:

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

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

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

var anim = new Vivus('my-svg', { start: 'manual' });

anim.play();      // запуск
anim.stop();      // остановка
anim.reset();     // сброс
anim.finish();    // мгновенное завершение

Также можно управлять скоростью:

anim.play(2);   // ускорение
anim.play(-1);  // обратная анимация

Минимальный полный пример

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

<svg id="my-svg" viewBox="0 0 200 200">
  <path d="M10 10 L190 10 L190 190 L10 190 Z"
        stroke="black"
        fill="none"
        stroke-width="2"/>
</svg>

<script>
  new Vivus('my-svg', {
    type: 'oneByOne',
    duration: 150
  });
</script>

</body>
</html>

Распространённые ошибки

Отсутствие stroke

<path fill="black" />

Vivus не анимирует заливку — только линии.

Сложные SVG из редакторов

SVG из Figma, Illustrator или Inkscape часто содержат:

  • группы (<g>)
  • трансформации
  • лишние атрибуты

Рекомендуется оптимизировать SVG:

  • использовать инструменты вроде SVGO
  • преобразовывать фигуры в path
  • удалять лишние элементы

Отсутствие viewBox

Без viewBox масштабирование и анимация могут работать некорректно.

Практические рекомендации

  • использовать простые и чистые SVG
  • избегать слишком большого количества путей
  • контролировать длительность — слишком длинная анимация ухудшает UX
  • тестировать в разных браузерах
  • комбинировать с CSS-анимациями для более сложных эффектов

Расширение базовой анимации

После освоения простейшего примера возможно:

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

Базовый принцип остаётся неизменным: Vivus управляет отрисовкой линий SVG, превращая статичную графику в динамическую анимацию.

Оглавление