Библиотека Vivus построена вокруг идеи поэтапного прорисовывания SVG-путей, где каждый кадр анимации может быть перехвачен через колбэки. Это позволяет не просто запускать визуальный эффект, а выстраивать управляемые сценарии выполнения нескольких анимаций подряд или параллельно.
Внутри экземпляра Vivus ключевую роль играют три точки расширения:
onReady — вызывается после инициализации, до старта
отрисовкиonStart — срабатывает в момент начала анимацииonEnd — вызывается после завершения прорисовки всех
путейДополнительно в некоторых реализациях используется callback,
передаваемый последним аргументом конструктора, но основная логика
цепочек строится через onEnd.
Событие onReady используется как момент, когда SVG уже
разобран, пути подготовлены, но анимация ещё не началась. Это делает его
удобным для связывания нескольких экземпляров Vivus в
последовательность.
Типичная модель:
onReady регистрируется запуск следующегоТакой подход позволяет избегать ручных таймеров и синхронизации через
setTimeout, делая поток выполнения детерминированным
относительно завершения предыдущего этапа.
Основной механизм цепочек строится на onEnd, поскольку
именно он гарантирует завершение текущей прорисовки.
Логика последовательности:
onEndПростейшая структура:
Такой подход масштабируется до произвольного количества шагов, образуя линейную или ветвящуюся цепочку.
При построении сложных сцен используется вложенная инициализация. Каждый следующий Vivus создаётся внутри колбэка предыдущего, что обеспечивает строгую последовательность без гонок состояния.
Особенность подхода заключается в том, что каждый экземпляр живёт коротким циклом:
Это снижает нагрузку на DOM и упрощает управление памятью при большом количестве SVG.
Когда требуется не последовательность, а синхронный запуск нескольких SVG, колбэки используются иначе.
Варианты координации:
onReadyВ этом случае onStart становится полезным для фиксации
момента начала группы анимаций, а onEnd — для подсчёта
завершённых экземпляров.
Так формируется барьер синхронизации без внешних библиотек.
При усложнении сценариев появляется необходимость хранить состояние цепочки:
Колбэки Vivus становятся точками обновления этого состояния. Особенно часто используется схема:
onEnd увеличивает счётчикЭто превращает колбэки в основу конечного автомата.
Для масштабируемых проектов вводится очередь, где каждый элемент описывает SVG-анимацию.
Структура очереди:
Обработка:
onEnd вызывает обработчик очередиТакой подход убирает жёсткие зависимости между экземплярами и делает систему расширяемой.
Хотя Vivus изначально ориентирован на колбэки, его поведение легко оборачивается в Promise для построения современных цепочек.
Логика обёртки:
resolve вызывается в onEndreject может использоваться при прерывании
анимации.then()Это позволяет формировать линейные цепочки:
Такой стиль упрощает композицию сложных сценариев без глубокой вложенности.
При работе с колбэками важно учитывать возможность прерывания:
onEndЧасто вводится флаг активности цепочки, который проверяется в каждом колбэке. При его изменении дальнейшие вызовы игнорируются, что предотвращает каскадный запуск после остановки.
Перезапуск реализуется через сброс состояния и повторную инициализацию первого элемента цепочки.
Колбэки Vivus активно используются в интерфейсных сценариях, где SVG выступают как элементы повествования:
Типовой паттерн:
onStart запускает вспомогательные эффекты (например,
подсветку)onEnd активирует следующий визуальный блокТак создаётся ощущение управляемого потока визуальных событий.
Циклические сценарии строятся через onEnd, где повторный
запуск происходит с модификацией параметров:
Такой подход позволяет формировать бесконечные или ограниченные циклы без внешнего таймера, полностью внутри колбэков Vivus.
В сложных сценах одновременно используются несколько уровней:
Иерархия позволяет строить многоступенчатые анимационные системы, где SVG становятся узлами графа выполнения, а колбэки — рёбрами переходов между состояниями.