Режимы циклического воспроизведения

В Lottie Web цикличность воспроизведения задаётся на уровне инициализации анимации через объект конфигурации lottie.loadAnimation. Основной механизм управления повтором — параметр loop.

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

Логические режимы loop

Бесконечный цикл

Значение true переводит анимацию в непрерывное воспроизведение. После достижения конца композиции происходит автоматический возврат к началу.

loop: true

Поведение:

  • воспроизведение от ip до op (диапазон кадров Lottie-композиции)
  • автоматический restart после завершения
  • отсутствие внешнего контроля завершения цикла

Однократное воспроизведение

Значение false отключает повтор.

loop: false

Поведение:

  • проигрывание один раз
  • остановка на последнем кадре
  • событие complete фиксирует завершение цикла

Ограниченное количество повторов

Числовое значение задаёт точное количество циклов.

loop: 3

Поведение:

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

Внутренний механизм цикличности

Lottie Web опирается на временную шкалу, импортированную из After Effects через Bodymovin. Ключевые параметры:

  • ip — initial frame (начальный кадр)
  • op — out point (конечный кадр)
  • fr — frame rate

Цикл воспроизведения фактически представляет собой повторное движение указателя времени от ip к op.

При включённом loop происходит:

  1. достижение op
  2. сброс времени на ip
  3. повторный запуск рендеринга

Управление циклом через API экземпляра анимации

После создания анимации управление переходит к объекту AnimationItem.

const anim = lottie.loadAnimation(config);

Программное включение и отключение цикла

anim.loop = true;
anim.loop = false;
anim.loop = 5;

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

Управление цикличностью через события

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

  • complete — завершение одного полного воспроизведения
  • loopComplete — завершение цикла при активном loop
  • enterFrame — каждый кадр

Построение ручного цикла

При отключённом loop повтор можно реализовать вручную:

anim.addEventListener('complete', () => {
  anim.goToAndPlay(0, true);
});

Такой подход даёт контроль над логикой:

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

Метод playSegments и сегментные циклы

Lottie позволяет воспроизводить не всю композицию, а её часть.

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

Повтор сегмента

Цикл внутри сегмента создаётся повторным вызовом:

function loopSegment() {
  anim.playSegments([10, 50], true);
}

anim.addEventListener('complete', loopSegment);

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

  • сегмент ограничивает диапазон кадров
  • true во втором аргументе принудительно перезапускает сегмент
  • удобно для UI-анимаций (иконки, лоадеры)

Циклы с направлением воспроизведения

Свойство direction влияет на поведение цикла:

  • 1 — вперёд
  • -1 — назад
anim.setDirection(-1);
anim.play();

Комбинированные циклы

anim.addEventListener('complete', () => {
  const dir = anim.playDirection === 1 ? -1 : 1;
  anim.setDirection(dir);
  anim.play();
});

Такой подход создаёт эффект “пинг-понга”, где анимация движется туда-обратно без сброса в начальный кадр.

Автоматические циклы и render loop

В режиме renderer: 'svg' или 'canvas' цикл реализуется через внутренний requestAnimationFrame.

Каждый цикл включает:

  • пересчёт прогресса времени
  • интерполяцию слоёв
  • перерисовку сцены

При включённом loop этот процесс не прерывается, а лишь сбрасывает временную шкалу.

Цикличность и маркеры композиции

При экспорте из After Effects могут быть заданы markers (метки), которые используются как логические точки цикла.

"markers": [
  { "cm": "start", "tm": 0 },
  { "cm": "end", "tm": 60 }
]

В Lottie Web можно использовать их как основу для сегментного цикла:

anim.playSegments(['start', 'end'], true);

(при условии поддержки именованных сегментов в конкретной сборке экспорта)

Сложные сценарии циклирования

Условный цикл

anim.addEventListener('complete', () => {
  if (shouldRepeat) {
    anim.goToAndPlay(0, true);
  }
});

Логика определяется внешним состоянием:

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

Динамическое изменение количества циклов

let count = 0;
const max = 5;

anim.addEventListener('complete', () => {
  count++;
  if (count < max) {
    anim.goToAndPlay(0, true);
  }
});

Поведение аналогично loop: number, но позволяет менять лимит в процессе выполнения.

Особенности взаимодействия loop и autoplay

lottie.loadAnimation({
  autoplay: true,
  loop: true
});
  • autoplay запускает первый цикл автоматически
  • loop определяет поведение после завершения первого прохода
  • отключение autoplay требует ручного вызова play()

Влияние renderer на циклы

SVG renderer

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

Canvas renderer

  • отрисовка в bitmap
  • более стабильное FPS при циклах
  • предпочтителен для постоянного loop

HTML renderer

  • использование DOM-элементов
  • цикл может зависеть от структуры страницы

Сброс состояния при повторе

При каждом новом цикле Lottie:

  • сбрасывает внутренний time cursor
  • пересчитывает выражения (expressions)
  • повторно инициализирует анимационные кривые

Это важно для анимаций с:

  • случайными значениями
  • time-based expressions
  • динамическими эффектами

Прерывание цикла

Цикл может быть остановлен в любой момент:

anim.stop();
anim.loop = false;

или полным уничтожением:

anim.destroy();

При остановке:

  • текущий frame фиксируется
  • дальнейшие циклы не запускаются
  • события loopComplete больше не вызываются
Оглавление