Базовый синтаксис и параметры

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

<script src="https://unpkg.com/vivus@latest/dist/vivus.min.js"></script>

Либо установка через пакетный менеджер:

npm install vivus

Импорт в модульной среде:

import Vivus from 'vivus';

Базовый синтаксис

Создание анимации происходит через конструктор Vivus, который принимает три аргумента:

new Vivus(element, options, callback);

Параметры:

  • element — DOM-элемент или его id, содержащий SVG
  • options — объект настроек анимации
  • callback — функция, вызываемая после завершения анимации

Пример:

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

Выбор элемента

Элемент можно передавать разными способами:

new Vivus('my-svg'); // по id
new Vivus(document.getElementById('my-svg')); // через DOM

SVG должен быть встроен в HTML, а не загружен через <img>.

Основные параметры options

type

Определяет способ анимации:

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

Пример:

type: 'oneByOne'

duration

Общая длительность анимации (в кадрах, не в миллисекундах):

duration: 200

Чем больше значение — тем медленнее рисование.

start

Определяет момент запуска:

  • inViewport — при попадании в область видимости
  • manual — запуск вручную
  • autostart — автоматически после загрузки
start: 'autostart'

delay

Задержка между элементами:

delay: 50

Используется в режимах delayed и oneByOne.

dashGap

Контролирует расстояние между штрихами:

dashGap: 10

Полезно для настройки визуального эффекта линии.

forceRender

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

forceRender: false

Увеличивает точность, но снижает производительность.

reverseStack

Меняет порядок анимации элементов:

reverseStack: true

Анимация начинается с последнего элемента SVG.

selfDestroy

Удаляет все служебные атрибуты после завершения:

selfDestroy: true

Упрощает DOM после анимации.

Callback-функция

Функция вызывается после завершения анимации:

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

Аргумент obj — экземпляр Vivus.

Управление анимацией

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

play(speed)

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

vivus.play();
vivus.play(2); // ускорение

stop()

Остановка:

vivus.stop();

reset()

Сброс состояния:

vivus.reset();

finish()

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

vivus.finish();

setFrameProgress(progress)

Установка прогресса вручную (от 0 до 1):

vivus.setFrameProgress(0.5);

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

<svg id="icon" viewBox="0 0 100 100">
  <path d="M10 10 L90 10 L90 90 L10 90 Z" />
</svg>

<script>
  var animation = new Vivus('icon', {
    type: 'delayed',
    duration: 150,
    start: 'autostart'
  }, function () {
    console.log('Готово');
  });
</script>

Особенности SVG для Vivus

  • Работают только контуры (<path>, <line>, <polyline>, <polygon>)
  • Заливки (fill) не анимируются
  • Толщина линии (stroke-width) влияет на визуальный результат
  • Каждый элемент анимируется отдельно

Работа с несколькими SVG

document.querySelectorAll('.svg').forEach(function(el) {
  new Vivus(el, { duration: 100 });
});

Оптимизация

  • Минимизировать количество узлов в SVG
  • Использовать oneByOne для контролируемой нагрузки
  • Отключать forceRender, если нет необходимости

Ошибки и ограничения

  • SVG через <img> не поддерживается
  • Анимация не работает без stroke
  • Сложные SVG могут замедлять выполнение
  • Не все браузеры одинаково обрабатывают рендеринг

Расширенные настройки через атрибуты SVG

В режиме scenario можно управлять анимацией через атрибуты:

<path data-start="0" data-duration="20" />
  • data-start — момент начала
  • data-duration — длительность

Это позволяет гибко контролировать порядок и тайминг без JS.

Инициализация с ручным запуском

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

// позже
vivus.play();

Контроль скорости

Скорость регулируется коэффициентом:

vivus.play(0.5); // медленно
vivus.play(3);   // быстро

Комбинирование параметров

new Vivus('logo', {
  type: 'oneByOne',
  duration: 300,
  delay: 20,
  dashGap: 5,
  reverseStack: true
});

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

Оглавление