Режим sync

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

SVG-изображение в Vivus разбивается на отдельные пути (<path>), каждый из которых может быть анимирован за счёт изменения параметров stroke-dasharray и stroke-dashoffset. В синхронном режиме все пути получают одинаковую временную шкалу анимации, независимо от их положения в DOM или последовательности описания.

Ключевая особенность заключается в том, что общее время анимации распределяется одновременно на все элементы, а не делится между ними. Это приводит к тому, что визуально изображение «проявляется» целиком, без эффекта очередности.

Конфигурация типа анимации

В библиотеке Vivus выбор режима осуществляется через параметр type при инициализации экземпляра:

new Vivus('svg-element', {
    type: 'sync',
    duration: 200,
    start: 'autostart',
    dashGap: 2,
    forceRender: false
});

Параметр type: 'sync' активирует синхронную стратегию отрисовки. Остальные параметры влияют на скорость, запуск и особенности рендеринга, но не изменяют принцип одновременного воспроизведения.

Механика распределения времени

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

Процесс включает следующие этапы:

  • анализ всех path внутри SVG
  • вычисление общей длительности анимации (duration)
  • применение одинаковой временной функции ко всем элементам
  • синхронное изменение stroke-dashoffset для всех путей

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

Поведение сложных SVG-композиций

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

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

Особенно это заметно в:

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

Сравнение с другими стратегиями отрисовки

Vivus поддерживает несколько типов анимации, каждый из которых задаёт различную логику обработки путей.

Параллельная модель

Синхронный режим следует отличать от последовательного (oneByOne), где элементы анимируются друг за другом. В отличие от него, здесь отсутствует очередь выполнения.

Гибридные эффекты

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

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

Параметр duration в синхронном режиме определяет общее время анимации всей SVG-композиции.

new Vivus('icon', {
    type: 'sync',
    duration: 120
});

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

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

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

Синхронный режим чувствителен к архитектуре SVG-файла. Основные факторы, влияющие на итоговую визуализацию:

  • количество путей
  • длина и сложность контуров
  • наличие групп (<g>)
  • вложенность элементов

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

Оптимизация отображения

Для стабильной работы синхронного режима часто применяется предварительная подготовка SVG:

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

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

Поведение при изменении DOM

Vivus пересчитывает параметры анимации при инициализации. Если SVG изменяется динамически после создания экземпляра, требуется повторный запуск или пересоздание объекта. В синхронном режиме это особенно важно, так как перерасчёт длины путей влияет на согласованность анимации.

Применение в интерфейсных решениях

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

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

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

Оглавление