Режим oneByOne

Режим oneByOne в Vivus задаёт последовательную отрисовку SVG-путей, при которой каждый контур анимируется строго после завершения предыдущего. Механика основана на поочерёдном изменении свойств stroke-dashoffset для каждого пути внутри SVG-документа, создавая эффект «рисования линии» с контролируемым порядком воспроизведения.

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

SVG-графика в Vivus разбивается на набор отдельных путей (<path>, <line>, <polyline>, <polygon>). Для каждого элемента вычисляется длина контура, после чего применяется техника обводки через:

  • stroke-dasharray — задаёт длину штриха и пробела
  • stroke-dashoffset — смещает видимую часть линии

При режиме oneByOne каждый путь получает собственный временной интервал анимации. После завершения текущего сегмента происходит переход к следующему элементу в последовательности DOM.

Поведение режима oneByOne

Ключевая особенность заключается в строгой очередности:

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

Порядок напрямую зависит от структуры SVG-кода. Группы <g> не изменяют последовательность сами по себе, но влияют на иерархию обхода элементов.

Базовая конфигурация Vivus с oneByOne

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

Параметр type: 'oneByOne' определяет режим последовательной отрисовки. Значение duration задаёт общую продолжительность анимации, которая распределяется между всеми путями SVG.

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

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

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

При увеличении количества элементов SVG уменьшается среднее время отрисовки каждого сегмента, если не компенсировать это увеличением общей длительности.

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

Последовательность определяется порядком обхода DOM:

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

Анимация выполнится строго по порядку объявления путей.

При наличии групп:

<svg id="svg-element">
  <g>
    <path d="M0 0 L50 50" />
    <path d="M50 50 L100 0" />
  </g>
  <path d="M0 100 L100 100" />
</svg>

сначала будут обработаны пути внутри <g>, затем внешний путь.

Контроль порядка анимации

Изменение последовательности достигается только через модификацию структуры SVG:

  • перестановка <path> внутри документа
  • разделение логических блоков на группы
  • упрощение вложенности группировки

Vivus не предоставляет встроенного механизма сортировки путей по атрибутам, поэтому DOM-структура является единственным источником порядка.

Отличие от других режимов Vivus

Библиотека поддерживает несколько типов анимации:

  • delayed — элементы запускаются с задержкой, но перекрываются по времени
  • async — все пути анимируются независимо
  • oneByOne — строгая последовательная цепочка

В режиме oneByOne отсутствует пересечение анимаций, что снижает визуальную динамику, но повышает читаемость сложных форм.

Пример сложного SVG с большим количеством путей

<svg id="svg-element" viewBox="0 0 200 200">
  <path d="M10 10 H 190" />
  <path d="M190 10 V 190" />
  <path d="M190 190 H 10" />
  <path d="M10 190 V 10" />
  <path d="M50 50 L150 150" />
</svg>

В режиме oneByOne будет создана цепочка из пяти последовательных анимаций. Каждый контур завершает своё движение перед стартом следующего.

Управление длительностью и плотностью анимации

При большом количестве элементов важно учитывать влияние параметра duration.

Условная зависимость:

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

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

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

Поведение при сложных контурах

Пути с большой длиной обводки могут визуально занимать больше времени даже при равномерном распределении длительности. Это создаёт эффект асимметрии:

  • короткие сегменты завершаются быстро
  • длинные кривые растягиваются во времени

При проектировании SVG это влияет на восприятие ритма анимации.

Влияние группировки элементов

Группы <g> не изменяют принцип oneByOne, но влияют на порядок обхода:

  • сначала обрабатываются все дочерние пути группы
  • затем происходит переход к следующему узлу DOM

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

Повторный запуск анимации

Экземпляр Vivus может быть перезапущен:

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

anim.reset().play();

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

Использование callback-функций

Vivus поддерживает события завершения анимации:

new Vivus('svg-element', {
  type: 'oneByOne',
  duration: 200,
  onReady: function () {
    console.log('SVG подготовлен');
  }
}, function () {
  console.log('Анимация завершена');
});

Callback после завершения всей цепочки срабатывает только после последнего пути.

Оптимизация SVG для oneByOne

Эффективность режима зависит от структуры графики:

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

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

Типичные сценарии применения

Последовательная отрисовка особенно эффективна в случаях:

  • логотипы с линейной структурой
  • схемы и диаграммы
  • технические иллюстрации
  • инфографика с логическим порядком построения

Строгая очередность подчёркивает структуру изображения и задаёт направление визуального повествования.

Поведение при изменении DOM после инициализации

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

Это означает, что структура фиксируется на момент запуска анимации и зависит от исходного состояния документа.

Оглавление