Перемотка к определенному кадру

Перемотка анимации в Lottie Web основана на управлении текущим положением проигрывания через кадры (frames) и временные значения, которые интерпретируются движком рендеринга. В основе лежит объект AnimationItem, возвращаемый при инициализации через lottie.loadAnimation, предоставляющий методы для точного контроля состояния анимации.

Lottie Web оперирует дискретной кадровой сеткой, сформированной на основе частоты кадров, заданной в After Effects при экспорте. Ключевые параметры:

  • totalFrames — общее количество кадров анимации
  • frameRate — частота кадров в секунду
  • currentFrame — текущее положение воспроизведения

Кадр выступает базовой единицей навигации, что делает возможным детерминированный переход к любой точке анимации без необходимости пошагового воспроизведения.

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

f = t fps

где t — время в секундах, fps — частота кадров, f — целевой кадр.

Прямой переход к кадру

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

animation.goToAndStop(frame, isFrame);

Параметр isFrame определяет интерпретацию первого аргумента:

  • true — значение трактуется как кадр
  • false — значение трактуется как время в секундах

Пример фиксации на 120 кадре:

animation.goToAndStop(120, true);

После вызова воспроизведение останавливается, а внутренний рендер фиксируется на указанной позиции.

Аналогичный переход с продолжением проигрывания:

animation.goToAndPlay(120, true);

Навигация по времени

При работе во временной шкале используется тот же методический интерфейс, но с переключением режима интерпретации:

animation.goToAndStop(2.5, false);

В этом случае позиция вычисляется через умножение времени на frameRate, после чего выполняется переход к соответствующему кадру.

Синхронизация с внутренним состоянием

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

  • currentFrame приводится к целевому значению
  • внутренний прогресс анимации пересчитывается
  • триггерится перерисовка canvas/SVG/HTML renderer

При использовании requestAnimationFrame дальнейшее поведение зависит от состояния play/pause. В состоянии stop анимация остаётся на фиксированном кадре без обновления.

Работа с диапазонами кадров

Помимо точечного перехода, Lottie Web поддерживает перемотку по сегментам:

animation.playSegments([start, end], true);

Где:

  • start — начальный кадр
  • end — конечный кадр
  • true — принудительное переключение сегмента

Механизм используется для создания логических частей анимации, позволяя реализовывать псевдо-сцены внутри одного JSON-файла.

Пример:

animation.playSegments([0, 45], true);

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

animation.playSegments([45, 90], true);

Маркеры и навигация по именованным точкам

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

Структура маркера обычно включает:

  • name — имя точки
  • time — позиция во времени
  • duration — длительность сегмента

Переход к маркеру реализуется через вычисление соответствующего кадра:

const marker = animation.markers.find(m => m.name === 'intro');
animation.goToAndStop(marker.time, false);

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

Погрешности и особенности интерполяции

Перемотка в Lottie Web не всегда означает точное позиционирование до субкадровой точности во всех рендерах. Особенности:

  • SVG-рендер может округлять значения путей
  • Canvas-рендер использует растеризацию по кадрам
  • HTML-рендер зависит от CSS-трансформаций

При резком переходе между кадрами возможны визуальные скачки, связанные с пересчетом интерполированных значений свойств (position, opacity, path morphing).

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

После вызова goToAndStop или playSegments возможно дальнейшее управление:

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

Комбинация с перемоткой используется для построения контролируемых анимационных состояний, например:

animation.goToAndStop(0, true);
animation.pause();

или

animation.goToAndStop(100, true);
animation.play();

Связь с длительностью анимации

Полная длительность вычисляется через frameRate и totalFrames:

T =

где N — количество кадров, fps — частота кадров, T — длительность в секундах.

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

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

Некоторые реализации используют нормализованный прогресс (0–1), который переводится в кадры:

f = p N

где p — прогресс, N — totalFrames.

Это позволяет синхронизировать Lottie-анимацию с внешними системами управления интерфейсом, такими как скролл или слайдеры.

Поведение при резкой перемотке во время проигрывания

Если перемотка происходит во время активного play, Lottie Web:

  • сбрасывает текущий интерполятор
  • пересчитывает композицию на новом кадре
  • продолжает проигрывание с новой позиции (если вызван goToAndPlay)
  • фиксирует состояние (если вызван goToAndStop)

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

Оглавление