Экспорт анимаций из After Effects в Lottie для мобильного приложения
Дизайнер сделал анимацию в After Effects — детальную, с несколькими слоями, эффектами и масками. Задача: чтобы она точно так же выглядела в мобильном приложении, весила разумно и не грузила процессор. Это не всегда тривиально: Lottie поддерживает не все AE-возможности, и неподготовленная анимация после экспорта либо отображается неправильно, либо весит 2 МБ.
Что поддерживает Lottie, а что нет
Поддерживается надёжно: Shape layers, Path animations, Trim paths, Fill/Stroke, Opacity, Position/Scale/Rotation, Masks, Solid layers, Precomps.
Поддерживается частично или с оговорками: Text layers (зависит от шрифта и платформы), Gradient fills (линейные — да, радиальные — проверять), Blend modes (некоторые не работают на Android).
Не поддерживается: Expressions сложнее wiggle, 3D-вращение (perspective), Effects (Glow, Drop Shadow через Effects panel — только через Layer Styles), некоторые типы масок (Luminance matte).
Самый частый сценарий провала: AE-аниматор использовал expressions для динамического поведения или применил Glow через Effects, и после экспорта анимация ломается или выглядит иначе. Аудит AE-проекта перед экспортом — обязательный шаг.
Процесс подготовки к экспорту
Используем плагин Bodymovin (он же LottieFiles AE Extension). Перед экспортом:
- Конвертируем все expression в keyframes:
Animation → Keyframe Assistant → Convert Expression to Keyframes - Mergeим Shape-слои, где возможно — меньше слоёв = меньший JSON
- Убираем неиспользуемые слои и скрытые precomp-ы
- Растрируем bitmap-изображения или заменяем векторными аналогами (bitmap в Lottie — отдельный файл или base64 внутри JSON, плохо для размера)
- Проверяем Preview в LottieFiles Web Player до финального экспорта
После экспорта — проверка через LottieFiles Preview App на реальных устройствах iOS и Android. Часто обнаруживается: на Android некоторые blend modes дают неправильный цвет, а gradient strokes рендерятся иначе.
Оптимизация размера
Стандартный Bodymovin-экспорт без оптимизации даёт раздутый JSON. Прогоняем через LottieFiles Optimizer или lottie-minify npm-пакет. Типичный результат: 30–50% от исходного размера без потери качества. Анимация онбординга на 5 экранов после оптимизации должна весить не более 150–200 КБ суммарно.
Интеграция в мобильный проект
iOS: lottie-ios через SPM. LottieAnimationView добавляется как обычный UIView. Для SwiftUI — LottieView из того же пакета.
Android: lottie-android через Gradle. LottieAnimationView в XML или LottieAnimation в Compose.
Flutter: пакет lottie. Lottie.asset('assets/animation.json') с контроллером для управления воспроизведением.
Для двусостоянных анимаций (например, toggle) используем setMinAndMaxProgress — воспроизводим только нужный диапазон кадров.
Срок работы: 1 день включает аудит AE-проекта, подготовку, экспорт, оптимизацию и интеграцию на одну платформу.