Базовые требования к проекту в After Effects

Корректная работа анимаций в Lottie Web начинается с грамотной подготовки проекта в Adobe After Effects. Основное требование — использование поддерживаемых функций и строгая организация структуры композиции.

  • Размер композиции задаётся фиксированно (например, 1920×1080 или 512×512), без последующего масштабирования средствами браузера
  • Частота кадров (Frame Rate) должна быть постоянной, чаще всего используется 30 fps
  • Длительность композиции ограничивается разумными пределами — слишком длинные анимации увеличивают размер JSON-файла и нагрузку на браузер

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

Поддерживаемые типы слоёв

Lottie Web через плагин Bodymovin экспортирует только определённые типы слоёв:

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

  • Shape Layers (векторные формы)
  • Solid Layers
  • Text Layers
  • Null Objects (для анимации и привязок)
  • Pre-compositions (с ограничениями)

Ограниченно поддерживаются:

  • Image Layers (растровые изображения)
  • Маски (в простых случаях)

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

  • 3D-слои
  • Камеры и источники света
  • Adjustment Layers
  • Effects (за редкими исключениями)

Использование неподдерживаемых элементов приводит к потере части анимации или ошибкам при экспорте.

Векторная графика и Shape Layers

Предпочтение всегда отдаётся Shape Layers, поскольку:

  • Они полностью поддерживаются Lottie
  • Обеспечивают минимальный размер итогового JSON
  • Масштабируются без потери качества

При импорте из Illustrator важно:

  • Конвертировать слои в Shape Layers (Create Shapes from Vector Layer)
  • Удалять лишние группы и вложенности
  • Проверять корректность путей (paths)

Сложные векторные структуры необходимо упрощать:

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

Анимации и ключевые кадры

Lottie корректно обрабатывает базовые типы анимации:

  • Position
  • Scale
  • Rotation
  • Opacity
  • Path (анимация формы)
  • Fill и Stroke (цвет, толщина)

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

  • Использовать простые easing-функции (Bezier)
  • Избегать выражений (Expressions) — поддержка ограничена
  • Не применять сложные зависимости между слоями

Если используются выражения, необходимо проверить их поддержку в Bodymovin или заменить на bake-анимацию (преобразование в ключевые кадры).

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

Text Layers поддерживаются, но с ограничениями:

  • Шрифты должны быть доступны в браузере или встроены
  • Не все свойства текста экспортируются (например, некоторые стили)
  • Анимация текста лучше выполняется через transform-свойства

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

  • Конвертировать текст в Shape Layers, если важна точная визуальная идентичность
  • Избегать динамических текстовых эффектов

Изображения и ассеты

Использование растровых изображений возможно, но нежелательно:

  • Увеличивается размер JSON или подключаемых ассетов
  • Теряется масштабируемость
  • Требуется отдельная загрузка ресурсов

Если изображения необходимы:

  • Оптимизировать их размер и формат (PNG/JPG)
  • Использовать минимальное разрешение
  • Проверять пути загрузки в Bodymovin

Прекомпозиции (Pre-compositions)

Пре-композиции позволяют структурировать проект, но требуют аккуратного использования:

  • Поддерживаются вложенные композиции
  • Все вложенные элементы должны соответствовать требованиям Lottie
  • Не допускается использование Time Stretch или Time Remapping без проверки

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

  • Ограничивать глубину вложенности
  • Использовать прeкомпозиции только для логической группировки

Маски и трим-пути

Маски (Masks):

  • Поддерживаются только базовые режимы (Add)
  • Сложные режимы наложения не работают

Trim Paths:

  • Полностью поддерживаются
  • Широко используются для анимации линий и контуров
  • Являются предпочтительным инструментом для анимации stroke

Цвета и стили

  • Поддерживаются Fill и Stroke
  • Градиенты работают, но могут увеличивать размер JSON
  • Blend Modes поддерживаются частично или не поддерживаются вовсе

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

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

Ограничения и оптимизация

Ключевые ограничения при подготовке проекта:

  • Размер JSON-файла напрямую влияет на производительность
  • Большое количество слоёв замедляет рендеринг
  • Сложные path-анимации увеличивают нагрузку

Методы оптимизации:

  • Удаление невидимых слоёв
  • Сведение одинаковых элементов
  • Упрощение анимаций
  • Минимизация количества ключевых кадров

Структура проекта

Грамотная организация проекта облегчает экспорт и поддержку:

  • Именование слоёв должно быть осмысленным
  • Группировка элементов по логике
  • Отсутствие «мусорных» слоёв
  • Чёткое разделение анимируемых блоков

Пример структуры:

  • BG — фон
  • Icon_Main — основной элемент
  • Anim_Lines — анимация линий
  • Text_Label — текст

Проверка перед экспортом

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

  • Убедиться, что используются только поддерживаемые элементы
  • Проверить анимации на корректность
  • Удалить неиспользуемые ресурсы
  • Просмотреть предпросмотр через Bodymovin

Ошибки на этом этапе значительно проще исправить, чем после интеграции в веб-приложение.

Совместимость с Lottie Web

After Effects не является нативной средой для веб-анимаций, поэтому:

  • Не все возможности программы доступны в Lottie
  • Требуется адаптация под ограничения JSON-формата
  • Визуальное совпадение может отличаться от оригинала

Практика показывает, что лучшие результаты достигаются при проектировании анимации с учётом ограничений Lottie с самого начала, а не при попытке адаптации сложных AE-проектов.

Оглавление