Создание Lottie-анимаций для экранов мобильного приложения
Дизайнер показывает в Figma красивый онбординг с плавно движущимися иллюстрациями. Вопрос один: как это будет сделано? «Анимация через Lottie» — звучит просто. На деле между статичной иллюстрацией в Figma и рабочим .json файлом, который одинаково выглядит на iPhone SE и Samsung A03, лежит нетривиальная работа.
Что нужно решить до старта After Effects
Lottie рендерит векторную графику через Bodymovin-экспортер. Это значит: растровые текстуры, эффекты Photoshop, layer styles (outer glow, drop shadow через layer style) — либо не экспортируются, либо конвертируются в растр и раздувают .json до мегабайт.
До начала анимации согласуем с дизайнером список ограничений:
- Только векторные слои (Shape Layers, не растровые)
- Тени — через отдельный Shape Layer с opacity, не через
Drop Shadowэффект - Градиенты — Linear или Radial, без Angle/Diamond градиентов (не поддерживаются Bodymovin корректно)
- Шрифты — конвертируем в кривые через
Create Outlinesв Illustrator перед импортом в AE - Merge Paths — используем осторожно, на Android API <26 требует программного рендеринга
Процесс создания
Начинаем в Adobe Illustrator: готовим или адаптируем иллюстрацию. Каждый анимируемый элемент — отдельный именованный слой. Слои группируем логически: background, character, character/head, character/hands, foreground. Иерархия важна — в After Effects она станет иерархией анимируемых объектов.
Импортируем в After Effects через File → Import → Adobe Illustrator. Включаем Create Composition с опцией Retain Layer Sizes. В результате каждый Illustrator-слой становится отдельным AE-слоем с сохранёнными размерами и позициями.
Анимируем через keyframes. Для мобильного UI ключевые принципы:
Timing: основная анимация экрана онбординга — 1.5–2.5 секунды. Дольше — пользователь ждёт. Используем Graph Editor для настройки easing: вход в Ease In (начало медленно, ускоряется), выход Ease Out (замедление к концу). Для иллюстраций это плавнее, чем линейная интерполяция.
Stagger: элементы появляются не одновременно, а с offset 0.1–0.15 секунды. Фон → основной элемент → детали → текст. Создаём ощущение глубины без 3D.
Loop: если анимация зацикленная (loading, idle state) — делаем так, чтобы первый и последний кадр совпадали или переход был незаметен. Для Lottie лучше не использовать pingpong loop — реализуется в runtime, но поведение чуть отличается на iOS и Android.
После анимации устанавливаем плагин Bodymovin (бесплатный, GitHub: airbnb/lottie-web). Экспортируем через File → Scripts → Bodymovin. В настройках: Glyphs отключаем (если шрифты конвертированы), Assets → Embed включаем только если есть внешние растровые изображения и вы готовы к увеличению размера.
Оптимизация после экспорта
Сырой .json из After Effects часто содержит избыточные данные: лишние keyframes на неизменных свойствах, округлённые числа с 6+ знаками после запятой.
Прогоняем через LottieFiles Optimizer — убирает до 50% размера. Дополнительно вручную проверяем json на наличие refId assets: если там base64-строки с изображениями — заменяем на внешние файлы или растеризуем в Illustrator иначе.
Тестируем через LottieFiles preview (web) и официальное приложение на реальных устройствах. Именно на реальных: эмулятор не показывает FPS drop на сложных масках.
Типичные ошибки при создании
Анимация в AE выглядит идеально, но в Lottie-превью части элементов исчезают или меняют позицию. Причина — Track Matte слои или Pre-compose с неправильными настройками. Luma Matte не поддерживается Bodymovin — только Alpha Matte.
Gradient fill работает, но в runtime цвет неправильный. Часто — AE создаёт gradient с Colorspace: Linear RGB, а Lottie интерпретирует как sRGB. Исправляется в настройках Color Management проекта AE.
Сроки
Анимация одного экрана онбординга (иллюстрация готова): 1–2 дня включая оптимизацию и тестирование. Полный онбординг из 3–5 экранов с взаимосвязанными элементами: 3–5 дней. Стоимость рассчитывается индивидуально после оценки сложности иллюстраций и числа анимируемых состояний.