Событие data_ready

Событие data_ready относится к внутреннему жизненному циклу анимации в Lottie Web и сигнализирует о моменте, когда JSON-данные анимации полностью загружены, распарсены и преобразованы во внутреннюю структуру, пригодную для дальнейшего построения рендера. На этом этапе сама анимация ещё не обязательно отрисована в DOM, но все ключевые данные уже доступны для работы API и модификации.

При инициализации анимации через lottie.loadAnimation происходит несколько последовательных стадий:

  1. Загрузка JSON (локально или по сети)
  2. Парсинг данных
  3. Построение внутренних структур композиции
  4. Подготовка слоёв и свойств
  5. Генерация рендер-структуры
  6. Инициализация визуального контейнера

Событие data_ready возникает после завершения этапов загрузки и парсинга, но до полной готовности DOM-рендера.

На этом уровне уже доступны:

  • структура композиции (animationData)
  • список слоёв
  • ключевые кадры и кривые
  • данные о длительности и FPS
  • маски и эффекты (если присутствуют)

Отличие data_ready от других событий

В Lottie Web существует несколько ключевых событий жизненного цикла:

  • data_ready
  • DOMLoaded
  • complete
  • loopComplete
  • enterFrame

data_ready отличается тем, что он не связан с DOM напрямую.

data_ready vs DOMLoaded

DOMLoaded сигнализирует, что:

  • SVG/Canvas/HTML-структура уже создана
  • элементы вставлены в контейнер
  • рендер-слой готов к отображению

data_ready происходит раньше:

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

Таким образом:

  • data_ready — данные готовы
  • DOMLoaded — интерфейс готов

Подписка на событие data_ready

Событие доступно через стандартную систему событий Lottie instance:

const animation = lottie.loadAnimation({
  container: document.getElementById('anim'),
  renderer: 'svg',
  loop: true,
  autoplay: false,
  path: 'animation.json'
});

animation.addEventListener('data_ready', () => {
  console.log('Данные анимации загружены и распарсены');
});

В этом моменте можно безопасно работать с:

  • animation.animationData
  • animation.totalFrames
  • animation.frameRate
  • animation.firstFrame

Практическое значение data_ready

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

Типичные сценарии:

1. Предварительный анализ композиции

animation.addEventListener('data_ready', () => {
  const duration = animation.getDuration();
  const frames = animation.totalFrames;

  if (frames > 300) {
    console.warn('Анимация слишком длинная');
  }
});

2. Динамическая модификация параметров

До начала рендера можно изменить поведение анимации:

animation.addEventListener('data_ready', () => {
  animation.setSpeed(1.5);
  animation.loop = false;
});

3. Подготовка интерфейса

animation.addEventListener('data_ready', () => {
  document.getElementById('loader').style.display = 'none';
  document.getElementById('anim').style.visibility = 'visible';
});

Внутренний механизм генерации события

Lottie Web обрабатывает JSON через собственный парсер AE-экспорта. После загрузки:

  1. JSON передаётся в AnimationItem
  2. Выполняется AnimationParser
  3. Создаются объекты слоёв (Layer)
  4. Формируются эффекты (EffectsManager)
  5. Собирается структура композиции

После успешного завершения этого pipeline вызывается:

this.trigger('data_ready');

Это означает, что событие не связано с браузерным API, а является частью внутренней системы событий Lottie.

Связь с animationData

После data_ready гарантируется наличие:

animation.animationData

Структура включает:

  • layers — массив слоёв
  • assets — внешние ресурсы
  • fr — frame rate
  • ip, op — начало и конец анимации
  • w, h — размеры композиции

Пример анализа:

animation.addEventListener('data_ready', () => {
  const data = animation.animationData;

  console.log('FPS:', data.fr);
  console.log('Размер:', data.w, data.h);
  console.log('Слоёв:', data.layers.length);
});

Ограничения состояния data_ready

Несмотря на доступность данных, в этом состоянии существуют ограничения:

  • DOM-структура может отсутствовать (особенно при renderer: 'canvas')
  • play() может не дать визуального результата
  • currentFrame может быть не инициализирован корректно
  • текстовые слои могут ещё не быть рассчитаны рендером

Поэтому любые операции, связанные с визуальным изменением DOM, следует выполнять только после DOMLoaded.

Сценарии асинхронной загрузки

При загрузке через URL событие становится особенно важным:

const animation = lottie.loadAnimation({
  container: document.getElementById('anim'),
  renderer: 'svg',
  autoplay: false,
  path: '/animations/intro.json'
});

animation.addEventListener('data_ready', () => {
  initializeAnalytics(animation.animationData);
});

При этом момент вызова зависит от:

  • скорости сети
  • размера JSON
  • сложности композиции
  • количества слоёв и эффектов

Использование вместе с промис-обёртками

Хотя Lottie Web не предоставляет Promise API по умолчанию, data_ready часто используется для его эмуляции:

function loadLottie(path) {
  return new Promise((resolve) => {
    const anim = lottie.loadAnimation({
      container: document.createElement('div'),
      renderer: 'svg',
      autoplay: false,
      path
    });

    anim.addEventListener('data_ready', () => {
      resolve(anim);
    });
  });
}

Такой подход позволяет гарантировать доступ к структуре до дальнейших действий.

Особенности при использовании разных рендеров

SVG

  • data_ready → подготовлены SVG-ноды, но не вставлены
  • структура DOM ещё может отсутствовать

Canvas

  • создаётся буферная структура
  • контекст может быть не инициализирован

HTML

  • создаются DOM-элементы
  • но стили и вложенность могут быть не применены

Влияние на производительность

Само событие не является тяжёлым, но момент его возникновения может совпадать с пиковой нагрузкой:

  • декодирование JSON
  • построение графа слоёв
  • подготовка выражений (expressions)
  • инициализация эффектов

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

Типичные ошибки при работе с data_ready

1. Попытка управления DOM до DOMLoaded

animation.addEventListener('data_ready', () => {
  document.querySelector('.layer').style.opacity = 1; // может не существовать
});

2. Предположение, что анимация уже играет

animation.addEventListener('data_ready', () => {
  console.log(animation.isPaused); // состояние ещё не финализировано
});

3. Двойная инициализация логики

При повторных вызовах loadAnimation без очистки контейнера событие может сработать несколько раз в разных экземплярах.

Порядок событий в типичной загрузке

Для одной анимации последовательность чаще всего выглядит так:

  1. config_ready (внутреннее)
  2. загрузка JSON
  3. data_ready
  4. построение DOM
  5. DOMLoaded
  6. enterFrame
  7. complete (при autoplay или проигрывании)

Использование для отладки

data_ready часто применяется как точка контроля корректности JSON:

animation.addEventListener('data_ready', () => {
  if (!animation.animationData.layers.length) {
    console.error('Пустая композиция');
  }
});

Это позволяет выявлять:

  • повреждённые экспортированные файлы After Effects
  • некорректные версии bodymovin
  • отсутствующие assets

Взаимодействие с динамическими изменениями

После наступления data_ready можно безопасно применять:

  • goToAndStop
  • setSpeed
  • setDirection
  • playSegments

Пример:

animation.addEventListener('data_ready', () => {
  animation.goToAndStop(10, true);
  animation.setSpeed(2);
});

Поведение при повторной загрузке

Если вызывается destroy() и создаётся новая анимация, data_ready срабатывает заново для каждого экземпляра независимо. Событие не кэшируется и не сохраняется между инстансами.

Оглавление