Експорт AE-анімацій у Lottie: аудит, оптимізація, інтеграція

Ви витратили тижні на створення плавної анімації онбордингу в 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) з такою підготовкою:

1. Конвертуємо всі expression в keyframes: Animation → Keyframe Assistant → Convert Expression to Keyframes.
2. Об'єднуємо Shape-шари, де можливо — менше шарів = менший JSON.
3. Прибираємо невикористовувані шари та приховані precomp-и.
4. Растеризуємо bitmap-зображення або замінюємо векторними аналогами (bitmap в Lottie — окремий файл або base64, сильно погіршує розмір).
5. Перевіряємо 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% менше місця в кеші, що особливо важливо для додатків з обмеженим сховищем.

Інтеграція в мобільні проєкти

Для двосостоянь (toggle) використовуємо setMinAndMaxProgress — відтворюємо тільки потрібний діапазон кадрів, що економить ресурси.

Етапи роботи

Що входить у нашу послугу

• Аудит AE-проєкту на сумісність з Lottie.
• Експорт через Bodymovin з попередньою підготовкою.
• Оптимізація JSON (стиснення до 50%).
• Інтеграція на одну платформу (iOS/Android/Flutter) з тестуванням на реальних пристроях.
• Гарантія відповідності вимогам App Store Review Guidelines та Play Console.
• Документація по відтворенню та підтримка після впровадження.

Строки та умови співпраці

Експорт та інтеграція однієї анімації займають від 1 дня. Для комплексних проєктів (5+ анімацій) строки розраховуємо індивідуально. Зв'яжіться з нами — ми безкоштовно оцінимо ваш AE-проєкт і запропонуємо оптимальне рішення під ключ. Отримайте консультацію прямо зараз і переконайтеся, що ваша анімація працюватиме ідеально на всіх пристроях. Замовте аудит AE-проєкту — це перший крок до безшовної анімації у вашому мобільному додатку.

Анімації в мобільних додатках: Lottie, Rive, Spring та Reanimated

Ми зробили анімації для десятків проєктів — від ігрових інтерфейсів до bank-grade додатків. Знаємо, як змусити 120 fps працювати навіть на Android з ProGuard. Якщо анімація смикається — проблема не в інструменті, а у виборі підходу. Нижче покажемо, як обирати між Lottie та Rive, чому Spring physics перемагає UIView.animate, і як Reanimated 3 вичавлює 60 fps на старих пристроях. Отримайте консультацію щодо вашого проєкту — оцінимо анімаційний шар безкоштовно.

Чому UIView.animate ламається на складних сценаріях

UIView.animate(withDuration:) та ObjectAnimator на Android — правильний вибір для простих переходів. Але щойно анімація стає інтерактивною (користувач тягне елемент, швидкість залежить від жесту), потрібен інший підхід.

На iOS для gesture-driven анімації правильний інструмент — UIViewPropertyAnimator. Він дозволяє призупиняти, обертати та модифікувати анімацію в процесі. Типовий кейс: bottom sheet, який слідує за пальцем, продовжує рух з інерцією після відпускання та притягується до найближчої позиції. З UIView.animate це або не працює зовсім, або потребує ручної фізики.

У SwiftUI withAnimation працює з коробки, але інтерактивність обмежена — немає прямого аналога UIViewPropertyAnimator. Обхідний шлях: .gesture(DragGesture()) + @GestureState + явне обчислення позиції. Або йдемо в SwiftUI Animations API з Animation.spring(duration:bounce:).

Як React Native Reanimated обходить JS-міст

React Native Animated API виконує анімації в JS thread — це джерело джанка при завантаженому bridge. Reanimated 3 вирішує проблему через worklets: функції, які компілюються та виконуються прямо на UI thread без перетину JS-моста.

Приклад: parallax scroll header. На базовому Animated.Value при швидкому скролі FPS падає до 40-45 на mid-range Android. На Reanimated з useAnimatedScrollHandler — стабільні 60 fps, тому що весь перерахунок позиції відбувається на UI thread.

Reanimated 3 з useSharedValue, useAnimatedStyle та withSpring/withTiming — стандарт для анімацій у React Native. Gesture Handler v2 щільно інтегрований: useAnimatedGestureHandler замінює PanResponder і теж працює на UI thread.

Чому Lottie може знижувати FPS на Android і як це виправити

Lottie експортує After Effects анімацію в JSON. На iOS з lottie-ios працює стабільно, але на Android при складних ефектах (blur, частинки, градієнти) векторний рендеринг через Canvas призводить до просадок до 30-40 fps. Рішення — або спрощувати анімацію, або використовувати Rive з апаратним рендерингом. Ми тестували: Lottie-файл з розмиттям 5 МБ на Xiaomi Redmi Note 10 дає 48 fps, аналогічна анімація в Rive (.riv 400 КБ) — 60 fps. Rive працює в 1.25 раза швидше на однаковому пристрої, а при складних ефектах — до 4 разів легше за розміром.

Як вибрати між Lottie та Rive для вашого проєкту?

Обидва інструменти вирішують задачу «дизайнер робить анімацію, розробник додає файл». Але принципово по-різному.

Вибір простий: статична декоративна анімація (splash screen, onboarding ілюстрації) — Lottie. Інтерактивні UI-елементи зі станами — Rive. Наприклад, кнопка з hover, pressed, loading, success — одна Rive-анімація з чотирма станами проти чотирьох окремих Lottie-файлів. Це зменшує обсяг коду та спрощує підтримку.

Як впровадити анімації Lottie за 4 кроки?

1. Експорт з After Effects через плагін Bodymovin — отримуєте .json.
2. Додавання файлу до ресурсів проєкту (assets або drawable).
3. Ініціалізація плеєра — в iOS використовуйте LOTAnimationView, в Android — LottieAnimationView.
4. Запуск з параметрами — loopMode, animationSpeed, contentMode. Для складних сценаріїв — кастомний AnimationListener.

На практиці цей підхід працює, але потребує контролю версій Lottie-файлів. Ми рекомендуємо версіонувати їх разом з кодом і тестувати на цільових пристроях.

Spring-фізика та Hero transitions: як досягти природності

Spring-анімація відчувається природньо тому що імітує фізику — масу, жорсткість і демпфування. У SwiftUI: Animation.spring(response:dampingFraction:). В Android Compose: spring(dampingRatio = Spring.DampingRatioMediumBouncy).

Для Hero-переходів (елемент «перелітає» між екранами) на iOS використовуємо UIViewControllerTransitioningDelegate + UIViewControllerAnimatedTransitioning. У SwiftUI — matchedTransitionSource + navigationTransition(.zoom). На Flutter — Hero віджет, який працює з коробки.

Як уникнути типових помилок у Hero transitions?

Анімація починається нормально, але на цільовому екрані елемент «стрибає» в фінальну позицію. Причина — AutoLayout constraints застосовуються до завершення анімації. Рішення: layoutIfNeeded() в блоці анімації або використання transform замість frame-змін. На Flutter — перевіряйте HeroFlightShuttleConfiguration. Також слідкуйте за VSync: на Android при 90 Гц дисплеї Hero-перехід може виглядати смиканим, якщо не виставлений Choreographer.

Таблиця: Строки виконання та типові сценарії

Що входить в роботу: анімаційний шар під ключ

• Інтеграція Lottie/Rive-файлів в дизайн-систему
• Код gesture-driven переходів (bottom sheets, drawers, каруселі)
• Тестування на реальних пристроях (iOS, Android)
• Документація з анімацій (архітектура, ключі станів)
• Підтримка при оновленні дизайну (гарантія 30 днів)

У нас 5+ років досвіду в мобільній розробці, понад 30 проєктів з анімаціями, сертифіковані iOS/Android розробники. Замовте анімації під ключ — перша консультація безкоштовна. Напишіть нам у месенджер, щоб узгодити деталі.

Apple Developer Documentation – UIKit Animations використовується як базова специфікація.