Lottie — mi ez, vektoranimáció mobilalkalmazásokban

Mi az a Lottie?

Lottie — egy cross-platform könyvtár vektoranimációk lejátszásához, amelyet az Airbnb fejlesztett ki 2015-ben. Megoldja a nehéz videofájlok és raszteres sprite-lapok problémáját: a tervező létrehozza az animációt az After Effects-ben, exportálja a Bodymovin-on keresztül JSON-ba, a fejlesztő pedig beágyazza ezt a fájlt a mobilalkalmazásba. A Lottie programozottan rendereli az animációt Canvas, Core Animation vagy Skia segítségével, a platformtól függően.

A Lottie fő előnye — a vektoranimáció minőségromlás nélkül méreteződik bármilyen képernyőn: az Apple Watch óráktól a 4K televíziókig. A JSON animációs fájl mérete általában 5–50 KB, ami tízszer kisebb, mint egy egyenértékű videofájl. Az Airbnb Engineering (2025) szerint a Lottie az Adobe After Effects képességeinek több mint 80%-át támogatja, beleértve a maszkokat, effekteket, görbéket és kifejezéseket.

Bodymovin — egy bővítmény az After Effects-hez (ingyenes, GitHub), amely szerializálja a kompozíciót a Lottie futási ideje számára érthető JSON formátumba. Az After Effects CC 2018 és újabb verziók támogatottak. Összetett, sok kulcskockával rendelkező animációkhoz ajánlott a dotLottie használata — egy Lottie JSON-on alapuló, de tömörített és egy fájlba csomagolt formátum.

A Lottie architektúrája: hogyan működik a renderelés

A Lottie rétegezett renderelési architektúrát használ, amely alkalmazkodik a platform képességeihez. Androidon az animáció a Canvas API-n keresztül rajzolódik ki — a Lottie saját renderelője (LottieDrawable), amely nem használ rendszeranimációkat. iOS-en a Lottie a Core Animation Layers-re támaszkodik, ami nagy teljesítményt és 60 FPS-t biztosít. Flutterben a Lottie a Skia Canvas-t használja a CustomPainteren keresztül.

A renderelés három szakaszon megy keresztül: JSON elemzés — az animáció elemzése a LottieComposition-ban (összes réteg, alakzat, kulcskocka); interpoláció — köztes értékek kiszámítása a kulcskockák között az easing görbék figyelembevételével; rajzolás — az aktuális kocka renderelése Canvas-en vagy Core Animation-en keresztül. A Lottie támogatja a hardveres gyorsítást: Androidon — gyorsítás Canvas-en keresztül Hardware Acceleratorral, iOS-en — CALayer beépített GPU-gyorsítással a Core Animation-ben.

A Lottie használata Androidon (Kotlin)

Androidon a LottieAnimationView kibővíti az AppCompatImageView-t, és átveszi a betöltés és renderelés teljes ciklusát. A JSON fájl a res/raw vagy assets mappába kerül. A LottieAnimationView támogatja a lejátszás kezelését — play, pause, resume, setFrame, setProgress, repeat, speed — és a figyelést az AnimatorUpdateListener és AnimatorListener segítségével.

<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

// A LottieAnimationView programozott beállítása
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()
}

// Betöltés az assets mappából és gyorsítótárazás
lottieView.setAnimation("animations/confetti.json")
lottieView.setCacheStrategy(LottieAnimationView.CacheStrategy.Strong)

// LottieDrawable — egyéni rajzolás View nélkül
val drawable = LottieDrawable().apply {
    setComposition(
        LottieCompositionFactory.fromRawRes(context, R.raw.star)
            .addListener { composition -> composition?.let { setComposition(it); play() } }
    )
}

Android legjobb gyakorlatok: használja a setCacheStrategy(CacheStrategy.Strong) függvényt gyakran ismétlődő animációkhoz — a kompozíció a memóriában gyorsítótárazódik, és minden új példány nem elemzi újra a JSON-t. Listákhoz (RecyclerView) használja a LottieAnimationView-t enableMergePathsForKitKatAndAbove(true) és disableExtraScaleModeForOlderWorkarounds() paraméterekkel a renderelés optimalizálásához. Átlátszó hátterű animációkhoz állítsa be az android:layerType="hardware" értéket a GPU-gyorsításhoz.

A Lottie használata iOS-en (Swift)

iOS-en az AnimationView — a Lottie fő osztálya UIKit és SwiftUI számára. Swift Package Manageren vagy CocoaPods-on keresztül csatlakozik. A JSON fájlok a projekt bundle-jához kerülnek. Az AnimationView automatikusan meghatározza a scale (képernyő logikai sűrűsége) értéket, és a Core Animation-t használja a rétegek 60 FPS-es rendereléséhez.

import Lottie

// UIKit: AnimationView kézi vezérléssel
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("Animációs szegmens befejeződött: \(finished)")
}
view.addSubview(animationView)

// UIKit: animáció haladással (eseményhez kötéshez)
animationView.play(fromFrame: AnimationFrameTime(30),
                    toFrame: AnimationFrameTime(90))

// SwiftUI: LottieView mint 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
    }
}

// Használat SwiftUI-ben
LottieView(name: "loading", progress: $animationProgress)
    .frame(width: 100, height: 100)

iOS legjobb gyakorlatok: betöltés után azonnal induló animációkhoz használja az animationView.play(fromProgress: 0, toProgress: 1) parancsot a loopMode = .playOnce beállítással egyszeri akcentus effektekhez. Lottie használatához UITableView/UICollectionView-ben használjon AnimationView-t gyorsítótárazott animációs fájllal a LottieAnimation.cached segítségével. Nagyszámú réteg (50+) renderelése FPS-csökkenést okozhat — ilyen esetekben kapcsolja be a renderingEngine = .mainThread (alapértelmezett) vagy .coreAnimation értéket macOS számára.

Lottie vs videó: animációs formátumok összehasonlítása

A Lottie alapvetően különbözik a videofájloktól: nem pixeleket tárol, hanem vektoralakzatokat, azok transzformációit és időbeli változási görbéit írja le. A videó (MP4, WebM) — rögzített felbontású raszteres kockák sorozata. A különbség a fájlméretben, a méretezés minőségében, az interaktivitásban és a teljesítményben nyilvánul meg.

Mikor válassza a Lottie-t: betöltő ikonok, like/reakció animációk, onboard képernyő, gombok akcentus mikroanimációi. Összetett, 3D effektekkel, realisztikus világítással vagy fotorealisztikus karakterekkel rendelkező jelenetekhez a videó praktikusabb választás marad. A Lottie nem hosszú jelenetek (több mint 10 másodperc) lejátszására készült — egy animáció optimális időtartama 2–5 másodperc.

A Lottie teljesítményének optimalizálása

A Lottie teljesítménye a rétegek számától, a maszkok és effektek összetettségétől, valamint a renderelőtől függ. A 60 FPS fenntartásához középkategóriás eszközökön kövesse az ajánlásokat: korlátozza a rétegek számát 30–40-re jelenetenként, kerülje az átfedő beágyazott pre-kompozíciókat, használja a dotLottie-t összetett animációkhoz.

// Lottie optimalizálása RecyclerView-hoz
import com.airbnb.lottie.LottieAnimationView
import com.airbnb.lottie.LottieDrawable
import com.airbnb.lottie.LottieCompositionFactory

// Kompozíció gyorsítótárazása a memóriában
private val cache = LottieCompositionFactory.setCacheStrategy(CacheStrategy.Strong)

// LottieAnimationView pool újrafelhasználáshoz
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)
    }
}

// Szükségtelen funkciók kikapcsolása
lottieView.enableMergePathsForKitKatAndAbove(true)
lottieView.setHardwareAcceleration(true)
lottieView.setMaxFrame(60) // Kockák számának korlátozása

További optimalizálások: kapcsolja be az enableMergePathsForKitKatAndAbove(true) beállítást Android 4.4+ eszközökön — ez összeolvasztja az átfedő kontúrokat egyetlen útvonallá, csökkentve a draw hívások számát. Használja a dotLottie-t JSON helyett — a bináris formátum 50–80%-kal tömöríti az animációt a protobuf-szerializációnak köszönhetően, ami csökkenti az elemzési időt. RecyclerView-ban lévő animációkhoz állítsa be a repeatCount = 0 (egyszeri lejátszás) értéket, és állítsa le az animációt görgetéskor a recyclerView.addOnScrollListener segítségével. Az Airbnb Engineering Blog (2025) szerint ezek az intézkedések akár 40%-kal csökkentik a CPU terhelését.