Lottie — co to je, vektorová animace v mobilních aplikacích

Co je Lottie?

Lottie — multiplatformní knihovna pro přehrávání vektorové animace, vyvinutá v Airbnb v roce 2015. Řeší problém těžkých video souborů a rastrových sprite listů: designér vytvoří animaci v After Effects, exportuje ji přes Bodymovin do JSON a vývojář vloží tento soubor do mobilní aplikace. Lottie vykresluje animaci programově pomocí Canvas, Core Animation nebo Skia, v závislosti na platformě.

Hlavní výhoda Lottie — vektorová animace se škáluje bez ztráty kvality na jakékoli obrazovce: od hodinek Apple Watch až po 4K televize. Velikost JSON souboru animace je obvykle 5–50 KB, což je desetkrát méně než ekvivalentní video soubor. Podle Airbnb Engineering (2025) Lottie podporuje více než 80% možností Adobe After Effects, včetně masek, efektů, křivek a výrazů.

Bodymovin — je plugin pro After Effects (zdarma, GitHub), který serializuje kompozici do JSON formátu srozumitelného pro běhové prostředí Lottie. Jsou podporovány verze After Effects CC 2018 a novější. Pro složité animace s velkým počtem klíčových snímků se doporučuje použít dotLottie — formát založený na Lottie JSON, ale komprimovaný a zabalený do jednoho souboru.

Architektura Lottie: jak funguje vykreslování

Lottie využívá vícevrstvou architekturu vykreslování, která se přizpůsobuje možnostem platformy. Na Androidu se animace kreslí přes Canvas API — vlastní renderer Lottie (LottieDrawable), který nepoužívá systémové animace. Na iOS se Lottie spoléhá na Core Animation Layers, což poskytuje vysoký výkon a 60 FPS. Na Flutteru Lottie používá Skia Canvas přes CustomPainter.

Vykreslování prochází třemi fázemi: parsování JSON — analýza animace v LottieComposition (všechny vrstvy, tvary, klíčové snímky); interpolace — výpočet mezilehlých hodnot mezi klíčovými snímky s ohledem na easing křivky; kreslení — vykreslení aktuálního snímku na Canvas nebo přes Core Animation. Lottie podporuje hardwarovou akceleraci: na Androidu — akcelerace přes Canvas s Hardware Accelerator, na iOS — CALayer s vestavěnou GPU akcelerací Core Animation.

Použití Lottie na Androidu (Kotlin)

Na Androidu LottieAnimationView rozšiřuje AppCompatImageView a přebírá celý cyklus načítání a vykreslování. JSON soubor je umístěn do složky res/raw nebo assets. LottieAnimationView podporuje správu přehrávání — play, pause, resume, setFrame, setProgress, repeat, speed — a naslouchání přes AnimatorUpdateListener a 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

// Programové nastavení 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()
}

// Načtení z assets a ukládání do mezipaměti
lottieView.setAnimation("animations/confetti.json")
lottieView.setCacheStrategy(LottieAnimationView.CacheStrategy.Strong)

// LottieDrawable — vlastní kreslení bez View
val drawable = LottieDrawable().apply {
    setComposition(
        LottieCompositionFactory.fromRawRes(context, R.raw.star)
            .addListener { composition -> composition?.let { setComposition(it); play() } }
    )
}

Nejlepší postupy pro Android: používejte setCacheStrategy(CacheStrategy.Strong) pro často opakované animace — kompozice se ukládá do mezipaměti a každá nová instance neparsuje JSON znovu. Pro seznamy (RecyclerView) používejte LottieAnimationView s enableMergePathsForKitKatAndAbove(true) a disableExtraScaleModeForOlderWorkarounds() pro optimalizaci vykreslování. Pro animace s průhledným pozadím nastavte android:layerType="hardware" pro GPU akceleraci.

Použití Lottie na iOS (Swift)

Na iOS je AnimationView hlavní třída Lottie pro UIKit a SwiftUI. Připojuje se přes Swift Package Manager nebo CocoaPods. JSON soubory se přidávají do bundle projektu. AnimationView automaticky určuje scale (logickou hustotu obrazovky) a používá Core Animation pro vykreslování vrstev s 60 FPS.

import Lottie

// UIKit: AnimationView s ručním ovládáním
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("Segment animace dokončen: \(finished)")
}
view.addSubview(animationView)

// UIKit: animace s průběhem (pro vázání na událost)
animationView.play(fromFrame: AnimationFrameTime(30),
                    toFrame: AnimationFrameTime(90))

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

// Použití ve SwiftUI
LottieView(name: "loading", progress: $animationProgress)
    .frame(width: 100, height: 100)

Nejlepší postupy pro iOS: pro animace, které se spouštějí ihned po načtení, používejte animationView.play(fromProgress: 0, toProgress: 1) s loopMode = .playOnce pro jednorázové akcentní efekty. Pro Lottie v UITableView/UICollectionView používejte AnimationView s nacachovaným animačním souborem přes LottieAnimation.cached. Vykreslování velkého počtu vrstev (50+) může způsobit pokles FPS — v takových případech zapněte renderingEngine = .mainThread (výchozí) nebo .coreAnimation pro macOS.

Lottie vs video: srovnání formátů animace

Lottie se zásadně liší od video souborů: neukládá pixely, ale popisuje vektorové tvary, jejich transformace a křivky změn v čase. Video (MP4, WebM) — je sekvence rastrových snímků s pevným rozlišením. Rozdíl se projevuje ve velikosti souboru, kvalitě škálování, interaktivitě a výkonu.

Kdy zvolit Lottie: ikony načítání, like/animace reakcí, úvodní obrazovka, akcentní mikroanimace tlačítek. Pro složité scény s 3D efekty, realistickým osvětlením nebo fotorealistickými postavami zůstává video praktičtější volbou. Lottie není určen pro přehrávání dlouhých scén (více než 10 sekund) — optimální délka jedné animace je 2–5 sekund.

Optimalizace výkonu Lottie

Výkon Lottie závisí na počtu vrstev, složitosti masek a efektů a také na rendereru. Pro udržení 60 FPS na zařízeních střední třídy dodržujte doporučení: omezte počet vrstev na 30–40 na scénu, vyhněte se překrývajícím se vnořeným pre-compositions, používejte dotLottie pro složité animace.

// Optimalizace Lottie pro RecyclerView
import com.airbnb.lottie.LottieAnimationView
import com.airbnb.lottie.LottieDrawable
import com.airbnb.lottie.LottieCompositionFactory

// Ukládání kompozice do mezipaměti v paměti
private val cache = LottieCompositionFactory.setCacheStrategy(CacheStrategy.Strong)

// Pool LottieAnimationView pro opětovné použití
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)
    }
}

// Vypínání nepotřebných funkcí
lottieView.enableMergePathsForKitKatAndAbove(true)
lottieView.setHardwareAcceleration(true)
lottieView.setMaxFrame(60) // Omezení počtu snímků

Další optimalizace: zapněte enableMergePathsForKitKatAndAbove(true) pro zařízení s Android 4.4+ — to sloučí překrývající se obrysy do jedné cesty, čímž se sníží počet draw calls. Používejte dotLottie místo JSON — binární formát komprimuje animaci o 50–80% díky protobuf serializaci, což zkracuje dobu parsování. Pro animace v RecyclerView nastavte repeatCount = 0 (jednorázové přehrání) a zastavte animaci při rolování pomocí recyclerView.addOnScrollListener. Podle Airbnb Engineering Blog (2025) tato opatření snižují zatížení CPU až o 40%.