Start и pathTimingFunction

В Vivus управление началом анимации задаётся через параметр start, который определяет момент запуска отрисовки SVG-путей. Библиотека работает по принципу поэтапного прорисовывания stroke-пути, и момент старта влияет на восприятие всей анимации, особенно в интерфейсах, где SVG является частью интерактивного опыта.

Основные режимы start:

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

Каждый режим влияет не только на поведение, но и на архитектуру взаимодействия с DOM и событийной моделью.

inViewport

Режим inViewport использует наблюдение за положением элемента относительно окна просмотра. Внутри реализуется механизм, схожий с IntersectionObserver, либо fallback через scroll-обработчики в более старых реализациях.

Основной смысл — отложенный запуск анимации до момента, когда пользователь действительно может её увидеть.

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

Поведение:

  • анимация не стартует при загрузке страницы
  • отслеживается появление элемента в viewport
  • запуск происходит один раз при достижении порога видимости

Особенности применения:

  • снижает нагрузку на страницу при большом количестве SVG
  • синхронизируется с ленивой загрузкой контента
  • требует корректной верстки (SVG должен иметь реальную высоту в layout)

autostart

Режим autostart запускает анимацию сразу после инициализации экземпляра Vivus. Это поведение используется в случаях, когда SVG является частью первичного интерфейсного состояния.

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

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

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

Поведение строго линейное: создание объекта → вычисление путей → запуск отрисовки.

manual

Режим manual отключает автоматический запуск полностью. Управление анимацией переходит к публичному API экземпляра.

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

anim.play();

Дополнительные методы управления:

  • play() — запуск анимации
  • stop() — остановка текущего прогресса
  • reset() — возврат к исходному состоянию
  • finish() — мгновенное завершение анимации

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

pathTimingFunction

Параметр pathTimingFunction определяет распределение времени анимации между отдельными SVG-путями. Он управляет тем, как именно прогресс анимации распределяется по элементам внутри SVG.

Внутренне Vivus разбивает SVG на набор path-элементов и применяет функцию распределения времени к каждому из них.

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

linear

Равномерное распределение времени между всеми путями. Каждый сегмент получает одинаковую долю длительности.

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

Характер поведения:

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

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

oneByOne

Последовательная анимация путей. Каждый следующий path начинается после завершения предыдущего.

new Vivus('svg-element', {
  type: 'oneByOne',
  duration: 200,
  pathTimingFunction: 'oneByOne'
});

Характеристика модели:

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

Особенность заключается в линейной зависимости от количества элементов: увеличение числа path напрямую увеличивает общую длительность восприятия анимации.

delayed

Распределение с фиксированной задержкой между элементами. Каждый path начинает анимацию с одинаковым offset относительно предыдущего.

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

Механика:

  • каждый следующий path стартует через фиксированный интервал
  • возможны перекрытия анимаций
  • создаётся эффект «волны»

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

  • более динамичное восприятие по сравнению с oneByOne
  • частичное наложение отрисовки
  • подходит для сложных логотипов и декоративных элементов

sync

Синхронная анимация всех путей. Все элементы начинают и заканчивают анимацию одновременно.

new Vivus('svg-element', {
  type: 'sync',
  duration: 200,
  pathTimingFunction: 'sync'
});

Поведение:

  • все path получают одинаковый временной диапазон
  • отсутствует внутренняя последовательность
  • максимальная параллелизация анимации

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

пользовательская функция timing

Допускается передача функции, возвращающей коэффициент распределения времени для каждого path.

new Vivus('svg-element', {
  type: 'delayed',
  duration: 200,
  pathTimingFunction: function (i, count) {
    return i / count;
  }
});

Параметры функции:

  • i — индекс текущего path
  • count — общее количество path

Возвращаемое значение интерпретируется как относительное положение элемента в общей временной шкале.

Возможные стратегии:

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

Пример экспоненциального распределения:

pathTimingFunction: function (i, count) {
  return Math.pow(i / count, 2);
}

Взаимодействие Start и pathTimingFunction

Комбинация start и pathTimingFunction формирует базовую модель поведения анимации.

  • start определяет момент запуска
  • pathTimingFunction определяет структуру временного распределения внутри запуска

При start: manual timing-функция может быть использована для построения сложных сценариев, где внешний код управляет моментом начала, а внутренняя логика определяет форму анимации.

При start: inViewport влияние timing-функции проявляется только после попадания элемента в область видимости, что делает её критичной для визуального восприятия первого появления SVG на экране.

При start: autostart вся логика timing применяется сразу после построения графа путей, без промежуточных состояний.

Оглавление