Lottie: что это, анимации и как работает на мобильных платформах

Что такое Lottie и как он работает

Lottie — это библиотека с открытым исходным кодом, созданная Airbnb в 2015 году для рендеринга векторных анимаций в реальном времени. Разработчик создаёт анимацию в Adobe After Effects, экспортирует её через плагин Bodymovin в JSON, а Lottie воспроизводит этот JSON на целевом устройстве, интерпретируя слои, формы, прозрачность и кривые анимации.

В отличие от видеофайлов или GIF, Lottie не зависит от разрешения экрана — анимация рендерится векторно и выглядит одинаково на устройствах с любым DPI. Размер JSON-анимации в среднем в 5-10 раз меньше, чем эквивалентный GIF или видео, что критично для мобильных приложений с ограниченным трафиком.

По данным Airbnb Engineering, внедрение Lottie сократило размер анимаций в приложении на 80% по сравнению с видеорядом Precomposed, при этом частота кадров осталась 60 FPS на всех поддерживаемых устройствах. Сегодня Lottie поддерживается на iOS, Android, Flutter, React Native, Web (HTML Canvas и SVG) и настольных платформах.

Производительность Lottie обеспечивается нативным рендерингом: на iOS используется Core Animation с CALayer, на Android — собственный Canvas-рендерер на C++ через JNI. Это позволяет воспроизводить сложные анимации с десятками слоёв без потери кадров даже на устройствах среднего сегмента. В отличие от WebView-решений (GIF, APNG, видео), Lottie не создаёт отдельный процесс для рендеринга и не потребляет дополнительную память на декодирование кадров.

Используйте Lottie для загрузочных индикаторов, иконок с микро-взаимодействиями, onboarding-экранов и праздничных промо-анимаций, где важна плавность и малый размер.

Экосистема Lottie включает официальные плееры для восьми платформ, редактор LottieFiles для предпросмотра в браузере и маркетплейс с тысячами готовых анимаций. Разработчик может скачать JSON, интегрировать в проект и настроить цвета и скорость под дизайн-систему без открытия After Effects. LottieFiles также предоставляет SDK для ускоренной интеграции с возможностью загрузки анимаций по AIR-ссылке, что позволяет обновлять анимации на устройствах без публикации новой версии приложения в App Store или Google Play.

JSON-формат Lottie и Bodymovin

JSON-схема Lottie — это открытый стандарт описания векторной анимации, состоящий из трёх уровней: композиция (composition), слои (layers) и фигуры (shapes). Композиция содержит метаданные: размер холста, частоту кадров и продолжительность.

Структура JSON

Корневой объект JSON содержит поле layers — массив слоёв анимации. Каждый слой может быть фигурой (Shape Layer), изображением (Image Layer), текстом (Text Layer) или прекомпозицией (PreComp Layer). Для каждого слоя задаются transform-свойства: позиция, масштаб, поворот и прозрачность с привязкой к ключевым кадрам.

const animationData = {
    "v": "5.5.2",
    "fr": 60,
    "w": 200,
    "h": 200,
    "layers": [{
        "ty": 4,
        "nm": "Circle",
        "shapes": [{
            "ty": "el",
            "p": { "k": [100, 100] }
        }]
    }]
}

Ключевые кадры (Keyframes) задаются массивами с временными метками, значениями и кривыми Безье для интерполяции. Bodymovin автоматически конвертирует кривые After Effects в формат, понятный Lottie, сохраняя тайминг и ease-функции с точностью до кадра.

Bodymovin — плагин экспорта

Bodymovin — это расширение для Adobe After Effects, которое экспортирует композицию в JSON-файл Lottie. Плагин поддерживает большинство возможностей After Effects: формы, маски, эффекты, текстовые слои и трекинг. Ограничения касаются 3D-слоёв и некоторых плагинов — они не экспортируются и требуют упрощения анимации до 2D.

Интеграция Lottie на iOS

На iOS Lottie интегрируется через Swift Package Manager, CocoaPods или Carthage. Основной класс — LottieView для SwiftUI и LottieAnimationView для UIKit. Пакет lottie-ios включает поддержку анимаций из бандла, сети и Data-объектов.

LottieView в SwiftUI

LottieView — это View-компонент для SwiftUI, принимающий имя JSON-файла из бандла или URL для загрузки из сети. Анимация автоматически проигрывается с указанной скоростью и количеством повторений.

import Lottie

LottieView(animation: LottieAnimation
    .named("loading_spinner"))
    .loopMode(.loop)
    .animationSpeed(1.5)
    .frame(width: 100, height: 100)

Для UIKit используется LottieAnimationView с настройкой через Interface Builder или программно. View поддерживает все состояния анимации: play, pause, stop, а также прогресс-бар для загрузки данных. LottieAnimationView можно встраивать в UITableViewCell или UICollectionViewCell для анимированных иконок в списках — при скролле ячейки анимация приостанавливается, а при появлении на экране возобновляется, что экономит ресурсы CPU и GPU.

Современная iOS-разработка активно использует Lottie в сочетании с SwiftUI для создания анимированных онбордингов и интерактивных элементов: при скролле экрана прогресс анимации синхронизируется с позицией скролла через ScrollViewReader. Это создаёт эффект параллакса, при котором анимация непрерывно следует за движением пальца пользователя, повышая вовлечённость без использования тяжёлых видеофайлов.

Управление проигрыванием

Lottie-плеер на iOS предоставляет API для воспроизведения с определённого по определённый кадр, изменения цвета fill/stroke через KeyPaths и прослушивания событий через LottieAnimationDelegate. Можно приостанавливать анимацию при скролле и возобновлять при остановке для оптимизации производительности.

Интеграция Lottie на Android

На Android Lottie подключается через Gradle-зависимость com.airbnb.android:lottie. Основной компонент — LottieAnimationView, который можно разместить в XML-разметке как обычный View и настроить через атрибуты или программно.

@Composable
fun LoadingAnimation() {
    val composition by rememberLottieComposition(
        spec = LottieCompositionSpec.RawRes(R.raw.loading)
    )
    LottieAnimation(
        composition = composition,
        iterations = LottieConstants.IterateForever
    )
}

В XML-разметке LottieAnimationView настраивается через атрибуты: lottie_rawRes (ссылка на JSON в res/raw), lottie_autoPlay, lottie_loop. Загрузка из сети поддерживается через lottie_url или программно через setAnimationFromUrl. Android-версия Lottie использует собственный рендерер на Canvas, не зависящий от аппаратного ускорения.

Загрузка из RawRes и сети

Для статических анимаций JSON помещается в res/raw и ссылается через RawRes. Для динамических — Lottie загружает JSON из URL или Data-объекта с прогресс-коллбэком, показывающим процент загрузки. Lottie-кэш автоматически сохраняет загруженные анимации в памяти для избежания повторной загрузки при повторном рендеринге.

Lottie для Android поддерживает анимацию в RecyclerView через LottieAnimationView, встроенную непосредственно в элемент списка. Для оптимизации производительности рекомендуется использовать setAnimation с отложенной загрузкой и отключать анимацию для невидимых на экране элементов через callback RecyclerView.OnChildAttachStateChangeListener. Это предотвращает просадку FPS при скролле длинных списков с анимированными иконками.

Кастомизация и управление Lottie-анимациями

Lottie предоставляет мощный API для кастомизации уже готовых анимаций без изменения исходного файла After Effects. Это позволяет адаптировать одну анимацию под разные темы, цвета и размеры приложения.

Изменение цвета через KeyPath

Цвета fill и stroke можно менять в runtime через KeyPath — строковый путь к элементу анимации. Например, для замены цвета иконки корзины с красного на синий достаточно найти её KeyPath и применить новое значение. Это избавляет от хранения нескольких версий одной анимации для разных цветовых схем.

Управление скоростью и прогрессом

Каждую Lottie-анимацию можно контролировать по скорости (animationSpeed), прогрессу (setProgress) и диапазону кадров (play(fromFrame:toFrame:)). Прогресс-режим позволяет синхронизировать анимацию с жестом скролла: чем дальше прокручен экран, тем дальше продвинута анимация — это популярный приём для onboarding и параллакс-эффектов.