Lottie Web основана на воспроизведении анимаций, экспортированных из Adobe After Effects через плагин Bodymovin. Вся анимация представляется в виде JSON-структуры, содержащей описания слоёв, ключевых кадров, кривых интерполяции, масок и трансформаций. Исполнение происходит исключительно в контексте JavaScript-движка рендеринга (SVG, Canvas или HTML), без подключения мультимедийных потоков.
Ключевой особенностью архитектуры является то, что формат изначально
ориентирован на визуальное представление данных. В спецификации
отсутствуют сущности, связанные с аудиодорожками, аудиофрагментами или
звуковыми событиями. Это приводит к тому, что даже на уровне JSON-схемы
нет структуры, аналогичной audio, soundLayer
или mediaTrack.
Формат проектировался как замена тяжёлым видеороликам и GIF-анимациям для интерфейсной графики. Основная цель заключалась в переносе сложной моушн-графики в лёгкий, масштабируемый и интерактивный формат для веба и мобильных приложений.
Аудио в этой модели создаёт несколько фундаментальных проблем:
Таким образом, отсутствие аудио — не упущение, а следствие выбранной архитектурной модели.
Lottie Web оперирует временной шкалой, выраженной в кадрах (frames). Каждая анимация описывается через:
Звуковая модель в вебе, напротив, работает через непрерывное временное представление в секундах с плавающей точкой и буферизацией аудиопотока.
t =
Различие в представлении времени создаёт фундаментальный разрыв между аудио и анимацией. Даже при наличии синхронизации через JavaScript возникают проблемы дрейфа времени, особенно при падении FPS или при асинхронной загрузке ресурсов.
Библиотека lottie-web предоставляет API для управления
анимацией:
play)stop)goToAndPlay, goToAndStop)playSegments)setSpeed)Ни один из этих механизмов не содержит абстракции звукового канала. Рендеринг полностью изолирован от мультимедийных потоков браузера.
Внутренний цикл работы Lottie строится вокруг requestAnimationFrame, который не синхронизирован напрямую с аудиосистемой браузера. Это означает, что любые попытки добавить звук через стандартные HTML-элементы неизбежно требуют внешней логики синхронизации.
Отсутствие встроенного аудио влияет на проектирование интерфейсов и интерактивных анимаций:
Особенно критично это проявляется в анимациях, где звук должен совпадать с конкретными ключевыми кадрами, например в микровзаимодействиях интерфейсов или обучающих сценариях.
Несмотря на отсутствие встроенной поддержки, синхронизация достигается внешними средствами. Основные стратегии основаны на связывании временной шкалы аудио и анимации.
Базовый подход заключается в использовании стандартного аудиоэлемента:
currentTimegoToAndStopОсновная сложность заключается в том, что аудио и анимация имеют разную точность обновления. Аудио обновляется в аудиобуфере, а Lottie — в рендер-цикле браузера.
Web Audio API позволяет работать с аудио на уровне более высокой точности. В этом случае:
audioContext.currentTimeЭто позволяет строить более точные соответствия между кадрами анимации и аудиособытиями.
Связь можно выразить через функцию преобразования времени:
f = t fps
где t — время аудио, а f — текущий кадр
Lottie-анимации.
Lottie поддерживает воспроизведение сегментов анимации, что позволяет привязывать звуковые события к определённым диапазонам кадров.
Принцип работы:
Такой подход используется в интерфейсных микровзаимодействиях, где важна локальная синхронизация, а не глобальное совпадение таймлайна.
Даже при использовании Web Audio API и строгого контроля времени возникают ограничения:
Это делает синхронизацию вероятностной, а не детерминированной.
В экосистеме Lottie Web встречаются подходы, основанные на внешних библиотеках:
В таких схемах Lottie становится лишь визуальным слоем, а аудио полностью контролируется отдельным движком.
Lottie позволяет отслеживать определённые события:
complete)enterFrame)Однако эти события не содержат аудио-семантики. Отсутствуют:
Это закрепляет разделение между визуальной и звуковой логикой на уровне API.
Отсутствие аудио приводит к специфическим архитектурным решениям:
Такое разделение усиливает модульность, но увеличивает сложность интеграции комплексных мультимедийных сценариев.
Вся анимация Lottie дискретна и зависит от FPS. В отличие от аудио, которое является непрерывным сигналом, визуальное представление строится на дискретных состояниях.
t =
Это означает, что минимальный шаг времени ограничен частотой кадров, тогда как аудио может изменяться на уровне сэмплов (обычно 44.1 кГц и выше). Разница в масштабах делает прямую интеграцию невозможной без промежуточной синхронизационной логики.
В реальных приложениях Lottie Web и аудио существуют как два независимых подсистемных слоя:
Связь между ними строится через JavaScript-контроллер, который преобразует временные координаты аудио в кадровую шкалу анимации и обратно, компенсируя задержки и дрейфы исполнения.