Екпорт анімацій з 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-проекту, підготовку, експорт, оптимізацію та інтеграцію на одну платформу.