Атрибут data-duration

Атрибут data-duration управляет временем полной отрисовки SVG-анимации в библиотеке Vivus и определяет, за какой промежуток времени будет завершено прорисовывание всех путей (paths) внутри SVG-элемента. Значение задаётся в миллисекундах и напрямую влияет на скорость визуального «рисования» изображения.

Библиотека Vivus работает по принципу последовательной или синхронной анимации SVG-путей через манипуляцию свойствами stroke-dasharray и stroke-dashoffset. Каждый путь в SVG воспринимается как линия, длина которой известна заранее. Анимация заключается в постепенном уменьшении видимой части линии до полного её отображения.

Параметр data-duration задаёт глобальную временную рамку, в которую укладывается вся анимация SVG:

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

Синтаксис использования

Атрибут задаётся непосредственно в разметке SVG-элемента:

<svg id="logo" data-duration="200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
  <path d="M10 10 L190 10" />
  <path d="M190 10 L190 190" />
  <path d="M190 190 L10 190" />
  <path d="M10 190 L10 10" />
</svg>

В данном примере вся анимация замкнутого квадрата будет завершена за 200 миллисекунд.

Связь с параметром duration в JavaScript

При инициализации Vivus через JavaScript значение data-duration может быть переопределено:

new Vivus('logo', {
  duration: 1000
});

В таком случае логика приоритета следующая:

  • значение, переданное в конструкторе, имеет более высокий приоритет;
  • data-duration используется только при отсутствии явного параметра в JavaScript;
  • при одновременном наличии обоих источников конфигурации применяется JavaScript-значение.

Влияние на типы анимации

data-duration одинаково влияет на все режимы работы Vivus:

  • delayed — пути прорисовываются последовательно с распределением времени внутри общего duration;
  • sync — все пути анимируются одновременно, укладываясь в общий временной интервал;
  • oneByOne — каждый путь получает часть общего времени, что делает эффект более «ручной отрисовки».

В режиме oneByOne значение data-duration особенно критично, так как определяет длительность каждого сегмента анимации.

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

Vivus не делит data-duration равномерно по количеству путей. Вместо этого используется расчет на основе длины каждого path:

  • более длинные линии получают больше времени;
  • короткие сегменты анимируются быстрее;
  • итоговая сумма всех интервалов соответствует data-duration.

Таким образом создаётся визуально естественная скорость прорисовки сложных SVG-иллюстраций.

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

<svg id="icon" data-duration="1500" viewBox="0 0 100 100">
  <path d="M5 5 L95 5" />
  <path d="M95 5 L95 95" />
  <path d="M95 95 L5 95" />
  <path d="M5 95 L5 5" />
  <path d="M20 20 L80 80" />
</svg>

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

Поведение при нулевых и некорректных значениях

Если data-duration задан некорректно:

  • значение 0 приводит к мгновенному отображению SVG без анимации;
  • отрицательные значения интерпретируются как отсутствующие и заменяются значением по умолчанию;
  • нечисловые строки приводят к fallback на стандартный duration библиотеки.

Типичное значение по умолчанию в Vivus — 200.

Динамическое изменение duration

После инициализации Vivus изменение data-duration в DOM не влияет на уже созданную анимацию. Библиотека считывает значение только один раз при создании экземпляра.

Изменение скорости возможно только через пересоздание экземпляра:

var anim = new Vivus('logo', { duration: 1000 });

// повторная инициализация с новым временем
anim = new Vivus('logo', { duration: 300 });

Взаимодействие с CSS-анимациями

При комбинировании Vivus с CSS-переходами data-duration остаётся изолированным параметром, но может косвенно влиять на восприятие:

  • короткий duration делает CSS-анимации «поздними» относительно SVG;
  • длинный duration позволяет синхронизировать появление SVG с другими визуальными эффектами;
  • несогласованность временных шкал приводит к визуальному рассинхрону интерфейса.

Оптимизация значений duration

Выбор значения data-duration зависит от сложности SVG:

  • простые иконки: 200–600 мс;
  • логотипы средней сложности: 800–1500 мс;
  • сложные иллюстрации: 1500–3000 мс;
  • декоративные анимации: более 3000 мс.

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

Влияние на восприятие движения

Визуальная динамика, задаваемая data-duration, формирует характер анимации:

  • короткие значения создают эффект мгновенного появления;
  • средние значения имитируют ручную отрисовку;
  • длинные значения усиливают декоративный, демонстрационный характер SVG.

При этом сам механизм Vivus остаётся линейным и не использует easing-функции в классическом CSS-смысле, поэтому ощущение плавности достигается исключительно временным распределением.

Использование в сложных SVG-композициях

В многоуровневых SVG, содержащих группы <g> и десятки путей, data-duration становится ключевым параметром синхронизации:

  • единое значение обеспечивает согласованную анимацию всех слоёв;
  • разделение на несколько SVG с разными duration позволяет строить каскадные эффекты;
  • комбинирование с delay внутри конфигурации усиливает контроль над последовательностью.

При этом вся логика остаётся централизованной вокруг одного временного параметра, что упрощает управление сложными сценами.

Оглавление