Интеграция Lottie-анимаций в мобильное приложение

Дизайнер передал .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 в 10 раз компактнее APNG при том же визуальном качестве — это лучший выбор для анимаций загрузки.

Пошаговая инструкция по интеграции

1. Оптимизация JSON. Перед интеграцией обязательно выполняем сжатие (см. выше).

2. 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 рендеринг.

3. 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)) 

4. Flutter.

// pubspec.yaml: lottie: ^3.1.0 Lottie.asset( 'assets/animations/loading.json', repeat: true, fit: BoxFit.contain, ) 

В Flutter LottieBuilder кеширует декодированный LottieComposition — важно переиспользовать через LottieComposition.cache при множественных вхождениях одной анимации.

Что входит в работу

Также мы обучаем ваших разработчиков основам поддержки. Экономия бюджета на последующих доработках — до 40%. На практике это составляет $500–$1,000 на типовом проекте.

Процесс работы

Начинаем с аналитики: разбираем исходный JSON, тестируем на целевых устройствах. Затем проектируем решение — оптимизировать, разбить на части или заменить формат. Далее интеграция: добавляем код, настраиваем управление. После — тестирование на 5+ сценариях, включая слабые девайсы. Завершаем деплоем в App Store и Google Play с мониторингом.

Сроки и стоимость

Базовая интеграция одной Lottie-анимации на одну платформу — 2–3 часа с учётом тестирования и оптимизации. Если анимаций несколько или нужна интеграция на обе платформы с управлением через код (пауза, перемотка, callback по завершению) — от полудня до дня. Стоимость рассчитывается индивидуально. Свяжитесь с нами для оценки вашего проекта — проанализируем анимацию и предложим оптимальное решение. Получите консультацию с бесплатным анализом.