Режим delayed

Принцип работы режима delayed

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

Основная идея заключается в создании эффекта «рисования по очереди», где каждый контур SVG появляется строго после завершения или почти завершения предыдущего, формируя визуально упорядоченный поток анимации.

Механика отрисовки SVG в режиме delayed

SVG-документ внутри Vivus разбивается на набор независимых графических сегментов — путей (path, line, polyline, circle и другие элементы, преобразуемые в path).

В режиме delayed для каждого такого сегмента вычисляется:

  • длина пути (getTotalLength)
  • время начала анимации
  • скорость отрисовки

Далее создаётся временная шкала, где каждый элемент получает собственный стартовый offset.

Ключевая характеристика:

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

Инициализация Vivus с режимом delayed

Базовая конфигурация:

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

Параметры:

  • type: 'delayed' — включает последовательную анимацию с задержками
  • duration — общее время анимации (распределяется между элементами)
  • delay — интервал между стартами анимации каждого следующего path

Распределение времени анимации

В режиме delayed Vivus решает задачу распределения времени следующим образом:

  1. Берётся общее количество элементов n
  2. Вычисляется общее доступное время T
  3. Для каждого элемента определяется стартовый момент:

[ t_i = i delay]

  1. Оставшееся время распределяется на анимацию каждого сегмента

Если задержка слишком велика относительно duration, возникает эффект «разрыва» анимации, когда часть элементов может не успеть завершиться в заданном временном окне.

Поведение при большом количестве path

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

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

Оптимизация обычно сводится к подбору баланса между duration и delay.

Влияние структуры SVG на результат

Порядок отрисовки строго соответствует порядку элементов в DOM-структуре SVG.

Пример:

<svg id="my-svg">
  <path d="M10 10 L100 10" />
  <path d="M100 10 L100 100" />
  <path d="M100 100 L10 100" />
</svg>

В режиме delayed последовательность будет строго линейной:

  1. верхняя линия
  2. правая линия
  3. нижняя линия

Изменение порядка в SVG напрямую влияет на визуальный сценарий анимации.

Настройка параметра delay

delay управляет интервалом запуска анимации каждого следующего элемента.

delay: 100

При увеличении значения:

  • усиливается эффект «рисования по частям»
  • возрастает общая длительность анимации
  • становится заметна структура SVG-композиции

При уменьшении:

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

Связь delay и duration

Внутренняя логика распределения времени основана на соотношении:

  • duration — общий бюджет времени
  • delay — фиксированная задержка между стартами

Если:

duration = 200
delay = 80

и количество элементов велико, возможна ситуация:

[ n delay > duration]

В этом случае Vivus перераспределяет временные интервалы, сокращая фактическую длительность анимации отдельных элементов.

Использование easing в delayed режиме

Хотя delayed в первую очередь определяет временную структуру старта анимаций, внутри каждого path применяется easing-функция (если задана).

Пример:

new Vivus('my-svg', {
  type: 'delayed',
  duration: 150,
  delay: 30,
  animTimingFunction: Vivus.EASE
});

Влияние easing:

  • изменяет скорость рисования каждого отдельного path
  • не влияет на порядок запуска элементов
  • усиливает визуальную динамику внутри каждого шага

Комбинация с кастомными коллбэками

Vivus позволяет отслеживать прогресс анимации, что особенно полезно в delayed режиме.

new Vivus('my-svg', {
  type: 'delayed',
  duration: 300,
  delay: 40,
  onReady: function () {
    console.log('SVG загружен');
  },
  onFrame: function (progress) {
    console.log(progress);
  }
});

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

  • onFrame вызывается с общей прогрессией всей последовательности
  • в delayed режиме прогресс растёт ступенчато
  • возможны «плато» между стартами отдельных элементов

Влияние оптимизации SVG

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

  • избыточные path увеличивают задержки
  • группы (<g>) могут влиять на порядок обхода
  • объединение контуров уменьшает количество шагов

Оптимизированный SVG:

  • быстрее интерпретируется
  • даёт более предсказуемую анимацию
  • снижает визуальные артефакты задержек

Типичные особенности поведения

В режиме delayed наблюдаются характерные эффекты:

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

Использование в интерфейсной графике

Режим delayed часто применяется для:

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

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

Оглавление