Автоматический запуск анимации

Lottie Web поддерживает автоматический запуск анимации как один из базовых сценариев воспроизведения, реализуемый через параметр конфигурации autoplay, а также через программное управление экземпляром анимации после загрузки. Поведение автозапуска зависит от способа инициализации, окружения выполнения, выбранного рендерера и состояния DOM.

Создание экземпляра анимации в Lottie Web выполняется через lottie.loadAnimation, где задаются ключевые параметры:

  • container — DOM-элемент для рендера
  • renderer — способ отображения (svg, canvas, html)
  • loop — зацикливание
  • autoplay — автоматический запуск
  • animationData или path — источник JSON-анимации

Автоматический запуск активируется исключительно при autoplay: true. В этом случае библиотека вызывает play() сразу после успешной загрузки и первичного рендера сцены.

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

При таком сценарии момент старта зависит от завершения загрузки JSON и построения внутреннего дерева элементов SVG/Canvas.

Разделение загрузки и воспроизведения

Внутренний жизненный цикл можно разделить на этапы:

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

Параметр autoplay влияет только на пятый этап. Если он отключён, воспроизведение не начинается автоматически, даже при полностью готовой сцене.

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

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

animation.play();

Поведение при разных рендерах

Рендерер влияет на момент готовности к автозапуску.

SVG

  • Наиболее предсказуемый запуск
  • Анимация стартует сразу после построения DOM-структуры SVG

Canvas

  • Запуск зависит от инициализации контекста 2D
  • Возможна небольшая задержка при первом кадре

HTML

  • Используется реже
  • Автозапуск может зависеть от готовности слоёв DOM

Управление моментом старта через события

Lottie Web предоставляет события жизненного цикла, позволяющие синхронизировать запуск с состоянием загрузки.

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

  • DOMLoaded — DOM построен
  • data_ready — JSON загружен
  • config_ready — конфигурация применена
  • loaded_images — изображения загружены (если используются)

Часто автозапуск реализуется вручную через событие DOMLoaded:

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

anim.addEventListener('DOMLoaded', () => {
  anim.play();
});

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

Автозапуск при прокрутке страницы

В сценариях лендингов и интерфейсных анимаций автозапуск часто привязывается к видимости элемента. Используется IntersectionObserver, который запускает анимацию только при появлении блока в области viewport.

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

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      anim.play();
    } else {
      anim.pause();
    }
  });
});

observer.observe(document.getElementById('anim'));

Такой подход снижает нагрузку на CPU и GPU, особенно при большом количестве анимаций на странице.

Автозапуск и политика браузеров

Современные браузеры накладывают ограничения на автоматическое воспроизведение медиа-контента. Хотя Lottie Web не относится к аудио или видео, аналогичные ограничения могут косвенно влиять на поведение анимаций:

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

Для стабильного поведения используется проверка видимости документа:

document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    anim.pause();
  } else {
    anim.play();
  }
});

Ручной контроль автозапуска через API

После создания экземпляра доступны методы управления:

  • play() — запуск воспроизведения
  • pause() — остановка на текущем кадре
  • stop() — сброс к началу
  • goToAndPlay(frame, isFrame) — запуск с конкретного кадра
  • setSpeed(value) — изменение скорости воспроизведения

Автозапуск может быть эмулирован через setTimeout, если требуется задержка:

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

setTimeout(() => {
  anim.play();
}, 500);

Задержка старта и синхронизация с UI

В интерфейсах с динамической загрузкой ресурсов автозапуск часто откладывается до завершения инициализации всего UI:

Promise.all([
  document.fonts.ready,
  fetch('/api/config')
]).then(() => {
  anim.play();
});

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

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

При использовании loop: false автозапуск может быть реализован повторно через событие завершения:

anim.addEventListener('complete', () => {
  anim.stop();
  anim.play();
});

Или с изменением направления воспроизведения:

anim.setDirection(-1);
anim.play();

Особенности автозапуска в динамически добавляемых DOM-элементах

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

window.addEventListener('load', () => {
  const container = document.createElement('div');
  document.body.appendChild(container);

  lottie.loadAnimation({
    container,
    renderer: 'svg',
    loop: true,
    autoplay: true,
    path: 'anim.json'
  });
});

Без явного ожидания DOM возможна ситуация, при которой автозапуск происходит до фактического добавления контейнера в документ.

Производительность при автозапуске

Множественные автозапускающиеся анимации увеличивают нагрузку из-за постоянного вызова requestAnimationFrame. В SVG-рендерере это особенно заметно при сложной структуре слоёв.

Оптимизационные стратегии:

  • отключение autoplay для невидимых элементов
  • использование pause() вне viewport
  • уменьшение частоты кадров через setSpeed
  • кеширование JSON-анимаций

Автозапуск следует рассматривать как активное состояние рендеринга, требующее контроля жизненного цикла и видимости элементов страницы.

Оглавление