Lottie — что это, векторная анимация в мобильных приложениях

Что такое Lottie?

Lottie — кроссплатформенная библиотека для воспроизведения векторной анимации, разработанная в Airbnb в 2015 году. Она решает проблему тяжёлых видеофайлов и растровых спрайт-листов: дизайнер создаёт анимацию в After Effects, экспортирует через Bodymovin в JSON, и разработчик встраивает этот файл в мобильное приложение. Lottie рендерит анимацию программно через Canvas, Core Animation или Skia, в зависимости от платформы.

Главное преимущество Lottie — векторная анимация масштабируется без потери качества на любых экранах: от часов Apple Watch до 4K-телевизоров. Размер JSON-файла анимации обычно составляет 5–50 КБ, что в десятки раз меньше эквивалентного видеофайла. По данным Airbnb Engineering (2025), Lottie поддерживает более 80% возможностей Adobe After Effects, включая маски, эффекты, кривые и выражения.

Bodymovin — это плагин для After Effects (бесплатный, GitHub), который сериализует композицию в формат JSON, понятный рантайму Lottie. Поддерживаются версии After Effects CC 2018 и новее. Для сложных анимаций с большим количеством ключевых кадров рекомендуется использовать dotLottie — формат, основанный на Lottie JSON, но сжатый и упакованный в один файл.

Архитектура Lottie: как работает рендеринг

Lottie использует уровневую архитектуру рендеринга, которая адаптируется под возможности платформы. На Android анимация рисуется через Canvas API — собственный рендерер Lottie (LottieDrawable), который не использует системные анимации. На iOS Lottie опирается на Core Animation Layers, что даёт высокую производительность и 60 FPS. На Flutter Lottie использует Skia Canvas через CustomPainter.

Рендеринг проходит три этапа: парсинг JSON — разбор анимации в LottieComposition (все слои, формы, ключевые кадры); интерполяция — вычисление промежуточных значений между ключевыми кадрами с учётом easing-кривых; отрисовка — рендеринг текущего кадра на Canvas или через Core Animation. Lottie поддерживает аппаратное ускорение: на Android — ускорение через Canvas с Hardware Accelerator, на iOS — CALayer со встроенным GPU-ускорением Core Animation.

Использование Lottie на Android (Kotlin)

На Android LottieAnimationView расширяет AppCompatImageView и берёт на себя весь цикл загрузки и рендеринга. JSON-файл помещается в папку res/raw или assets. LottieAnimationView поддерживает управление воспроизведением — play, pause, resume, setFrame, setProgress, repeat, speed — и прослушивание через AnimatorUpdateListener и AnimatorListener.

<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/animationView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:lottie_rawRes="@raw/loading_animation"
    app:lottie_autoPlay="true"
    app:lottie_loop="true" />

import com.airbnb.lottie.LottieAnimationView
import com.airbnb.lottie.LottieListener

// Программная настройка LottieAnimationView
val lottieView = LottieAnimationView(context).apply {
    setAnimation(R.raw.celebrate_animation)
    repeatCount = ValueAnimator.INFINITE
    speed = 1.5f
    addAnimatorUpdateListener { animator ->
        val progress = animator.animatedValue as Float
        progressBar.progress = (progress * 100).toInt()
    }
    playAnimation()
}

// Загрузка из assets и кэширование
lottieView.setAnimation("animations/confetti.json")
lottieView.setCacheStrategy(LottieAnimationView.CacheStrategy.Strong)

// LottieDrawable — кастомная отрисовка без View
val drawable = LottieDrawable().apply {
    setComposition(
        LottieCompositionFactory.fromRawRes(context, R.raw.star)
            .addListener { composition -> composition?.let { setComposition(it); play() } }
    )
}

Лучшие практики Android: используйте setCacheStrategy(CacheStrategy.Strong) для часто повторяющихся анимаций — композиция кэшируется в памяти, и каждый новый экземпляр не парсит JSON заново. Для списков (RecyclerView) используйте LottieAnimationView с enableMergePathsForKitKatAndAbove(true) и disableExtraScaleModeForOlderWorkarounds() для оптимизации рендеринга. Для анимаций с прозрачным фоном задайте android:layerType=«hardware» для GPU-ускорения.

Использование Lottie на iOS (Swift)

На iOS AnimationView — основной класс Lottie для UIKit и SwiftUI. Он подключается через Swift Package Manager или CocoaPods. JSON-файлы добавляются в bundle проекта. AnimationView автоматически определяет scale (логическую плотность экрана) и использует Core Animation для рендеринга слоёв с 60 FPS.

import Lottie

// UIKit: AnimationView с ручным управлением
let animationView = AnimationView(name: "confetti")
animationView.frame = view.bounds
animationView.contentMode = .scaleAspectFit
animationView.loopMode = .loop
animationView.animationSpeed = 1.5
animationView.play(fromProgress: 0, toProgress: 0.5) { finished in
    print("Animation segment finished: \(finished)")
}
view.addSubview(animationView)

// UIKit: анимация с прогрессом (для привязки к событию)
animationView.play(fromFrame: AnimationFrameTime(30),
                    toFrame: AnimationFrameTime(90))

// SwiftUI: LottieView как UIViewRepresentable
import Lottie
import SwiftUI

struct LottieView: UIViewRepresentable {
    let name: String
    var loopMode: LottieLoopMode = .loop
    @Binding var progress: CGFloat

    func makeUIView(context: Context) -> AnimationView {
        let view = AnimationView(name: name)
        view.contentMode = .scaleAspectFit
        view.loopMode = loopMode
        return view
    }

    func updateUIView(_ uiView: AnimationView, context: Context) {
        uiView.currentProgress = progress
    }
}

// Использование в SwiftUI
LottieView(name: "loading", progress: $animationProgress)
    .frame(width: 100, height: 100)

Лучшие практики iOS: для анимаций, запускающихся сразу после загрузки, используйте animationView.play(fromProgress: 0, toProgress: 1) с loopMode = .playOnce для одноразовых акцентных эффектов. Для Lottie в UITableView/UICollectionView используйте AnimationView с закешированным анимационным файлом через LottieAnimation.cached. Рендеринг большого числа слоёв (50+) может вызывать падение FPS — в таких случаях включайте renderingEngine = .mainThread (по умолчанию) или .coreAnimation для macOS.

Lottie vs видео: сравнение форматов анимации

Lottie принципиально отличается от видеофайлов: он не хранит пиксели, а описывает векторные фигуры, их трансформации и кривые изменения во времени. Видео (MP4, WebM) — это последовательность растровых кадров фиксированного разрешения. Разница проявляется в размере файла, качестве масштабирования, интерактивности и производительности.

Когда выбирать Lottie: иконки загрузки, лайки/анимации реакций, onboard-экран, акцентные микроанимации кнопок. Для сложных сцен с 3D-эффектами, реалистичным освещением или фотореалистичными персонажами видео остаётся более практичным выбором. Lottie не предназначен для воспроизведения длительных сцен (более 10 секунд) — оптимальная длительность одной анимации 2–5 секунд.

Оптимизация производительности Lottie

Производительность Lottie зависит от количества слоёв, сложности масок и эффектов, а также от рендерера. Для поддержания 60 FPS на устройствах среднего сегмента следуйте рекомендациям: ограничьте количество слоёв до 30–40 на сцену, избегайте overlapping вложенных pre-compositions, используйте dotLottie для сложных анимаций.

// Оптимизация Lottie для RecyclerView
import com.airbnb.lottie.LottieAnimationView
import com.airbnb.lottie.LottieDrawable
import com.airbnb.lottie.LottieCompositionFactory

// Кэширование композиции в памяти
private val cache = LottieCompositionFactory.setCacheStrategy(CacheStrategy.Strong)

// Пул LottieAnimationView для переиспользования
class LottiePool {
    private val pool = LinkedList<LottieAnimationView>()

    fun acquire(context: Context): LottieAnimationView {
        return pool.poll() ?: LottieAnimationView(context)
    }

    fun release(view: LottieAnimationView) {
        view.pauseAnimation()
        view.cancelAnimation()
        pool.add(view)
    }
}

// Отключение ненужных возможностей
lottieView.enableMergePathsForKitKatAndAbove(true)
lottieView.setHardwareAcceleration(true)
lottieView.setMaxFrame(60) // Ограничение числа кадров

Дополнительные оптимизации: включайте enableMergePathsForKitKatAndAbove(true) для устройств с Android 4.4+ — это объединяет перекрывающиеся контуры в один путь, уменьшая количество draw calls. Используйте dotLottie вместо JSON — бинарный формат сжимает анимацию на 50–80% за счёт protobuf-сериализации, что сокращает время парсинга. Для анимаций в RecyclerView устанавливайте repeatCount = 0 (однократный проигрыш) и останавливайте анимацию при скролле через recyclerView.addOnScrollListener. По данным Airbnb Engineering Blog (2025), эти меры снижают нагрузку на CPU до 40%.