Lottie — какво е, векторна анимация в мобилни приложения

Какво е Lottie?

Lottie — кросплатформена библиотека за възпроизвеждане на векторна анимация, разработена в Airbnb през 2015 г. Тя решава проблема с тежките видеофайлове и растерните спрайт листове: дизайнерът създава анимация в After Effects, експортира чрез Bodymovin в JSON, и разработчикът вгражда този файл в мобилното приложение. Lottie рендерира анимацията програмно чрез Canvas, Core Animation или Skia, в зависимост от платформата.

Основното предимство на Lottie — векторната анимация се мащабира без загуба на качество на всеки екран: от часовниците Apple Watch до 4K телевизорите. Размерът на JSON файла за анимация обикновено е 5–50 KB, което е десетки пъти по-малко от еквивалентен видеофайл. Според 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("Сегментът на анимацията завърши: \(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 срещу видео: сравнение на форматите за анимация

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

Кога да изберете Lottie: икони за зареждане, харесвания/анимации на реакции, екран за onboard, акцентни микроанимации на бутони. За сложни сцени с 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%.