Загрузка анимации методом loadAnimation

Основной метод инициализации анимаций Lottie Web реализуется через lottie.loadAnimation. Он создаёт экземпляр анимации, привязывает его к DOM-контейнеру и запускает процесс загрузки данных.

const animation = lottie.loadAnimation(config);

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

Конфигурационный объект

loadAnimation принимает единый объект конфигурации, определяющий источник данных, способ рендеринга и поведение анимации.

Основные параметры

container DOM-элемент, в который будет отрисована анимация.

container: document.getElementById('lottie')

Контейнер должен быть реальным элементом DOM. Lottie вставляет внутрь него SVG, Canvas или HTML-разметку в зависимости от выбранного рендерера.

renderer Определяет механизм отрисовки:

  • svg — векторная отрисовка, основной и наиболее распространённый вариант
  • canvas — отрисовка через Canvas API
  • html — DOM-based рендеринг (используется редко)
renderer: 'svg'

SVG-рендерер обеспечивает наилучшее качество при масштабировании и поддержку большинства эффектов After Effects.

loop Управляет повторением анимации:

loop: true

Возможные значения:

  • true — бесконечный цикл
  • false — проигрывание один раз
  • число — конкретное количество повторов

autoplay Автоматический запуск после загрузки:

autoplay: true

При значении false анимация загружается, но не запускается до явного вызова метода play().

path Путь к JSON-файлу анимации, экспортированному из After Effects через Bodymovin.

path: '/animations/loader.json'

Файл загружается асинхронно через HTTP-запрос.

animationData Альтернатива path. Позволяет передать уже загруженный JSON-объект.

animationData: {
  v: "5.7.4",
  fr: 30,
  ip: 0,
  op: 60,
  layers: []
}

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

name Идентификатор анимации внутри Lottie-сессии.

name: 'preloader'

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

rendererSettings Дополнительные параметры рендеринга, зависящие от выбранного движка.

Пример для SVG:

rendererSettings: {
  preserveAspectRatio: 'xMidYMid slice',
  clearCanvas: true,
  progressiveLoad: false,
  hideOnTransparent: true
}

Пример полной инициализации

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

Загрузка анимации по URL

Наиболее распространённый сценарий — загрузка JSON-файла по HTTP. В этом режиме библиотека самостоятельно выполняет fetch-запрос, парсит данные и строит сцену.

Процесс включает:

  1. Запрос JSON-файла
  2. Валидацию структуры
  3. Построение внутренних слоёв
  4. Инициализацию рендерера
  5. Запуск (если включён autoplay)

Использование animationData

При работе в сборках или при предварительной загрузке данных через API используется прямое внедрение JSON.

fetch('/api/animation')
  .then(res => res.json())
  .then(data => {
    lottie.loadAnimation({
      container: document.getElementById('lottie'),
      renderer: 'svg',
      loop: true,
      autoplay: true,
      animationData: data
    });
  });

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

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

SVG

Создаёт DOM-структуру из <svg>, <g>, <path>, <defs>. Каждый кадр обновляет атрибуты элементов.

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

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

Canvas

Использует 2D-контекст для отрисовки кадров.

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

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

HTML

Генерирует DOM-элементы для каждого слоя.

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

  • удобен для простых UI-анимаций
  • ограниченная совместимость с эффектами After Effects

Объект анимации

Результат loadAnimation — экземпляр с набором методов управления.

Управление воспроизведением

animation.play();
animation.pause();
animation.stop();

Управление скоростью

animation.setSpeed(2); // в 2 раза быстрее

Переход по кадрам

animation.goToAndPlay(10, true);
animation.goToAndStop(30, true);

Первый аргумент — кадр, второй — использование индексации (true — кадры, false — секунды).

Жизненный цикл загрузки

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

1. Инициализация контейнера

Создаётся внутренний root-элемент, очищается контейнер.

2. Загрузка данных

При использовании path выполняется HTTP-запрос.

3. Парсинг JSON

Проверяется структура: слои, тайминг, ключевые кадры.

4. Построение композиции

Создаются внутренние представления слоёв и свойств.

5. Рендеринг первого кадра

Выполняется первичная отрисовка.

6. Запуск цикла воспроизведения

Активируется requestAnimationFrame цикл.

События загрузки

Экземпляр анимации поддерживает события:

animation.addEventListener('data_ready', () => {});
animation.addEventListener('DOMLoaded', () => {});
animation.addEventListener('complete', () => {});
animation.addEventListener('loopComplete', () => {});

DOMLoaded

Срабатывает после построения DOM-структуры.

data_ready

Срабатывает после загрузки и парсинга JSON.

complete

Срабатывает после завершения проигрывания (если loop = false).

Ошибки загрузки

Типовые причины проблем при loadAnimation:

Некорректный путь

  • 404 ошибка JSON-файла
  • неверный MIME-type

Повреждённый JSON

  • отсутствие обязательных полей (layers, fr, ip, op)
  • некорректная структура экспорта Bodymovin

Несовместимость версий

  • экспорт из новой версии After Effects при старом Lottie Web

Пример переключения источников загрузки

const config = {
  container: document.getElementById('lottie'),
  renderer: 'svg',
  loop: true,
  autoplay: false
};

if (window.useLocalData) {
  config.animationData = window.animationJSON;
} else {
  config.path = '/assets/animation.json';
}

const animation = lottie.loadAnimation(config);

Особенности повторной инициализации

Повторный вызов loadAnimation в одном и том же контейнере без очистки приводит к наложению рендеров. Корректное поведение требует уничтожения предыдущего экземпляра:

animation.destroy();

После уничтожения освобождаются ресурсы, удаляются обработчики событий и очищается DOM-контейнер.

Оглавление