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

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

Автовоспроизведение в Lottie определяется на этапе инициализации через параметр autoplay. Он управляет тем, начнёт ли анимация воспроизводиться сразу после загрузки.

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

При autoplay: true воспроизведение запускается автоматически после завершения загрузки и первичной инициализации DOM-структуры анимации.

При autoplay: false анимация загружается в состояние “готова к запуску”, но остаётся на первом кадре до явного вызова методов управления.

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

anim.play();

Ручное управление воспроизведением

После отключения автовоспроизведения управление полностью переходит к API экземпляра анимации.

play и pause

anim.play();   // запуск
anim.pause();  // пауза

play() продолжает воспроизведение с текущего кадра, не сбрасывая состояние. pause() фиксирует текущий кадр без изменения прогресса.

Точное управление кадрами

Для сценариев, где автовоспроизведение заменяется программной логикой, используются методы навигации по таймлайну.

Переход к кадру

anim.goToAndStop(50, true);

Первый аргумент — кадр или время (в зависимости от второго параметра). Второй аргумент isFrame определяет интерпретацию значения:

  • true — кадры
  • false — миллисекунды

Запуск с диапазоном кадров

anim.playSegments([10, 60], true);

Позволяет воспроизводить только часть анимации. Это часто используется для UI-состояний:

  • загрузка → успех
  • кнопка → активное состояние
  • переключатель → on/off

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

Автовоспроизведение часто отключают для контроля UX-сценариев.

Пример: запуск по событию

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

document.getElementById('btn').addEventListener('click', () => {
  anim.play();
});

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

Автовоспроизведение и DOM readiness

Даже при autoplay: true важно учитывать момент инициализации DOM.

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

Если контейнер отсутствует в момент инициализации, анимация не будет привязана корректно, что приведёт к “тихому” сбою без ошибок.

Управление через Intersection Observer

Одним из наиболее распространённых паттернов является отключение автовоспроизведения вне области видимости.

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

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

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

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

Контроль автовоспроизведения через Visibility API

Автовоспроизведение часто синхронизируют с активностью вкладки браузера.

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

Это особенно важно для:

  • анимаций в фоне
  • SPA-приложений
  • панелей мониторинга

Автовоспроизведение и повторение (loop)

Параметр loop тесно связан с autoplay, но имеет независимую семантику.

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

Поведение:

  • loop: true — бесконечное повторение
  • loop: number — ограниченное количество циклов
  • loop: false — один проход

Комбинации:

  • autoplay: false + loop: true → старт только вручную, но затем бесконечный цикл
  • autoplay: true + loop: false → однократное воспроизведение при загрузке

Синхронизация автовоспроизведения с состояниями интерфейса

В сложных интерфейсах автовоспроизведение часто привязывается к состояниям приложения.

function setState(state) {
  switch (state) {
    case 'loading':
      anim.playSegments([0, 30], true);
      anim.loop = true;
      break;

    case 'success':
      anim.loop = false;
      anim.playSegments([31, 60], true);
      break;

    case 'idle':
      anim.stop();
      break;
  }
}

Метод stop() возвращает анимацию к первому кадру и полностью останавливает прогресс.

Отложенный старт анимации

Иногда требуется задержка перед запуском:

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

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

Это используется для:

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

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

Мобильные браузеры могут ограничивать автозапуск, особенно при наличии интенсивной графики. В таких случаях:

  • autoplay: true может игнорироваться до взаимодействия пользователя
  • SVG-рендеринг может быть менее производительным, чем canvas
  • рекомендуется использовать autoplay: false и запускать через жест пользователя
document.addEventListener('touchstart', () => {
  anim.play();
}, { once: true });

Предзагрузка и контроль момента старта

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

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

anim.addEventListener('DOMLoaded', () => {
  anim.goToAndStop(0, true);
});

Это гарантирует, что анимация не начнёт воспроизведение до полной готовности DOM-структуры SVG.

Комбинированные стратегии управления

В реальных приложениях автовоспроизведение редко используется в чистом виде. Чаще применяется комбинация:

  • отключённый autoplay
  • запуск через IntersectionObserver
  • пауза при visibilitychange
  • сегментное воспроизведение через playSegments

Такой подход обеспечивает предсказуемое поведение и контроль над ресурсами без потери визуальной динамики интерфейса.

Оглавление