Lottie — vad är det, vektoranimation i mobilappar

Vad är Lottie?

Lottie — ett plattformsoberoende bibliotek för uppspelning av vektoranimation, utvecklat på Airbnb 2015. Det löser problemet med tunga videofiler och raster-sprite-ark: designern skapar en animation i After Effects, exporterar via Bodymovin till JSON, och utvecklaren bäddar in filen i mobilappen. Lottie renderar animationen programmatiskt via Canvas, Core Animation eller Skia, beroende på plattform.

Den största fördelen med Lottie — vektoranimation skalas utan kvalitetsförlust på alla skärmar: från Apple Watch-klockor till 4K-TV-apparater. Storleken på JSON-animationsfilen är vanligtvis 5–50 KB, vilket är tiotals gånger mindre än en motsvarande videofil. Enligt Airbnb Engineering (2025) stöder Lottie över 80% av Adobe After Effects funktioner, inklusive masker, effekter, kurvor och uttryck.

Bodymovin — är ett plugin för After Effects (gratis, GitHub) som serialiserar kompositionen till JSON-format som är förståeligt för Lotties körning. After Effects CC 2018 och nyare versioner stöds. För komplexa animationer med många nyckelbildrutor rekommenderas att använda dotLottie — ett format baserat på Lottie JSON, men komprimerat och förpackat i en fil.

Lotties arkitektur: hur rendering fungerar

Lottie använder en skiktad renderingsarkitektur som anpassar sig till plattformens kapacitet. På Android ritas animationen via Canvas API — Lotties egen renderare (LottieDrawable) som inte använder systemanimationer. På iOS förlitar sig Lottie på Core Animation Layers, vilket ger hög prestanda och 60 FPS. På Flutter använder Lottie Skia Canvas via CustomPainter.

Rendering går igenom tre steg: JSON-tolkning — analys av animationen i LottieComposition (alla lager, former, nyckelbilder); interpolering — beräkning av mellanliggande värden mellan nyckelbilder med hänsyn till easing-kurvor; ritning — rendering av den aktuella bilden på Canvas eller via Core Animation. Lottie stöder hårdvaruacceleration: på Android — acceleration via Canvas med Hardware Accelerator, på iOS — CALayer med inbyggd GPU-acceleration av Core Animation.

Använda Lottie på Android (Kotlin)

På Android utökar LottieAnimationView AppCompatImageView och tar över hela laddnings- och renderingscykeln. JSON-filen placeras i mappen res/raw eller assets. LottieAnimationView stöder uppspelningshantering — play, pause, resume, setFrame, setProgress, repeat, speed — och lyssning via AnimatorUpdateListener och 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

// Programmatisk konfiguration av 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()
}

// Laddning från assets och cachning
lottieView.setAnimation("animations/confetti.json")
lottieView.setCacheStrategy(LottieAnimationView.CacheStrategy.Strong)

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

Bästa praxis för Android: använd setCacheStrategy(CacheStrategy.Strong) för ofta upprepade animationer — kompositionen cachas i minnet och varje ny instans tolkar inte JSON på nytt. För listor (RecyclerView) använd LottieAnimationView med enableMergePathsForKitKatAndAbove(true) och disableExtraScaleModeForOlderWorkarounds() för att optimera rendering. För animationer med transparent bakgrund, ställ in android:layerType="hardware" för GPU-acceleration.

Använda Lottie på iOS (Swift)

På iOS är AnimationView Lotties huvudklass för UIKit och SwiftUI. Den ansluts via Swift Package Manager eller CocoaPods. JSON-filer läggs till i projektets bundle. AnimationView bestämmer automatiskt scale (logisk skärmtäthet) och använder Core Animation för att rendera lager med 60 FPS.

import Lottie

// UIKit: AnimationView med manuell styrning
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("Animationssegment slutfört: \(finished)")
}
view.addSubview(animationView)

// UIKit: animation med förlopp (för bindning till händelse)
animationView.play(fromFrame: AnimationFrameTime(30),
                    toFrame: AnimationFrameTime(90))

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

// Användning i SwiftUI
LottieView(name: "loading", progress: $animationProgress)
    .frame(width: 100, height: 100)

Bästa praxis för iOS: för animationer som startar direkt efter laddning, använd animationView.play(fromProgress: 0, toProgress: 1) med loopMode = .playOnce för engångseffekter. För Lottie i UITableView/UICollectionView, använd AnimationView med cachad animationsfil via LottieAnimation.cached. Rendering av ett stort antal lager (50+) kan orsaka FPS-fall — i sådana fall, aktivera renderingEngine = .mainThread (standard) eller .coreAnimation för macOS.

Lottie vs video: jämförelse av animationsformat

Lottie skiljer sig i grunden från videofiler: det lagrar inte pixlar, utan beskriver vectorformer, deras transformationer och förändringskurvor över tid. Video (MP4, WebM) — är en sekvens av rasterbildrutor med fast upplösning. Skillnaden visas i filstorlek, skalningskvalitet, interaktivitet och prestanda.

När du väljer Lottie: laddningsikoner, gilla-/reaktionsanimationer, onboard-skärm, accentmikroanimationer för knappar. För komplexa scener med 3D-effekter, realistisk belysning eller fotorealistiska karaktärer förblir video ett mer praktiskt val. Lottie är inte avsett för uppspelning av långa scener (över 10 sekunder) — optimal längd för en animation är 2–5 sekunder.

Optimera Lotties prestanda

Lotties prestanda beror på antalet lager, komplexiteten hos masker och effekter samt renderaren. För att bibehålla 60 FPS på medelklassenheter, följ rekommendationerna: begränsa antalet lager till 30–40 per scen, undvik överlappande nästlade pre-compositions, använd dotLottie för komplexa animationer.

// Optimera Lottie för RecyclerView
import com.airbnb.lottie.LottieAnimationView
import com.airbnb.lottie.LottieDrawable
import com.airbnb.lottie.LottieCompositionFactory

// Cachning av komposition i minnet
private val cache = LottieCompositionFactory.setCacheStrategy(CacheStrategy.Strong)

// Pool av LottieAnimationView för återanvändning
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)
    }
}

// Inaktivering av onödiga funktioner
lottieView.enableMergePathsForKitKatAndAbove(true)
lottieView.setHardwareAcceleration(true)
lottieView.setMaxFrame(60) // Begränsning av antalet bildrutor

Ytterligare optimeringar: aktivera enableMergePathsForKitKatAndAbove(true) för enheter med Android 4.4+ — detta slår samman överlappande konturer till en bana, vilket minskar antalet draw calls. Använd dotLottie istället för JSON — det binära formatet komprimerar animationen med 50–80% genom protobuf-serialisering, vilket minskar tolkningstiden. För animationer i RecyclerView, ställ in repeatCount = 0 (en gång uppspelning) och stoppa animationen vid scrollning via recyclerView.addOnScrollListener. Enligt Airbnb Engineering Blog (2025) minskar dessa åtgärder CPU-belastningen med upp till 40%.