getStatus

Архитектура состояния анимации в Vivus

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

Система состояния обычно включает:

  • начальное состояние до запуска анимации;
  • активную фазу отрисовки;
  • завершённое состояние;
  • паузу и промежуточные переходы.

Каждый кадр анимации пересчитывает параметры stroke-dashoffset и stroke-dasharray, формируя иллюзию рисования линии в реальном времени.

Назначение getStatus в контексте управления анимацией

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

Типовой набор возвращаемых данных включает:

  • текущее состояние анимации (запуск, выполнение, завершение);
  • числовой прогресс (в процентах или нормализованном диапазоне 0–1);
  • внутренние флаги паузы или ожидания;
  • завершённость всех SVG-путей.

Структура состояния обычно абстрагирована от DOM и представляет собой вычисляемую модель, обновляемую в цикле requestAnimationFrame.

Логика вычисления статуса

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

  • суммарная длина всех путей задаёт базовую величину;
  • текущая отрисованная длина определяет прогресс;
  • отношение этих значений формирует нормализованное состояние.

P =

где:

  • ( L_{drawn} ) — уже отрисованная длина контуров,
  • ( L_{total} ) — суммарная длина всех SVG-путей.

Полученное значение используется как основа для getStatus, позволяя получить непрерывное представление прогресса.

Типовые состояния, возвращаемые getStatus

Поведение метода может быть интерпретировано через конечный автомат состояний:

  • start — анимация не запущена, все пути находятся в исходном положении;
  • progress — идёт процесс отрисовки, значение прогресса изменяется;
  • end — все пути полностью отрисованы;
  • pause — активная анимация приостановлена.

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

Пример внутренней структуры состояния

При обращении к getStatus возвращаемый объект может быть представлен следующим образом:

{
  isAnimating: true,
  isPaused: false,
  progress: 0.63,
  totalLength: 842.5,
  currentLength: 531.8,
  status: "progress"
}

Каждое поле связано с отдельным аспектом анимационного движка:

  • isAnimating отражает активность цикла обновления;
  • progress показывает нормализованное выполнение;
  • totalLength и currentLength обеспечивают метрическую точность;
  • status агрегирует состояние в человекочитаемую форму.

Связь getStatus с системой рендера SVG

SVG-рендеринг в Vivus основан на манипуляции свойствами stroke-dasharray и stroke-dashoffset. Статус анимации напрямую зависит от того, насколько смещён текущий offset относительно полной длины контура.

При каждом обновлении кадра:

  1. вычисляется шаг анимации;
  2. обновляется offset каждого пути;
  3. пересчитывается общий прогресс;
  4. обновляется состояние, доступное через getStatus.

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

Использование статуса в механизме синхронизации

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

Общая логика:

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

P_{global} = _{i=1}^{n} P_i

где:

  • ( P_i ) — прогресс отдельного SVG-анимационного экземпляра,
  • ( n ) — количество активных экземпляров.

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

Поведение getStatus при завершённой анимации

После завершения отрисовки все внутренние таймеры Vivus прекращают обновление состояния. В этот момент:

  • progress фиксируется на значении 1;
  • isAnimating принимает значение false;
  • status переключается в финальное состояние;
  • дальнейшие вызовы getStatus возвращают стабильный результат без изменений.

Особенность реализации заключается в отсутствии перерисовок после достижения финального состояния, что снижает нагрузку на requestAnimationFrame.

Особенности работы в режимах delayed и async

Vivus поддерживает различные режимы отрисовки SVG:

  • синхронный (все пути одновременно);
  • последовательный (поочерёдная отрисовка);
  • с задержкой между элементами.

В этих режимах getStatus отражает не только глобальный прогресс, но и распределение по элементам:

  • активный индекс пути;
  • локальный прогресс текущего сегмента;
  • общий прогресс сцены.

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

Интеграция getStatus с пользовательским циклом обновления

Встроенный цикл Vivus опирается на requestAnimationFrame, однако внешний код может использовать getStatus для построения собственной логики синхронизации:

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

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

Влияние длины SVG-путей на точность статуса

Точность getStatus зависит от корректности вычисления длины каждого пути. SVG-геометрия может содержать:

  • кривые Безье;
  • сложные составные пути;
  • трансформации координат.

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

Оглавление