События жизненного цикла анимации

Жизненный цикл анимации в mo.js строится вокруг последовательности состояний, через которые проходит каждый tween или shape, начиная от инициализации параметров и заканчивая завершением или прерыванием выполнения. Управление этими состояниями реализовано через систему callback-функций и внутренний тайминг библиотеки, основанный на requestAnimationFrame, что обеспечивает синхронизацию с рендерингом браузера и предсказуемое поведение анимаций.

Каждая анимация в mo.js проходит через несколько фундаментальных фаз:

Инициализация На этом этапе создаётся экземпляр анимации (например, mojs.Tween или mojs.Shape). Определяются начальные параметры: длительность, задержка, кривые easing, свойства трансформации и визуальные атрибуты. Анимация ещё не запущена, но уже зарегистрирована в системе.

Ожидание старта Если задана задержка (delay), анимация находится в состоянии ожидания. В этот период она не влияет на DOM и не инициирует обновления свойств, но уже учитывается в общем таймлайне.

Активное выполнение Основная фаза, в которой происходит интерполяция значений между начальным и конечным состоянием. Именно здесь вызываются onUpdate и выполняется перерасчёт всех анимируемых параметров.

Завершение После достижения 100% прогресса анимация переходит в состояние завершения, где вызывается onComplete. В зависимости от настроек возможно повторение или фиксация финального состояния.

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

События и callback-и

Система жизненного цикла в mo.js основана на событийных callback-функциях, привязанных к конкретным этапам выполнения анимации. Эти callback-и позволяют точно контролировать поведение анимации без необходимости вмешиваться в её внутренний механизм.

Основные события:

• onStart
• onUpdate
• onComplete
• onRepeat
• onPause
• onResume
• onStop

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

onStart

Событие onStart вызывается в момент фактического начала анимации, когда завершается задержка и первый кадр начинает изменять свойства объектов.

Характерные особенности:

• вызывается один раз за цикл выполнения
• срабатывает перед первым onUpdate
• используется для инициализации внешних эффектов (например, подготовки сцены или сброса промежуточных значений)

Важная деталь заключается в том, что onStart может вызываться повторно при включённом цикле повторений (repeat), что делает его частью повторяемого жизненного цикла.

onUpdate

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

Внутри onUpdate доступен прогресс анимации, обычно нормализованный в диапазоне от 0 до 1. На основании этого значения mo.js интерполирует все свойства.

Ключевые характеристики:

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

Типичный поток внутри onUpdate включает:

• вычисление текущего прогресса
• применение easing-функции
• обновление трансформаций (translate, scale, rotate)
• изменение визуальных параметров (opacity, stroke, radius и т.д.)

onComplete

Событие onComplete фиксирует момент завершения одного полного цикла анимации. Оно вызывается, когда прогресс достигает конечного значения (обычно 1), и все вычисления интерполяции завершены.

Особенности поведения:

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

Внутри системы mo.js onComplete тесно связан с логикой таймлайна: завершение одного tween может инициировать следующий элемент цепочки.

onRepeat

onRepeat активируется при переходе анимации на новый цикл повторения. Это событие возникает только при установленном параметре repeat > 0.

Поведение:

• вызывается перед новым запуском анимации
• сопровождается сбросом внутреннего прогресса
• сохраняет параметры tween, но обновляет временные счётчики

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

onPause / onResume / onStop

onPause

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

Основные особенности:

• сохраняется текущее значение прогресса
• приостанавливается requestAnimationFrame-цикл
• может быть возобновлено через play

onResume

Активируется при возобновлении анимации после паузы. Система продолжает вычисление с последнего сохранённого состояния.

Особенности:

• восстановление тайминга
• продолжение интерполяции без сброса прогресса
• повторный вход в update-цикл

onStop

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

Характерные черты:

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

Работа с Timeline

Timeline в mo.js представляет собой контейнер, объединяющий несколько анимаций и синхронизирующий их жизненные циклы. Каждый элемент внутри timeline имеет собственные события, но также подчиняется общему времени выполнения.

В рамках timeline жизненный цикл приобретает дополнительный уровень сложности:

• глобальный старт timeline запускает все вложенные tween-и
• события отдельных анимаций могут пересекаться по времени
• onComplete отдельных элементов не означает завершение всей композиции
• завершение timeline определяется последним активным элементом

Timeline также распространяет некоторые события на уровень выше, позволяя отслеживать общее состояние композиции.

Особенности синхронизации

Система жизненного цикла в mo.js синхронизирована с высокоточным таймером браузера. Использование requestAnimationFrame обеспечивает:

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

Дополнительно учитываются:

• задержки (delay) как часть общего времени
• относительные смещения между tween-ами
• кривая easing как функция преобразования прогресса

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

Практика: композиция событий

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

Сценарий последовательной анимации:

• onStart первой анимации инициирует подготовку сцены
• onUpdate управляет промежуточными визуальными эффектами
• onComplete запускает следующую анимацию в цепочке
• onRepeat используется для циклического возврата состояния

При построении сложных интерфейсных эффектов жизненный цикл становится основным механизмом координации:

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

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