Статические методы Lottie

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

Метод связывает данные анимации с DOM-контейнером и запускает процесс рендеринга:

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

Поддерживаются три основных режима рендеринга:

  • svg — векторная отрисовка с высокой детализацией
  • canvas — растровая отрисовка через Canvas API
  • html — DOM-based рендеринг

Архитектурно loadAnimation создаёт внутренний объект AnimationItem, который инкапсулирует состояние, таймлайн и рендер-движок.

Ключевые параметры конфигурации:

  • container — DOM-узел, в который монтируется анимация
  • renderer — тип движка отрисовки
  • loop — режим зацикливания (boolean или количество циклов)
  • autoplay — автоматический старт
  • path или animationData — источник данных

Управление качеством рендеринга

Статический метод lottie.setQuality управляет балансом между производительностью и точностью отрисовки.

lottie.setQuality('high');

Допустимые значения:

  • low — минимальная нагрузка на CPU, упрощённая отрисовка
  • medium — компромиссный режим
  • high — максимальная детализация

Внутри механизма качество влияет на:

  • частоту обновления кадров
  • точность интерполяции кривых
  • количество упрощений при отрисовке контуров SVG и Canvas

В Canvas-режиме изменение качества может влиять на количество операций растеризации, в SVG — на глубину пересчёта path-данных.

Контроль URL-контекста

Метод lottie.setLocationHref задаёт базовый URL для разрешения относительных путей внутри анимации.

lottie.setLocationHref('https://example.com/app/');

Используется при наличии:

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

Внутренний механизм подменяет window.location.href в логике разрешения путей, что особенно важно при работе в iframe или при серверном рендеринге.

Субкадровый режим отрисовки

Метод lottie.setSubframeRendering управляет интерполяцией между кадрами.

lottie.setSubframeRendering(true);

При включении:

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

При выключении:

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

Механизм особенно заметен при трансформациях объектов (position, scale, rotation), где интерполяция кривых Bezier играет ключевую роль.

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

Статический метод lottie.useWebWorker переносит часть вычислений в отдельный поток.

lottie.useWebWorker(true);

При активации:

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

Ограничения:

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

Архитектурно используется message passing между worker и main thread с сериализацией ключевых кадров и команд рендеринга.

Глобальное управление экземплярами

Статический API предоставляет доступ к управлению всеми активными анимациями через внутренний реестр.

Основные операции:

  • получение списка активных экземпляров
  • принудительное обновление
  • остановка всех анимаций
lottie.stop();
lottie.destroy();
lottie.pause();

Эти методы применяются глобально ко всем созданным экземплярам через loadAnimation.

Поведение:

  • stop — сбрасывает таймлайн к начальному кадру
  • pause — фиксирует текущее состояние без обновления
  • destroy — освобождает память, удаляет DOM-связи и слушатели событий

Инициализация через предзагруженные данные

loadAnimation поддерживает режим работы с уже загруженным JSON:

lottie.loadAnimation({
  container: element,
  animationData: animationObject
});

В этом режиме отсутствует сетевой запрос, а парсинг выполняется синхронно.

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

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

Контроль жизненного цикла через статический API

Статические методы участвуют в управлении жизненным циклом анимации на уровне библиотеки:

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

Внутренний механизм построен вокруг централизованного менеджера анимаций, который отслеживает состояние каждого AnimationItem и синхронизирует его с глобальными параметрами библиотеки.

Оглавление