Інтеграція Lottie-анімацій у мобільні додатки
Дизайнер передав файл .json з After Effects через плагін Bodymovin. Здається простим: додайте LottieAnimationView до layout, вкажіть шлях до файлу, готово. Насправді перше тестування показує: анімація тремтить на Xiaomi з Android 9, не відтворюється на Samsung з API 21, а на iOS споживає 40 МБ на одному екрані завантаження.
Що йде не так з базовою інтеграцією
lottie-android з версії 6.x вимагає мінімум API 21, але повна підтримка ефектів Bodymovin тільки починається з API 26+. Градієнти, маски, track mattes—на API 21–25, деякі ефекти рендеруються через Canvas замість апаратного прискорення. Результат: FPS падає з 60 до 15 на середньорівневих пристроях зі складною анімацією.
iOS має подібну пастку: lottie-ios 4.x використовує CoreAnimation layers для більшості ефектів, але з merge paths або складними масками переходить на CALayer з програмним рендерингом. Це не очевидно з документації—ви це розумієте, коли Instruments показують CoreGraphics замість Metal у використанні GPU.
Іншим джерелом проблем є розмір файлу .json. Трьоекранна анімація адаптації може важити 800 КБ–2 МБ, якщо дизайнер забув видалити невикористовувані ресурси або експортував з растровими зображеннями всередину JSON (base64-encoded). Розбір двомегабайтного JSON на головному потоці під час запуску спричиняє помітну затримку холодного старту.
Правильна інтеграція
Android (Kotlin):
// build.gradle
implementation "com.airbnb.android:lottie:6.4.0"
val animationView = LottieAnimationView(context)
animationView.setAnimation(R.raw.loading_animation) // з res/raw
animationView.repeatCount = LottieDrawable.INFINITE
animationView.enableMergePathsForKitKatAndAbove(true) // API 19+
animationView.play()
enableMergePathsForKitKatAndAbove(true) дозволяє програмний рендеринг merge paths на старіших API—без цього деякі анімації просто не відображаються правильно. Для критичних за продуктивністю випадків використовуйте setRenderMode(RenderMode.HARDWARE) для примусового апаратного прискореного рендерингу.
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))
Оптимізація JSON: перед інтеграцією запустіть через LottieFiles Optimizer або CLI lottie-compress. Типовий результат — скорочення розміру на 40–60% без втрати якості. Замініть растрові зображення всередину JSON зовнішніми посиланнями на файли через imagesDictionary.
Flutter:
// pubspec.yaml: lottie: ^3.1.0
Lottie.asset(
'assets/animations/loading.json',
repeat: true,
fit: BoxFit.contain,
)
У Flutter LottieBuilder кешує декодований LottieComposition—важливо переповторно використовувати через LottieComposition.cache, коли одна анімація з'являється кілька разів.
Час розробки
Базова інтеграція однієї Lottie-анімації на одну платформу займає 2–3 години, включаючи тестування та оптимізацію. Кілька анімацій або інтеграція на обидві платформи з контролем через код (пауза, перемотка, зворотні виклики завершення) займає від半 дня до дня. Вартість розраховується індивідуально.