Атрибут data-delay

В библиотеке Vivus анимация SVG-элементов строится на последовательном изменении свойств обводки путей, чаще всего через манипуляции stroke-dasharray и stroke-dashoffset. При работе с множеством элементов SVG возникает необходимость управлять темпом появления каждого отдельного сегмента. Для этого используется механизм задержек, позволяющий выстраивать контролируемую очередь отрисовки.

Временная задержка определяет интервал между запуском анимации отдельных путей внутри одного SVG-документа или группы элементов. Это влияет не на длительность самой анимации, а на момент её старта относительно предыдущего элемента.

Механизм обработки очереди анимации

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

Задержка между шагами определяется значением, которое может быть задано как через JavaScript-конфигурацию, так и через HTML-атрибуты. В процессе работы библиотеки учитываются:

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

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

Атрибут data-delay и его назначение

Атрибут data-delay используется для управления временным интервалом между стартами анимации отдельных SVG-элементов.

Синтаксически значение задаётся прямо в разметке SVG:

<path d="..." data-delay="200"></path>

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

Основная задача атрибута — локальная корректировка временной сетки анимации без необходимости изменения глобальных настроек Vivus.

Единицы измерения и интерпретация значений

Значение data-delay всегда трактуется как числовой параметр в миллисекундах. Поддерживаются только целые и дробные числа, приводимые к числу при парсинге DOM-атрибутов.

Типовые значения:

  • 0 — отсутствие задержки
  • 100–300 — короткие интервалы, создающие плотную анимацию
  • 500+ — выраженная последовательность с заметной паузой между элементами

При некорректном значении применяется значение по умолчанию, определяемое конфигурацией Vivus или игнорирование атрибута.

Влияние на режимы анимации Vivus

Поведение data-delay зависит от выбранного режима анимации.

Последовательный режим (oneByOne)

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

Задержка формирует линейную временную шкалу:

  • элемент A → старт
  • пауза data-delay
  • элемент B → старт
  • пауза data-delay
  • элемент C → старт

Синхронный режим (sync)

В синхронном режиме все элементы начинают анимацию одновременно. Атрибут data-delay в этом случае либо игнорируется, либо оказывает минимальное влияние, так как отсутствует последовательная очередь запуска.

Отложенный режим (delayed)

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

Приоритет локальных и глобальных настроек

При одновременном использовании JavaScript-конфигурации и HTML-атрибутов действует система приоритетов:

  1. Значения, переданные через конструктор Vivus
  2. Атрибуты SVG (data-delay)
  3. Значения по умолчанию библиотеки

Таким образом, data-delay применяется как уровень локальной настройки, позволяющий переопределять поведение отдельных элементов без изменения глобальной логики.

Применение к различным SVG-элементам

Атрибут может применяться к любым элементам, поддерживаемым Vivus:

  • path
  • polyline
  • line
  • circle (при преобразовании в путь)
  • rect (при преобразовании в путь)

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

Комбинирование с другими data-атрибутами

Вместе с data-delay часто используются дополнительные параметры:

  • data-duration — длительность анимации элемента
  • data-start — момент начала анимации
  • data-iteration — повторяемость

Комбинация этих атрибутов формирует детализированное управление временной структурой SVG-анимации, где data-delay отвечает исключительно за смещение старта.

Поведение при плотной структуре SVG

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

Типичные особенности:

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

Оптимизационные аспекты

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

  • группировка элементов с одинаковым data-delay
  • сокращение количества уникальных значений задержек
  • использование кратных интервалов вместо произвольных чисел

Такая структура позволяет снизить количество переключений таймера внутри очереди исполнения.

Особенности парсинга в DOM

Vivus извлекает значение data-delay через стандартный DOM API. Атрибут считывается как строка и преобразуется в числовой формат.

Поведение при нестандартных значениях:

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

Типичные ошибки использования

В практической работе с атрибутом часто встречаются следующие некорректные сценарии:

  • использование секунд вместо миллисекунд
  • смешивание логики задержек и длительности анимации
  • применение к элементам вне SVG-пути
  • дублирование задержек на уровне JS и HTML без учёта приоритета

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

Оглавление