Ви витратили тижні на створення плавної анімації онбордингу в After Effects, але після експорту через Bodymovin JSON важить 3 МБ, а на старих Android-пристроях анімація гальмує? Ми спеціалізуємося на експорті AE-анімацій у Lottie: проводимо аудит, оптимізацію та інтеграцію на iOS, Android і Flutter. Типовий сценарій: expression для bounce не експортується, а маски з Luminance matte перетворюються на порожні прямокутники. Наша методика за 5 кроків перетворює сирий AE-проєкт на готовий до інтеграції JSON розміром до 200 КБ — це в 4 рази швидше завантаження відео тієї ж сцени. Ми обробили понад 50 проєктів, від мікроанімацій до комплексних онбордингів на 10 екранів.
Типові проблеми при експорті AE в Lottie
Більшість помилок виникають через непідтримувані функції After Effects. Найчастіші:
- Expressions — Lottie підтримує тільки wiggle; решту expression потрібно конвертувати в keyframes, інакше анімація не відтворюється.
- 3D-шари — Lottie працює тільки в 2D, всі тривимірні трансформації ігноруються.
- Blend modes — на Android деякі режими накладання відображаються некоректно (наприклад, Overlay).
- Ефекти — Glow, Drop Shadow та інші з панелі Effects не підтримуються; їх потрібно замінювати на Layer Styles або Shape-шари.
- Растрові зображення — якщо всередині анімації є bitmap, розмір JSON різко зростає, а на слабких пристроях можливі фризи.
За статистикою наших проєктів, 70% AE-проєктів потребують доопрацювань перед експортом. Тому аудит — обов'язковий перший крок.
Які AE-функції несумісні з Lottie?
Найчастіший сценарій провалу — використання expressions для динамічної поведінки або ефекту Glow через панель Effects. Після експорту анімація або ламається, або виглядає інакше. Ми перевіряємо кожен шар, замінюємо непідтримувані ефекти аналогами з Shape-шарів або Layer Styles. Наприклад, в одному проєкті з 12 екранами онбордингу ми замінили 8 expressions на keyframes — анімація стала відтворюватися на Android 9 без жодного фреймдропу.
Як оптимізувати JSON для мобільних додатків?
Стандартний Bodymovin-експорт без оптимізації дає роздутий JSON. Ми прогоняємо його через lottie-minify або LottieFiles Optimizer — стиснення становить 30–50% від початкового розміру без втрати якості. Наприклад, анімація онбордингу на 5 екранів після оптимізації важить 150–200 КБ, що в 3 рази менше початкового. Це критично для швидкого завантаження додатка та економії трафіку користувача.
Розмір JSON безпосередньо впливає на час завантаження, парсингу та споживання пам'яті. Оптимізований JSON (150-200 КБ замість 500+ КБ) скорочує час десеріалізації на 40% і знижує ризик фреймдропів на пристроях з 2 ГБ RAM. Для додатків з десятками анімацій (онбординг, лоадери, мікроінтеракції) це різниця між плавним UX і підгальмовуваннями. Lottie — кроссплатформна бібліотека анімацій від Airbnb.
Як ми готуємо анімацію до експорту
Використовуємо плагін Bodymovin (LottieFiles AE Extension) з такою підготовкою:
- Конвертуємо всі expression в keyframes:
Animation → Keyframe Assistant → Convert Expression to Keyframes. - Об'єднуємо Shape-шари, де можливо — менше шарів = менший JSON.
- Прибираємо невикористовувані шари та приховані precomp-и.
- Растеризуємо bitmap-зображення або замінюємо векторними аналогами (bitmap в Lottie — окремий файл або base64, сильно погіршує розмір).
- Перевіряємо Preview в LottieFiles Web Player до фінального експорту.
Після експорту — перевірка через LottieFiles Preview App на реальних пристроях iOS та Android. Часто виявляється: на Android деякі blend modes дають неправильний колір, а gradient strokes рендеряться інакше — це ми виправляємо до передачі вам.
Приклад з практики. Клієнт приніс AE-проєкт онбордингу з 5 екранів. Початковий розмір JSON — 2.8 МБ. Після оптимізації (видалення дубльованих шарів, конвертація expression, заміна bitmap на вектор) — 190 КБ. На старому Samsung Galaxy A5 анімація відтворювалася без жодного фреймдропу. Час завантаження по 3G скоротився з 12 до 2 секунд.
Чому оптимізація JSON критична для мобільних додатків?
Кожен зайвий кілобайт уповільнює завантаження та збільшує витрату батареї. Наше тестування показало: анімація 200 КБ декодується за 8 мс на iPhone 11, а 800 КБ — за 35 мс. Різниця в 4+ рази за часом, що критично при 10 анімаціях на екрані. Оптимізований JSON займає до 70% менше місця в кеші, що особливо важливо для додатків з обмеженим сховищем.
Інтеграція в мобільні проєкти
| Платформа | Бібліотека | Підключення |
|---|---|---|
| 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 — відтворюємо тільки потрібний діапазон кадрів, що економить ресурси.
Етапи роботи
| Етап | Тривалість | Результат |
|---|---|---|
| Аудит AE-проєкту | 1 день | Звіт по несумісним функціям, рекомендації |
| Експорт та оптимізація | 1 день | JSON розміром до 200 КБ, стиснення до 50% |
| Інтеграція на одну платформу | 1–2 дні | Робота на реальних пристроях, документування |
Що входить у нашу послугу
- Аудит AE-проєкту на сумісність з Lottie.
- Експорт через Bodymovin з попередньою підготовкою.
- Оптимізація JSON (стиснення до 50%).
- Інтеграція на одну платформу (iOS/Android/Flutter) з тестуванням на реальних пристроях.
- Гарантія відповідності вимогам App Store Review Guidelines та Play Console.
- Документація по відтворенню та підтримка після впровадження.
Строки та умови співпраці
Експорт та інтеграція однієї анімації займають від 1 дня. Для комплексних проєктів (5+ анімацій) строки розраховуємо індивідуально. Зв'яжіться з нами — ми безкоштовно оцінимо ваш AE-проєкт і запропонуємо оптимальне рішення під ключ. Отримайте консультацію прямо зараз і переконайтеся, що ваша анімація працюватиме ідеально на всіх пристроях. Замовте аудит AE-проєкту — це перший крок до безшовної анімації у вашому мобільному додатку.