Как подружить After Effects с Android без боли и раскадровки

Помните времена, когда дизайнер приносил в проект сложную векторную анимацию и просил «сделать в точности так же»? Разработчик либо садился вручную подбирать кривые Безье и тайминги в коде, матерясь на сложные интерполяции, либо просил гифку. Гифка тут же раздувала APK на десятки мегабайт, мылилась на экранах с высоким разрешением и пожирала оперативку.

Команда Airbnb когда-то набила на этом кучу шишек и выкатила библиотеку Lottie, которая изменила подход к анимациям на мобильных устройствах. В репозитории airbnb/lottie-android живет реализация для Android, набравшая уже больше 35 тысяч звезд на GitHub.

Что под капотом

Идея проекта простая. Дизайнер собирает анимацию в Adobe After Effects и экспортирует ее плагином Bodymovin в обычный JSON-файл. Этот файл весит считанные килобайты, потому что внутри лежат векторные координаты, параметры слоев, цвета и ключевые кадры.

Библиотека парсит этот JSON прямо на устройстве и отрисовывает векторную графику через нативный Android Canvas с аппаратным ускорением. Картинка остается четкой на любом разрешении экрана и масштабируется без потери качества.

Что умеет библиотека

Lottie давно вышла за рамки простого плеера анимаций. Вот четыре вещи, которые делают ее удобной в боевых проектах:

• Полная векторная четкость. Векторы рендерятся в реальном времени. Если положить анимацию на планшет или растянуть на весь экран складного смартфона, никаких артефактов и пикселей не появится.
• Поддержка Jetpack Compose. Рядом с классическим LottieAnimationView для XML-разметки развивается модуль lottie-compose. Он дает декларативные функции для загрузки и управления состоянием анимации.
• Управление воспроизведением. Можно запускать ролики вперед и назад, зацикливать отдельные отрезки, связывать прогресс со скроллом списка или жестами пользователя.
• Динамическая замена свойств. Если нужно перекрасить элементы интерфейса под темную тему или подставить другой текст прямо в кадр, это делается через ValueCallback без пересборки JSON-файла.

Как подключить к проекту

Для сборки используется Gradle. Добавьте зависимость в build.gradle уровня модуля:

dependencies {
  implementation 'com.airbnb.android:lottie:6.4.1'
}

Если вы пишете на Compose, берите отдельный артефакт:

dependencies {
  implementation 'com.airbnb.android:lottie-compose:6.4.1'
}

Библиотека требует обязательной миграции на androidx, старые версии support library давно не поддерживаются.

Пример в Jetpack Compose

В Compose отрисовка анимации из папки assets выглядит компактно:

@Composable
fun LoaderAnimation() {
    val composition by rememberLottieComposition(
        LottieCompositionSpec.Asset("loading.json")
    )
    val progress by animateLottieCompositionAsState(
        composition = composition,
        iterations = LottieConstants.IterateForever
    )

    LottieAnimation(
        composition = composition,
        progress = { progress },
        modifier = Modifier.size(200.dp)
    )
}

В классическом XML достаточно бросить в разметку LottieAnimationView и указать путь к файлу через атрибут app:lottie_rawRes или app:lottie_fileName.

С какими подводными камнями придется столкнуться

Lottie выглядит как магия, но у нее есть ограничения.

After Effects содержит сотни эффектов, плагинов и 3D-инструментов. Bodymovin и Lottie парсят не всё подряд. Сложные маски, выражения (expressions) на JavaScript и тяжелые градиентные меши могут либо не отрендериться, либо заметно уронить FPS на бюджетных устройствах.

Дизайнерам приходится следовать гайдам по подготовке ассетов для Lottie: использовать шейпы, простые маски и базовые трансформации.

Второй момент касается разработки. Модуль Compose активно развивается, и в репозитории авторы держат Gradle и AGP на самых свежих канареечных версиях. Если захотите контрибьютить в проект, придется ставить Android Studio Canary.

Спонсоры и экосистема

Проект живет при поддержке сообщества и спонсоров. Его активно поддерживают крупные компании и сервисы, специализирующиеся на работе с анимациями:

Кому пригодится

Lottie закрывает почти любые задачи по интерактивной графике:

1. Онбординги и экраны приветствия, где нужны плавные иллюстрации без перегрузки приложения.
2. Состояния загрузки, пустые экраны (empty states) и сообщения об ошибках.
3. Микроинтеракции — анимированные переключатели, лайки, анимированные иконки в нижней панели навигации.
4. Прогресс-бары и бейджи достижений в геймифицированных интерфейсах.

Если в вашем приложении до сих пор крутятся тяжелые GIF-файлы или десятки покадровых PNG, попробуйте перевести их на Lottie. Это сохранит мегабайты в размере сборки и сделает интерфейс значительно отзывчивее.