Дизайнер передал .json файл из After Effects через Bodymovin-плагин. Мы с командой добавили LottieAnimationView в layout, указали путь к файлу — казалось бы, готово. На практике первое же тестирование показало: анимация дёргается на Xiaomi с Android 9, не воспроизводится на Samsung с API 21, а на iOS жрёт 40 МБ памяти на одном экране загрузки. Без опыта интеграции такие ошибки занимают дни отладки. Наши инженеры с 5+ летним опытом решали подобные проблемы в десятках проектов.
Типичные ошибки при интеграции 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. Это особенно важно для экранов загрузки и онбординга, где размер файла напрямую влияет на скорость старта. В одном проекте мы уменьшили анимацию с 1.8 МБ до 760 КБ, что сократило время загрузки на 30%.
Сравнение Lottie с альтернативами
| Характеристика | Lottie | APNG | Rive |
|---|---|---|---|
| Размер файла | В 10 раз меньше APNG | Большой | Средний |
| Качество при масштабе | Векторное (без потерь) | Растровое (пиксели) | Векторное |
| Поддержка кода | Да (пауза, перемотка) | Нет | Ограниченная |
| Производительность | Аппаратное ускорение | CPU-intensive | GPU-ускорение |
Lottie в 10 раз компактнее APNG при том же визуальном качестве — это лучший выбор для анимаций загрузки.
Подробнее о факторах производительности
На 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 на типовом проекте.
Процесс работы
Начинаем с аналитики: разбираем исходный JSON, тестируем на целевых устройствах. Затем проектируем решение — оптимизировать, разбить на части или заменить формат. Далее интеграция: добавляем код, настраиваем управление. После — тестирование на 5+ сценариях, включая слабые девайсы. Завершаем деплоем в App Store и Google Play с мониторингом.
Сроки и стоимость
Базовая интеграция одной Lottie-анимации на одну платформу — 2–3 часа с учётом тестирования и оптимизации. Если анимаций несколько или нужна интеграция на обе платформы с управлением через код (пауза, перемотка, callback по завершению) — от полудня до дня. Стоимость рассчитывается индивидуально. Свяжитесь с нами для оценки вашего проекта — проанализируем анимацию и предложим оптимальное решение. Получите консультацию с бесплатным анализом.