Lottie — wat is het, vectoranimatie in mobiele apps

Wat is Lottie?

Lottie — een cross-platformbibliotheek voor het afspelen van vectoranimaties, ontwikkeld bij Airbnb in 2015. Het lost het probleem van zware videobestanden en raster-sprite-kaarten op: de ontwerper maakt een animatie in After Effects, exporteert deze via Bodymovin naar JSON en de ontwikkelaar voegt dit bestand in de mobiele app in. Lottie rendert de animatie programmatisch via Canvas, Core Animation of Skia, afhankelijk van het platform.

Het belangrijkste voordeel van Lottie — vectoranimatie schaalt zonder kwaliteitsverlies op elk scherm: van Apple Watch-horloges tot 4K-televisies. De grootte van het JSON-animatiebestand is meestal 5–50 KB, wat tientallen keren kleiner is dan een gelijkwaardig videobestand. Volgens Airbnb Engineering (2025) ondersteunt Lottie meer dan 80% van de mogelijkheden van Adobe After Effects, waaronder maskers, effecten, curven en expressies.

Bodymovin — is een plug-in voor After Effects (gratis, GitHub) die de compositie serialiseert naar JSON-formaat dat begrijpelijk is voor de Lottie-runtime. After Effects CC 2018 en nieuwer worden ondersteund. Voor complexe animaties met veel keyframes wordt aanbevolen dotLottie te gebruiken — een formaat gebaseerd op Lottie JSON, maar gecomprimeerd en verpakt in één bestand.

Lottie-architectuur: hoe rendering werkt

Lottie maakt gebruik van een gelaagde renderingarchitectuur die zich aanpast aan de mogelijkheden van het platform. Op Android wordt de animatie getekend via de Canvas API — Lottie's eigen renderer (LottieDrawable) die geen systeemanimaties gebruikt. Op iOS vertrouwt Lottie op Core Animation Layers, wat hoge prestaties en 60 FPS oplevert. Op Flutter gebruikt Lottie Skia Canvas via CustomPainter.

Rendering doorloopt drie fasen: JSON-parsen — de animatie ontleden in LottieComposition (alle lagen, vormen, keyframes); interpolatie — tussenwaarden berekenen tussen keyframes rekening houdend met easing-curven; tekenen — het huidige frame renderen op Canvas of via Core Animation. Lottie ondersteunt hardwareversnelling: op Android — versnelling via Canvas met Hardware Accelerator, op iOS — CALayer met ingebouwde GPU-versnelling van Core Animation.

Lottie gebruiken op Android (Kotlin)

Op Android breidt LottieAnimationView AppCompatImageView uit en neemt de volledige laad- en renderingscyclus over. Het JSON-bestand wordt in de map res/raw of assets geplaatst. LottieAnimationView ondersteunt afspeelbeheer — play, pause, resume, setFrame, setProgress, repeat, speed — en luisteren via AnimatorUpdateListener en 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

// Programmatische configuratie van 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()
}

// Laden uit assets en cachen
lottieView.setAnimation("animations/confetti.json")
lottieView.setCacheStrategy(LottieAnimationView.CacheStrategy.Strong)

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

Beste praktijken voor Android: gebruik setCacheStrategy(CacheStrategy.Strong) voor vaak herhaalde animaties — de compositie wordt in het geheugen gecacht en elke nieuwe instantie parseert JSON niet opnieuw. Gebruik voor lijsten (RecyclerView) LottieAnimationView met enableMergePathsForKitKatAndAbove(true) en disableExtraScaleModeForOlderWorkarounds() voor het optimaliseren van rendering. Stel voor animaties met een transparante achtergrond android:layerType="hardware" in voor GPU-versnelling.

Lottie gebruiken op iOS (Swift)

Op iOS is AnimationView de hoofdklasse van Lottie voor UIKit en SwiftUI. Het wordt verbonden via Swift Package Manager of CocoaPods. JSON-bestanden worden aan de projectbundel toegevoegd. AnimationView bepaalt automatisch de scale (logische dichtheid van het scherm) en gebruikt Core Animation voor het renderen van lagen met 60 FPS.

import Lottie

// UIKit: AnimationView met handmatige bediening
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("Animatiesegment voltooid: \(finished)")
}
view.addSubview(animationView)

// UIKit: animatie met voortgang (voor koppeling aan een gebeurtenis)
animationView.play(fromFrame: AnimationFrameTime(30),
                    toFrame: AnimationFrameTime(90))

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

// Gebruik in SwiftUI
LottieView(name: "loading", progress: $animationProgress)
    .frame(width: 100, height: 100)

Beste praktijken voor iOS: voor animaties die direct na het laden starten, gebruik animationView.play(fromProgress: 0, toProgress: 1) met loopMode = .playOnce voor eenmalige accenteffecten. Gebruik voor Lottie in UITableView/UICollectionView AnimationView met een gecachte animatie via LottieAnimation.cached. Het renderen van een groot aantal lagen (50+) kan FPS-verlaging veroorzaken — schakel in dergelijke gevallen renderingEngine = .mainThread (standaard) of .coreAnimation in voor macOS.

Lottie vs video: vergelijking van animatieformaten

Lottie verschilt fundamenteel van videobestanden: het slaat geen pixels op, maar beschrijft vectorvormen, hun transformaties en veranderingscurven in de tijd. Video (MP4, WebM) is een reeks rasterframes met een vaste resolutie. Het verschil zit in bestandsgrootte, schaalkwaliteit, interactiviteit en prestaties.

Wanneer Lottie kiezen: laadpictogrammen, likes/reactie-animaties, onboard-scherm, accentmicro-animaties van knoppen. Voor complexe scènes met 3D-effecten, realistische verlichting of fotorealistische personages blijft video de praktischere keuze. Lottie is niet bedoeld voor het afspelen van lange scènes (meer dan 10 seconden) — de optimale duur van één animatie is 2–5 seconden.

Lottie-prestaties optimaliseren

Lottie-prestaties zijn afhankelijk van het aantal lagen, de complexiteit van maskers en effecten, en de renderer. Volg de aanbevelingen om 60 FPS te behouden op middenklasse-apparaten: beperk het aantal lagen tot 30–40 per scène, vermijd overlappende geneste pre-composities, gebruik dotLottie voor complexe animaties.

// Lottie optimaliseren voor RecyclerView
import com.airbnb.lottie.LottieAnimationView
import com.airbnb.lottie.LottieDrawable
import com.airbnb.lottie.LottieCompositionFactory

// Compositie cachen in het geheugen
private val cache = LottieCompositionFactory.setCacheStrategy(CacheStrategy.Strong)

// Pool van LottieAnimationView voor hergebruik
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)
    }
}

// Overbodige functies uitschakelen
lottieView.enableMergePathsForKitKatAndAbove(true)
lottieView.setHardwareAcceleration(true)
lottieView.setMaxFrame(60) // Beperken van het aantal frames

Aanvullende optimalisaties: schakel enableMergePathsForKitKatAndAbove(true) in voor apparaten met Android 4.4+ — dit voegt overlappende contouren samen in één pad, waardoor het aantal draw calls wordt verminderd. Gebruik dotLottie in plaats van JSON — het binaire formaat comprimeert de animatie met 50–80% door protobuf-serialisatie, wat de parsetijd verkort. Stel voor animaties in RecyclerView repeatCount = 0 (eenmalig afspelen) in en stop de animatie tijdens scrollen via recyclerView.addOnScrollListener. Volgens Airbnb Engineering Blog (2025) verminderen deze maatregelen de CPU-belasting tot 40%.