Работа с конвертацией в экосистеме Lottie Web почти всегда начинается не с самого JavaScript, а с подготовки исходных анимаций в сторонних инструментах. Основная идея формата Lottie заключается в том, что анимация не рендерится в видео или растровые кадры, а описывается JSON-структурой, которая затем интерпретируется движком на стороне клиента. Поэтому ключевая задача конвертации — перевести визуальные ключевые кадры, слои и эффекты в ограниченный набор поддерживаемых конструкций.
Наиболее распространённый сценарий — использование Adobe After Effects вместе с плагином Bodymovin. Именно этот путь стал де-факто стандартом для генерации Lottie-анимаций.
Bodymovin выполняет сериализацию композиции After Effects в JSON-файл, который затем интерпретируется Lottie Web.
Процесс включает несколько стадий:
Ключевой момент заключается в том, что не вся функциональность After Effects может быть корректно преобразована. Поддерживаются в основном:
Не поддерживаются или ограниченно поддерживаются:
Это ограничение напрямую влияет на архитектуру исходного проекта: анимации приходится проектировать с учётом будущей конвертации.
После экспорта Bodymovin формируется JSON-структура, которая является ядром дальнейшей работы.
Типичная структура включает:
assets — внешние ресурсы (изображения, спрайты)layers — список слоёв композицииfr — frame rateip / op — начало и конец анимацииw / h — размеры композицииddd — признак 3D-слоёв (ограниченно
поддерживается)Каждый слой содержит:
ty — тип слоя (shape, image, text)ks — transform propertiesshapes — векторные командыao — auto-orientationind — порядок слояПонимание этой структуры критично при любой пост-конверсионной обработке, например, при оптимизации или динамической модификации анимации в runtime.
Отдельное направление — преобразование SVG-анимаций в Lottie. Этот процесс менее стандартизирован, но активно используется в веб-разработке.
SVG сам по себе уже является векторным форматом, однако его анимационные возможности (SMIL, CSS animations, JS-driven animations) не совпадают с моделью Lottie.
Основные подходы:
SVG можно импортировать в Adobe After Effects, где он преобразуется в Shape Layers. Далее применяется стандартный экспорт через Bodymovin.
Проблема заключается в том, что:
Существуют инструменты, которые пытаются напрямую преобразовать SVG → Lottie JSON. Они работают по принципу маппинга:
Однако такие конвертеры ограничены:
Прямая конвертация растровых форматов (GIF, MP4, WebM) в Lottie технически противоречит самой идеологии формата, поскольку Lottie — векторно-описательная система.
Тем не менее существуют обходные подходы:
Каждый кадр видео разбивается на векторные контуры:
После этого строится псевдо-векторная анимация.
Минусы:
GIF разбивается на набор изображений, которые затем используются как image assets внутри Lottie:
Этот метод не создаёт истинно векторную анимацию, но позволяет интегрировать растровые источники.
Современные плагины для Figma позволяют экспортировать анимации в Lottie через промежуточный слой JSON.
Процесс обычно включает:
Проблемы:
Часто результат требует ручной доработки в After Effects перед финальным экспортом.
CSS keyframes не имеют прямого соответствия Lottie, однако возможна частичная трансформация:
Сложности возникают при:
Преобразование обычно выполняется через промежуточное представление keyframe timeline.
При любом типе преобразования важно учитывать фундаментальные ограничения формата:
Это означает, что не все визуальные эффекты могут быть перенесены напрямую.
Наиболее критичные потери происходят при:
Сгенерированный JSON часто требует оптимизации:
Также часто применяется постобработка:
В runtime Lottie Web чувствителен к размеру и глубине структуры, поэтому оптимизация напрямую влияет на FPS и время загрузки.
Разные версии Bodymovin и Lottie могут генерировать несовместимые JSON-структуры:
Это требует проверки:
Проверка корректности конвертации обычно включает:
Особое внимание уделяется:
Любое отклонение в этих параметрах может привести к заметному визуальному расхождению с оригиналом.
В production-среде часто выстраивается pipeline:
Такой подход позволяет отделить процесс дизайна от интеграции в frontend и минимизировать ручные ошибки при обновлениях анимаций.