Работа с воспроизведением отдельных участков анимации в Lottie Web строится вокруг управления диапазонами кадров, маркерами и динамического изменения текущего состояния проигрывания. Библиотека предоставляет низкоуровневые методы, позволяющие запускать не всю композицию целиком, а строго заданные фрагменты, что особенно важно для интерфейсных анимаций, интерактивных элементов и сложных состояний UI.
Каждая Lottie-анимация представляет собой последовательность кадров, определяемую свойствами композиции. Внутри объекта анимации доступны ключевые параметры:
firstFrame — начальный кадр композицииtotalFrames — общее количество кадровРабота с участками анимации базируется на указании диапазона в формате:
[startFrame, endFrame]Такой подход позволяет ограничить проигрывание строго заданной областью таймлайна, не затрагивая остальные ключевые кадры композиции.
При этом важно учитывать, что Lottie Web интерпретирует диапазоны либо как кадры, либо как процентные значения (в зависимости от параметров вызова метода), что требует явного указания режима интерпретации.
Основной инструмент воспроизведения фрагментов — метод:
animation.playSegments(segments, forceFlag)segments может принимать:
[start, end][[s1, e1], [s2, e2]]forceFlag определяет поведение очереди:
true — принудительное прерывание текущего
воспроизведения и запуск нового сегментаfalse — добавление сегмента в очередьПри вызове playSegments движок Lottie:
startFrameendFrameЭтот механизм позволяет строить цепочки анимаций без необходимости разделять JSON-композицию на отдельные файлы.
Сегментная модель особенно эффективна в интерфейсах с состояниями:
Каждое состояние может быть выражено отдельным диапазоном кадров внутри одной композиции.
Передача массива массивов позволяет формировать последовательность воспроизведения:
animation.playSegments([[0, 30], [30, 60], [60, 90]], true)В этом случае Lottie последовательно проигрывает:
Очередь обрабатывается внутри одного цикла анимации без необходимости внешнего контроля времени.
Ключевым аспектом является отсутствие автоматического возврата к началу композиции после завершения очереди — управление состоянием остаётся за логикой приложения.
Параметр forceFlag = true используется для мгновенного
переключения между сегментами.
Поведение при принудительном запуске:
Это критично для интерфейсов с высокой частотой событий, например:
Без принудительного режима возможна задержка между состояниями из-за очереди сегментов.
Помимо числовых диапазонов, Lottie поддерживает именованные маркеры, создаваемые в After Effects при экспорте через Bodymovin.
Маркер представляет собой именованную точку или диапазон внутри таймлайна, доступную через API анимации:
animation.playSegments('markerName', true)или
animation.goToAndPlay('markerName', true)Маркерная модель фактически абстрагирует кадровую систему, переводя управление в именованные логические блоки.
Для более точного контроля используется сочетание методов:
animation.goToAndPlay(frame, isFrame)Позволяет:
animation.goToAndStop(frame, isFrame)Используется для установки статичного состояния без воспроизведения.
Параметр isFrame определяет:
true — значение трактуется как кадрfalse — значение трактуется как время (в секундах)Эта двойственность важна при интеграции с внешними таймерами и системами синхронизации.
При работе с сегментами важно учитывать поведение цикла воспроизведения.
Если установлен режим loop:
animation.loop = trueто поведение сегмента изменяется:
endFrame воспроизведение возвращается к
startFrameКомбинация loop и playSegments используется для:
В реальных интерфейсах сегменты часто переключаются на основе событий. В этом случае используется модель состояния:
Пример логики:
Переключение между ними осуществляется через
playSegments с forceFlag = true, обеспечивая
мгновенный переход.
Сегментное воспроизведение часто связывается с:
В таких случаях важно учитывать, что Lottie не блокирует основной поток и не гарантирует точную синхронизацию с асинхронными процессами. Поэтому управление сегментами строится на событийной модели.
Основная стратегия:
completeКаждый сегмент может сопровождаться событием завершения анимации:
animation.addEventListener('complete', handler)Однако важно учитывать, что событие относится ко всей анимации, а не
к отдельному сегменту. Поэтому при использовании
playSegments требуется дополнительное отслеживание текущего
диапазона.
Распространённый подход:
При всей гибкости существуют ограничения:
Эти ограничения компенсируются внешней архитектурой управления состояниями и событийной моделью приложения.
При использовании:
animation.setSpeed(value)все активные сегменты масштабируются по времени воспроизведения. Это означает:
Это позволяет динамически адаптировать анимацию под производительность устройства или пользовательские настройки интерфейса.