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: іконки завантаження, лайки/анімації реакцій, онборд-екран, акцентні мікроанімації кнопок. Для складних сцен із 3D-ефектами, реалістичним освітленням або фотореалістичними персонажами відео залишається більш практичним вибором. Lottie не призначений для відтворення тривалих сцен (понад 10 секунд) — оптимальна тривалість однієї анімації 2–5 секунд.

Оптимізація продуктивності Lottie

Продуктивність Lottie залежить від кількості шарів, складності масок та ефектів, а також від рендерера. Для підтримки 60 FPS на пристроях середнього сегмента дотримуйтеся рекомендацій: обмежте кількість шарів до 30–40 на сцену, уникайте перекривних вкладених 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%.