В Lottie Web процесс создания анимации строится как последовательность этапов загрузки и подготовки данных. До того как анимация становится доступной для рендеринга, формируется и нормализуется конфигурация, на основе которой далее загружаются ресурсы и строится внутренняя модель анимации.
Событие config_ready относится к ранней стадии инициализации и фиксирует момент, когда конфигурация анимации полностью разобрана и приведена к внутреннему формату библиотеки, но данные анимации ещё не обязательно загружены или отрендерены.
Жизненный цикл Lottie Web условно включает несколько последовательных этапов:
lottie.loadAnimationconfig_readydata_readyDOMLoadedСобытие config_ready фиксирует момент, когда входной конфигурационный объект уже обработан библиотекой и преобразован в единый внутренний формат, пригодный для дальнейших шагов.
На этом этапе:
renderer, loop,
autoplayВ Lottie Web события подписываются через экземпляр анимации,
возвращаемый lottie.loadAnimation.
const animation = lottie.loadAnimation({
container: document.getElementById('anim'),
renderer: 'svg',
loop: true,
autoplay: false,
path: '/animations/data.json'
});
animation.addEventListener('config_ready', () => {
console.log('Конфигурация анимации подготовлена');
});Обработчик срабатывает один раз за жизненный цикл конкретного экземпляра анимации, поскольку конфигурация формируется однократно при инициализации.
На момент возникновения события структура анимации уже содержит:
При этом отсутствуют:
Событие config_ready часто путается с более поздними стадиями, однако различие принципиальное.
Фиксирует завершение обработки входного конфигурационного объекта.
Срабатывает после загрузки и парсинга JSON-анимации. На этом этапе доступна полная структура слоёв, ключевых кадров и свойств.
Актуально для SVG/HTML renderer. Указывает на завершение построения DOM-структуры анимации и готовность к визуальному отображению.
Таким образом, config_ready находится до загрузки данных и является наиболее ранним сигналом о том, что экземпляр анимации успешно инициализирован.
Использование события связано с необходимостью контроля момента, когда конфигурация уже стабилизирована, но ресурсы ещё не загружены.
Типовые сценарии:
На стадии config_ready возможно безопасное вмешательство в настройки до начала загрузки данных.
animation.addEventListener('config_ready', () => {
animation.setSpeed(1.5);
});Событие применяется для отслеживания корректности конфигурации в сложных системах с динамической генерацией анимаций.
animation.addEventListener('config_ready', () => {
console.log('Renderer:', animation.renderer);
console.log('Loop:', animation.loop);
});В архитектурах, где анимации загружаются динамически, config_ready используется как точка синхронизации с UI-слоем приложения.
При использовании удалённых JSON-файлов или динамически формируемых
конфигураций событие может возникать с небольшой задержкой после вызова
loadAnimation.
В случае локальной конфигурации (передача объекта вместо пути) событие возникает практически мгновенно, так как отсутствует этап сетевой загрузки.
lottie.loadAnimation({
container: document.body,
renderer: 'svg',
loop: true,
animationData: animationObject
});Даже при передаче animationData событие сохраняет свою
роль — фиксирует момент нормализации структуры.
Поведение события не зависит от типа рендерера:
Общее свойство: config_ready всегда относится к логической подготовке, а не к визуальному представлению.
Событие не гарантирует наличие валидных данных анимации. Возможны ситуации:
Поэтому использование config_ready как финальной точки готовности анимации приводит к некорректным ожиданиям.
После срабатывания события становятся доступны стабильные значения базовых параметров:
animation.isPausedanimation.loopanimation.rendereranimation.currentFrame (начальное значение)Однако доступ к слоям и структуре композиции на этом этапе ограничен, поскольку они формируются только после загрузки данных.
Событие выполняет функцию промежуточного сигнала между:
Его основная задача — разделение этапа конфигурации и этапа загрузки данных. Это позволяет библиотеке:
В системах с множественными анимациями config_ready применяется для:
Пример типовой логики:
animation.addEventListener('config_ready', () => {
registerAnimation(animation);
scheduleDataLoading(animation);
});Такая схема позволяет контролировать момент появления новых анимаций в системе до их фактического рендеринга.
При повторной инициализации анимации событие генерируется заново для каждого нового экземпляра. Старые слушатели не переиспользуются, что требует явного управления жизненным циклом подписок в приложениях с динамическими компонентами.
config_ready относится к наиболее стабильным событиям Lottie Web, так как не зависит от:
Его возникновение определяется исключительно внутренней обработкой конфигурационного объекта.