В Vivus управление паузами и задержками между элементами SVG строится вокруг идеи последовательного или параллельного прорисовывания путей (paths), где каждый контур может иметь собственное временное поведение в рамках общего таймлайна анимации.
Анимация SVG в Vivus основана на последовательной обработке списка
путей внутри элемента <svg>. Каждый путь
рассматривается как отдельная единица анимации, а итоговое поведение
определяется стратегией распределения времени:
Ключевой параметр, влияющий на всю временную структуру, — общая
продолжительность анимации duration. Он задаёт масштаб
времени, в рамках которого распределяются все сегменты.
T_{segment} =
где распределение времени зависит от числа элементов N,
но фактическая модель зависит от выбранного режима анимации.
Режим oneByOne создаёт эффект строгой очередности, где
каждый следующий путь начинает анимацию только после завершения
предыдущего.
Внутренне это реализуется как цепочка смещённых временных интервалов:
t_i = i
Каждый элемент получает собственное стартовое смещение, формируя эффект “рисования по порядку”.
Особенности поведения:
При увеличении количества путей задержки между элементами становятся более заметными, поскольку каждый сегмент полностью завершает свой цикл до начала следующего.
Режим async устраняет межэлементные задержки. Все пути
стартуют одновременно, но могут иметь различную длительность в
зависимости от сложности или длины контура.
В этом случае временная модель стремится к:
t_0 = t_1 = t_2 = = 0
Это создаёт эффект одновременного проявления всех элементов SVG без последовательной логики.
Такой подход используется в случаях, когда важна синхронность общей формы, а не акцент на отдельных деталях.
Режим delayed представляет собой промежуточную модель
между последовательным и параллельным воспроизведением. Каждый путь
получает смещённый старт, но задержки распределяются не строго линейно,
а с учётом общей длительности и внутреннего алгоритма разбиения.
Общая идея выражается как:
t_i = f(i, T, N)
где функция распределяет задержки таким образом, чтобы сохранить визуальную ритмику без строгой последовательности.
Этот режим часто используется для SVG с большим количеством элементов, где необходим баланс между динамикой и читаемостью анимации.
Параметр duration влияет не только на скорость, но и на
восприятие пауз между элементами. При фиксированном количестве путей
увеличение длительности приводит к увеличению интервалов между стартами
анимации.
Если рассматривать плотность запуска элементов, она обратно пропорциональна общей длительности:
=
При высокой плотности элементы начинают визуально сливаться, при низкой — появляется выраженная дискретность движения.
Vivus позволяет управлять характером движения каждого пути через временные функции. Эти функции определяют не только скорость прорисовки, но и характер распределения задержек внутри одного сегмента.
Внутри одного SVG возможна вариативность:
Временная функция влияет на распределение прогресса:
p(t) = f()
где p(t) определяет текущую степень отрисовки пути в
момент времени t.
При более детальной настройке возможно введение искусственных смещений старта, формирующих дополнительный слой задержек. Это используется для создания сложных визуальных ритмов внутри одного SVG.
Модель смещения можно описать как добавление константы к базовому времени старта:
t’_i = t_i + _i
где Δi задаёт индивидуальную задержку для каждого
элемента.
Такая схема позволяет создавать асимметричные анимации, в которых элементы не подчиняются единому ритму, но сохраняют общую синхронизацию.
Количество элементов напрямую влияет на плотность временной структуры. При увеличении числа путей интервал между их стартами уменьшается, если общая длительность фиксирована.
Формально это выражается через зависимость шага времени от количества элементов:
t =
При больших значениях N задержки становятся
минимальными, что приводит к визуальному эффекту непрерывного рисования
без выраженных пауз.
В сложных SVG-анимациях часто используется сочетание разных режимов Vivus внутри одного контейнера. Часть путей может быть синхронной, часть — последовательной, а часть — с кастомными задержками.
Такое смешение создаёт многослойную временную архитектуру, в которой:
В результате временная структура перестаёт быть линейной и превращается в распределённую систему, где каждый элемент имеет собственное место в общей временной сетке.