Экспорт анимации через Bodymovin

Bodymovin — плагин для Adobe After Effects, предназначенный для экспорта анимаций в формат JSON, который затем воспроизводится в браузере с помощью Lottie Web.

Установка осуществляется через встроенный менеджер расширений:

  • Через Adobe Creative Cloud → вкладка «Плагины»
  • Или вручную через установку расширения (ZXP)

После установки в After Effects появляется панель:

Window → Extensions → Bodymovin

Панель содержит список композиций, доступных для экспорта, и набор настроек.

Принцип работы экспорта

Bodymovin преобразует анимацию в структурированный JSON-файл, описывающий:

  • геометрию слоев (shapes)
  • трансформации (position, scale, rotation)
  • ключевые кадры
  • стили (цвет, обводка, заливка)
  • маски
  • текст (с ограничениями)
  • изображения (при необходимости)

Lottie Web интерпретирует этот JSON и воспроизводит его средствами SVG, Canvas или HTML.

Подготовка композиции к экспорту

Корректность результата напрямую зависит от структуры проекта.

Основные требования

1. Использование поддерживаемых типов слоев:

  • Shape Layers — полностью поддерживаются
  • Solid Layers — поддерживаются
  • Image Layers — поддерживаются
  • Text Layers — частично поддерживаются

2. Минимизация эффектов

Большинство эффектов After Effects не поддерживается. Рекомендуется избегать:

  • Glow
  • Blur (частично поддерживается)
  • 3D-эффекты
  • сторонние плагины

3. Работа с векторной графикой

Импорт из Adobe Illustrator предпочтителен, но:

  • необходимо конвертировать в Shape Layer
  • избегать сложных путей (paths)

4. Ограничения по 3D

Bodymovin работает только с 2D-композициями:

  • 3D-слои не экспортируются корректно
  • камеры и освещение игнорируются

Интерфейс панели Bodymovin

Панель содержит:

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

Дополнительные настройки:

  • Destination Folder — папка экспорта
  • Settings — расширенные параметры
  • Glyphs — обработка текста
  • Assets — управление изображениями

Настройки экспорта

Общие параметры

Include in JSON

Определяет, какие данные будут включены:

  • shapes
  • transforms
  • masks

Export Modes

  • SVG (по умолчанию)
  • Canvas
  • HTML

Выбор режима влияет на производительность и совместимость.

Настройки изображений

Если используются изображения:

  • Embed assets — встраивает изображения в JSON (Base64)
  • External assets — сохраняет отдельно

Рекомендация:

  • для веба — external assets (меньше размер JSON)
  • для standalone — embed

Работа с текстом

Текст может экспортироваться:

  • как editable text (ограниченная поддержка)
  • как shapes (полная совместимость)

Параметр:

Convert Text to Shapes

Плюсы преобразования в shapes:

  • точное отображение
  • отсутствие проблем со шрифтами

Минусы:

  • увеличение размера JSON
  • невозможность редактирования текста

Glyphs и шрифты

Bodymovin может экспортировать:

  • только используемые символы (glyphs)
  • или весь текст

Настройки:

  • включение glyphs уменьшает размер
  • важно для многоязычных проектов

Процесс экспорта

  1. Выбор композиции в списке
  2. Указание папки назначения
  3. Настройка параметров
  4. Нажатие Render

Результат:

  • JSON-файл
  • папка assets (если есть изображения)

Структура JSON-файла

Файл состоит из ключевых блоков:

Основные поля

{
  "v": "5.7.0",
  "fr": 30,
  "ip": 0,
  "op": 120,
  "w": 500,
  "h": 500,
  "layers": []
}
  • v — версия Bodymovin
  • fr — fps
  • ip / op — диапазон кадров
  • w / h — размеры
  • layers — список слоев

Слои (layers)

Каждый слой содержит:

{
  "ty": 4,
  "nm": "Shape Layer",
  "ks": {},
  "shapes": []
}

Типы слоев:

  • 0 — precomp
  • 2 — image
  • 4 — shape
  • 5 — text

Анимация

Ключевые кадры:

"k": [
  {
    "t": 0,
    "s": [0],
    "e": [100]
  }
]
  • t — время
  • s — стартовое значение
  • e — конечное значение

Оптимизация анимации

Уменьшение размера JSON

  • удаление лишних слоев
  • объединение shape-элементов
  • уменьшение количества ключевых кадров
  • использование trim paths вместо сложных масок

Упрощение путей

Сложные векторные пути увеличивают размер:

  • уменьшение точек (vertices)
  • упрощение кривых

Минимизация изображений

  • использовать SVG вместо PNG
  • оптимизировать размер изображений
  • избегать больших текстур

Частые проблемы при экспорте

Некорректное отображение

Причины:

  • неподдерживаемые эффекты
  • 3D-слои
  • expressions (частично поддерживаются)

Отсутствие анимации

  • expression не экспортировался
  • ключевые кадры отсутствуют
  • слой выключен (visibility)

Проблемы с текстом

  • отсутствует шрифт
  • текст не конвертирован в shapes
  • неверная кодировка

Поддержка expressions

Bodymovin частично поддерживает expressions:

Поддерживается:

  • базовая математика
  • transform-свойства

Не поддерживается:

  • сложная логика
  • внешние ссылки
  • плагины

Рекомендуется:

  • «запекать» анимацию в keyframes

Работа с Precompositions

Precomp экспортируется как отдельный слой:

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

Рекомендации:

  • минимальная вложенность
  • контроль размеров

Проверка результата

Перед использованием:

  • открыть JSON через Lottie Web

  • проверить:

    • синхронизацию
    • корректность цветов
    • плавность

Практические рекомендации

  • работать в 2D
  • избегать эффектов
  • использовать shape layers
  • конвертировать текст в shapes
  • оптимизировать пути
  • тестировать в браузере после каждого изменения

Интеграция результата

После экспорта JSON подключается через Lottie Web:

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

Архитектура связки Bodymovin + Lottie

  1. Анимация создаётся в After Effects
  2. Bodymovin экспортирует JSON
  3. Lottie Web интерпретирует JSON
  4. Браузер отрисовывает анимацию

Ограничения технологии

  • нет полноценного 3D
  • ограниченная поддержка эффектов
  • зависимость от структуры проекта
  • производительность падает при сложных сценах

Подход к построению анимации

Оптимальный workflow:

  • проектирование под Lottie с самого начала
  • использование простых форм
  • избегание «After Effects-специфичных» решений
  • регулярная проверка экспорта

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

Оглавление