Duration и timing

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

Основной принцип заключается в том, что вся анимация SVG рассматривается как последовательность дискретных шагов.

Ключевая особенность:

  • один шаг = один кадр анимации
  • стандартная частота — около 60 FPS (но фактическая зависит от устройства)
  • длительность задаётся не временем, а количеством итераций отрисовки

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

Параметр duration как основа тайминга

Центральный параметр управления скоростью — duration.

Он задаётся при создании экземпляра Vivus:

new Vivus('svg-id', {
  duration: 200
});

Смысл duration:

  • это общее количество кадров, за которое SVG должен быть полностью отрисован
  • чем больше значение, тем медленнее происходит анимация
  • чем меньше значение, тем быстрее завершается отрисовка

Влияние duration на восприятие анимации

Поведение можно интерпретировать так:

  • 50–100 кадров → быстрая прорисовка (резкие эффекты)
  • 150–300 кадров → стандартная плавная анимация
  • 400+ кадров → медленные, «пластичные» эффекты

Важно учитывать, что Vivus не нормализует время в секунды, поэтому визуальная длительность зависит от FPS.

Связь duration и реального времени

При условных 60 FPS можно приблизительно оценить длительность:

  • 60 кадров ≈ 1 секунда
  • 120 кадров ≈ 2 секунды
  • 300 кадров ≈ 5 секунд

Однако эта зависимость не фиксирована.

Факторы, влияющие на реальную длительность:

  • загрузка CPU
  • сложность SVG (количество path-элементов)
  • количество одновременно анимируемых объектов
  • производительность браузера

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

Vivus предлагает несколько стратегий распределения отрисовки путей SVG. Они напрямую влияют на то, как именно расходуется duration.

Одновременная отрисовка (sync)

При режиме синхронной анимации все элементы получают одинаковую долю времени.

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

Поведение тайминга:

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

Последовательная отрисовка (oneByOne)

Здесь время делится последовательно между элементами.

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

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

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

Если в SVG 10 элементов и duration = 200, то средняя длительность одного элемента ≈ 20 кадров.

Отложенная анимация (delayed)

Модель с распределёнными задержками:

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

Принцип:

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

Распределение времени между path-элементами

SVG документ состоит из множества контуров, и Vivus работает на уровне каждого path.

Внутренне происходит:

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

Ключевой момент: длинные пути не обязательно получают больше времени — это зависит от режима анимации.

Влияние длины пути на тайминг

Каждый path имеет свою геометрию, и Vivus использует длину линии для расчёта прогресса.

При равномерном распределении:

  • короткие пути выглядят быстрее завершёнными
  • длинные — растянутыми по времени
  • визуально создаётся эффект естественного рисования

Timing functions и поведение скорости

Vivus поддерживает функции временного распределения (easing), которые управляют тем, как прогресс изменяется внутри duration.

Пример:

new Vivus('svg-id', {
  duration: 200,
  animTimingFunction: Vivus.EASE
});

Линейная модель

При линейной функции:

  • прогресс изменяется равномерно
  • скорость постоянна на всём протяжении

Это базовая модель, часто используемая для технических иллюстраций.

Нелинейные функции

При использовании easing:

  • начало может быть медленным
  • середина ускоренной
  • конец замедленным

Это создаёт эффект естественного движения пера.

Path timing function

Отдельно может применяться функция к каждому path:

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

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

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

Хотя duration определяет общую длительность, момент старта контролируется отдельно.

new Vivus('svg-id', {
  duration: 200,
  start: 'autostart'
});

Возможные режимы запуска:

  • автоматический старт после загрузки
  • запуск по событию
  • ручной старт через API

Ручное управление таймингом

const anim = new Vivus('svg-id', {
  duration: 200,
  start: 'manual'
});

anim.play();

Это позволяет синхронизировать анимацию с:

  • прокруткой страницы
  • кликами
  • появлением блока в viewport

Синхронизация duration с внешними событиями

В сложных интерфейсах duration становится частью общей системы тайминга UI.

Типичные сценарии:

Синхронизация с загрузкой

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

Синхронизация с прокруткой

  • progress анимации зависит от scroll position
  • duration превращается в диапазон управления состоянием

Масштабирование длительности

Изменение duration влияет не только на скорость, но и на восприятие формы SVG.

Короткие значения:

  • подчёркивают резкие линии
  • создают эффект мгновенного появления

Длинные значения:

  • усиливают ощущение ручного рисования
  • делают контур более «живым»

Взаимодействие duration с количеством элементов SVG

Чем больше path в SVG:

  • тем сильнее дробится общая длительность
  • тем заметнее задержки между элементами
  • тем выше нагрузка на визуальную синхронизацию

При сложных иллюстрациях часто требуется увеличение duration для сохранения плавности.

Оптимизация тайминга

При работе с крупными SVG структурами важны следующие подходы:

  • увеличение duration при росте числа элементов
  • использование oneByOne для управляемого ритма
  • снижение FPS-зависимых эффектов при сложных сценах
  • избегание слишком малых значений duration

Поведение при нестабильном FPS

Так как Vivus привязан к кадрам:

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

Это важно учитывать при анимациях в тяжёлых интерфейсах или на мобильных устройствах.

Композиция нескольких анимаций

При одновременной работе нескольких экземпляров Vivus:

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

Часто применяется единый «мастер-таймер» для согласования поведения.

Оглавление