Дизайнер передав .json файл з After Effects через Bodymovin-плагін. Ми з командою додали LottieAnimationView в layout, вказали шлях до файлу — здавалося б, готово. На практиці перше ж тестування показало: анімація смикається на Xiaomi з Android 9, не відтворюється на Samsung з API 21, а на iOS жере 40 МБ пам'яті на одному екрані завантаження. Без досвіду інтеграції такі помилки займають дні налагодження. Наші інженери з 5+ річним досвідом вирішували подібні проблеми в десятках проектів. Гарантуємо сумісність з усіма пристроями, сертифікований досвід наших інженерів підтверджують 5+ років роботи та десятки успішних проектів. За 5 років роботи ми інтегрували понад 500 Lottie-анімацій у різних проектах.
Типові помилки при інтеграції Lottie
Перша — використання неоптимізованого JSON. Дизайнери часто експортують анімацію з надлишковими шарами, невикористовуваними assets та растровими зображеннями (base64) всередині файлу. Типовий розмір такої анімації — 800 КБ–2 МБ. Парсинг такого JSON на головному потоці викликає помітну затримку cold start — до 200 мс на середніх пристроях.
Друга — ігнорування апаратних можливостей. Складні ефекти Bodymovin (merge paths, градієнти, track mattes) на Android API 21–25 рендеряться програмно через Canvas, а не апаратно. FPS падає з 60 до 15 на mid-range пристроях. На iOS аналогічна ситуація з merge paths.
Третя — відсутність кешування. У Flutter, якщо не перевикористовувати LottieComposition, кожне завантаження декодує JSON заново, що збільшує час відмальовки на 30–50%.
Чому Lottie-анімації смикаються на старих пристроях?
lottie-android починаючи з версії 6.x вимагає мінімум API 21, але реальна підтримка ефектів Bodymovin повна лише з API 26+. Градієнти, маски, track mattes — на API 21–25 частина ефектів рендериться програмно через Canvas замість апаратного прискорення. Результат — просадка FPS з 60 до 15 на mid-range пристроях при складній анімації.
На iOS аналогічна пастка: lottie-ios 4.x використовує CoreAnimation layers для більшості ефектів, але при наявності merge paths або складних масок перемикається на CALayer з програмним рендерингом. Це не очевидно з документації — розумієш тільки коли бачиш в Instruments CoreGraphics замість Metal в GPU зайнятості.
Другий сценарій проблем — розмір .json файлу. Анімація онбордингу з трьох екранів може важити 800 КБ–2 МБ, якщо дизайнер забув прибрати невикористовувані assets або експортував з растровими зображеннями всередині JSON (base64-encoded). Парсинг двомегабайтного JSON на main thread при запуску — помітна затримка на cold start.
Як оптимізувати JSON без втрати якості?
Перед інтеграцією прогоняємо через lottie-compress CLI або LottieFiles Optimizer. Типовий результат — 40–60% зменшення розміру без втрати якості. Растрові зображення всередині JSON замінюємо посиланнями на зовнішні файли через imagesDictionary. Налаштування Lottie включає вибір режиму рендерингу та кешування. Це особливо важливо для екранів завантаження та онбордингу, де розмір файлу безпосередньо впливає на швидкість старту. В одному проекті ми зменшили анімацію з 1.8 МБ до 760 КБ, що скоротило час завантаження на 30%.
Порівняння Lottie з альтернативами
| Характеристика | Lottie | APNG | Rive |
|---|---|---|---|
| Розмір файлу | У 10 разів менше APNG | Великий | Середній |
| Якість при масштабі | Векторне (без втрат) | Растрове (пікселі) | Векторне |
| Підтримка коду | Так (пауза, перемотка) | Ні | Обмежена |
| Продуктивність | Апаратне прискорення | CPU-intensive | GPU-прискорення |
Lottie в 10 разів компактніший за APNG при тій самій візуальній якості — це найкращий вибір для анімацій завантаження. Порівняно з Rive, Lottie займає в середньому у 2–3 рази менше місця.
Докладніше про фактори продуктивності
На iOS при використанні CoreAnimation складні ефекти можуть переключитися на програмний рендеринг, що знижує FPS. На Android примусове включення апаратного прискорення вирішує проблему на пристроях з API 21–25.
Покрокова інструкція з інтеграції
-
Оптимізація JSON. Перед інтеграцією обов'язково виконуємо стиснення (див. вище).
-
Android (Kotlin).
// build.gradle
implementation "com.airbnb.android:lottie:6.4.0"
val animationView = LottieAnimationView(context)
animationView.setAnimation(R.raw.loading_animation)
animationView.repeatCount = LottieDrawable.INFINITE
animationView.enableMergePathsForKitKatAndAbove(true) // API 19+
animationView.play()
enableMergePathsForKitKatAndAbove(true) включає програмний рендеринг merge paths на старих API — без цього частина анімацій просто не відображається коректно. Для критичних за продуктивністю випадків використовуємо setRenderMode(RenderMode.HARDWARE) — примусовий hardware-accelerated рендеринг.
- iOS (Swift).
// Package.swift або SPM: com.airbnb.ios/lottie-ios 4.x
import Lottie
let animationView = LottieAnimationView(name: "loading_animation")
animationView.loopMode = .loop
animationView.contentMode = .scaleAspectFit
animationView.play()
Для SwiftUI — LottieView з lottie-ios 4.2+:
LottieView(animation: .named("loading_animation"))
.playing(.toProgress(1, loopMode: .loop))
- Flutter.
// pubspec.yaml: lottie: ^3.1.0
Lottie.asset(
'assets/animations/loading.json',
repeat: true,
fit: BoxFit.contain,
)
У Flutter LottieBuilder кешує декодований LottieComposition — важливо перевикористовувати через LottieComposition.cache при множинних входженнях однієї анімації.
Що входить в роботу
| Етап | Результат |
|---|---|
| Аналіз анімації | Виявлення проблемних ефектів, оцінка складності |
| Оптимізація JSON | Стиснення, заміна растрових даних |
| Інтеграція на iOS/Android | Працююча анімація з керуванням через код |
| Тестування на реальних пристроях | Перевірка FPS та пам'яті на 10+ девайсах |
| Передача документації | Код, конфіги, інструкція по заміні анімацій |
Також ми навчаємо ваших розробників основам підтримки. Економія бюджету на наступних доробках — до 40%. На практиці це становить $500–$1,000 на типовому проекті. Наприклад, для проекту з 10 анімацій економія може сягати 40 000 грн.
Процес роботи
Починаємо з аналітики: розбираємо вихідний JSON, тестуємо на цільових пристроях. Потім проектуємо рішення — оптимізувати, розбити на частини або замінити формат. Далі інтеграція: додаємо код, налаштовуємо керування. Після — тестування на 5+ сценаріях, включаючи слабкі девайси. Завершуємо деплоєм в App Store та Google Play з моніторингом.
Терміни та вартість
Базова інтеграція однієї Lottie-анімації на одну платформу — 2–3 години з урахуванням тестування та оптимізації. Якщо анімацій декілька або потрібна інтеграція на обидві платформи з керуванням через код (пауза, перемотка, callback по завершенню) — від півдня до дня. Вартість розраховується індивідуально. Зв'яжіться з нами для оцінки вашого проекту — проаналізуємо анімацію та запропонуємо оптимальне рішення. Отримайте консультацію з безкоштовним аналізом.