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

Работа конструктора библиотеки Vivus строится вокруг единственного объекта конфигурации, который определяет способ загрузки SVG, тип прорисовки путей, временные характеристики и поведение анимации. Ниже приведён полный разбор всех параметров, доступных в момент создания экземпляра.

id Идентификатор SVG-элемента в DOM, к которому будет применена анимация. Используется, когда SVG уже присутствует на странице.

file Путь к внешнему SVG-файлу. Если указан, Vivus загружает изображение через XMLHttpRequest и подставляет его в DOM.

selfDestroy Булев параметр, определяющий удаление экземпляра после завершения анимации.

  • true — объект очищается из памяти после окончания
  • false — сохраняется для повторного использования

Тип анимации отрисовки

type Определяет стратегию прорисовки SVG-путей.

Поддерживаемые значения:

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

Этот параметр определяет базовую визуальную механику работы Vivus.

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

start Определяет момент начала анимации.

  • inViewport — запуск при появлении SVG в области видимости (IntersectionObserver / scroll-based logic)
  • manual — запуск только через программный вызов (play())
  • autostart — запуск сразу после инициализации

Временные параметры

duration Общая длительность анимации в условных единицах времени. Не является миллисекундами напрямую, а используется как коэффициент распределения времени между путями.

delay Задержка между началом анимации отдельных путей. Особенно значима при type: delayed.

Геометрия и поведение линий

dashGap Определяет промежуток между сегментами пунктирной линии, используемой для имитации рисования. Чем больше значение, тем более «рваной» может выглядеть линия в процессе анимации.

Функции тайминга (easing)

pathTimingFunction Функция изменения скорости прорисовки каждого отдельного пути.

Принимает функцию вида:

  • function(t) { return t; } (линейная)
  • любая easing-функция, возвращающая значение от 0 до 1

Используется для управления динамикой рисования каждого контура внутри Vivus.

animTimingFunction Функция общей временной интерполяции всей анимации.

В отличие от pathTimingFunction, влияет на глобальное распределение времени между всеми путями.

Поведение отрисовки и производительность

forceRender Булев параметр, принудительно заставляющий браузер перерисовывать SVG на каждом шаге анимации.

  • true — повышенная точность, но выше нагрузка
  • false — оптимизированный режим (рекомендуется по умолчанию)

Загрузка и инициализация

onReady Callback-функция, вызываемая после успешной загрузки SVG (особенно актуально при использовании file).

Сигнатура:

  • onReady(vivusInstance) — возвращает экземпляр Vivus после инициализации DOM-структуры

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

Внутренние механизмы управления путями

Хотя не всегда явно документированы как публичные, в реальных реализациях используются дополнительные параметры, влияющие на расчёт анимации:

dashArray Массив значений stroke-dasharray, вычисляемый автоматически на основе длины пути. Может переопределяться для кастомных эффектов.

dashOffset Начальное смещение штриха. Используется для имитации эффекта «рисования с нуля».

Контроль сценариев (type: scenario)

При использовании режима scenario активируется механизм, при котором каждый SVG-путь может содержать атрибут:

  • data-vivus="start:X;duration:Y"

Это позволяет задавать локальные параметры анимации внутри самого SVG-документа, что полностью переносит контроль с JavaScript на разметку.

Комбинации параметров и поведение системы

Поведение Vivus формируется не отдельными параметрами, а их взаимодействием:

  • type + start определяют момент и стратегию запуска
  • duration + delay формируют временную структуру
  • pathTimingFunction + animTimingFunction задают кривые скорости
  • file + onReady определяют способ загрузки и точку входа в инициализацию
  • selfDestroy влияет на жизненный цикл экземпляра

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

Оглавление