Интеграция 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 на 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.
Правильная интеграция
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) — принудительный 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))
Оптимизация JSON: перед интеграцией прогоняем через LottieFiles Optimizer или lottie-compress CLI. Типичный результат — 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 часа с учётом тестирования и оптимизации. Если анимаций несколько или нужна интеграция на обе платформы с управлением через код (пауза, перемотка, callback по завершению) — от полудня до дня. Стоимость рассчитывается индивидуально.