Lottie — was ist das, Vektoranimation in mobilen Apps

Was ist Lottie?

Lottie — eine plattformübergreifende Bibliothek zum Abspielen von Vektoranimationen, die 2015 bei Airbnb entwickelt wurde. Sie löst das Problem schwerer Videodateien und Raster-Sprite-Sheets: Ein Designer erstellt Animationen in After Effects, exportiert sie über Bodymovin in JSON, und ein Entwickler bettet diese Datei in eine mobile App ein. Lottie rendert Animationen programmgesteuert über Canvas, Core Animation oder Skia, je nach Plattform.

Der Hauptvorteil von Lottie — Vektoranimationen skalieren ohne Qualitätsverlust auf jedem Bildschirm: von der Apple Watch bis zu 4K-Fernsehern. Die Animations-JSON-Datei ist typischerweise 5–50 KB groß, was dutzende Male kleiner ist als eine äquivalente Videodatei. Laut Airbnb Engineering (2025) unterstützt Lottie über 80% der Adobe After Effects-Funktionen, einschließlich Masken, Effekte, Kurven und Ausdrücke.

Bodymovin — ist ein Plugin für After Effects (kostenlos, GitHub), das eine Komposition in das von der Lottie-Laufzeit verstandene JSON-Format serialisiert. Unterstützt After Effects CC 2018 und neuer. Für komplexe Animationen mit vielen Keyframes wird dotLottie empfohlen — ein Format, das auf Lottie JSON basiert, aber komprimiert und in einer einzigen Datei verpackt ist.

Lottie-Architektur: Wie das Rendern funktioniert

Lottie verwendet eine geschichtete Rendering-Architektur, die sich an die Plattformfähigkeiten anpasst. Auf Android wird die Animation über die Canvas-API gezeichnet — Lotties eigener Renderer (LottieDrawable), der keine Systemanimationen verwendet. Auf iOS verlässt sich Lottie auf Core Animation Layers, was eine hohe Leistung und 60 FPS bietet. Auf Flutter verwendet Lottie Skia Canvas über CustomPainter.

Das Rendern durchläuft drei Phasen: JSON-Parsing — Parsen der Animation in LottieComposition (alle Ebenen, Formen, Keyframes); Interpolation — Berechnung von Zwischenwerten zwischen Keyframes unter Berücksichtigung von Easing-Kurven; Zeichnen — Rendern des aktuellen Frames auf Canvas oder über Core Animation. Lottie unterstützt Hardwarebeschleunigung: auf Android — Beschleunigung über Canvas mit Hardware Accelerator, auf iOS — CALayer mit integrierter GPU-Beschleunigung von Core Animation.

Lottie auf Android (Kotlin) verwenden

Auf Android erweitert LottieAnimationView AppCompatImageView und übernimmt den gesamten Lade- und Renderzyklus. Die JSON-Datei wird im Ordner res/raw oder assets abgelegt. LottieAnimationView unterstützt die Wiedergabesteuerung — play, pause, resume, setFrame, setProgress, repeat, speed — und das Lauschen über AnimatorUpdateListener und 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 Einrichtung von 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 aus Assets und Zwischenspeicherung
lottieView.setAnimation("animations/confetti.json")
lottieView.setCacheStrategy(LottieAnimationView.CacheStrategy.Strong)

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

Best Practices für Android: Verwenden Sie setCacheStrategy(CacheStrategy.Strong) für häufig wiederholte Animationen — die Komposition wird im Arbeitsspeicher zwischengespeichert, und jede neue Instanz analysiert JSON nicht erneut. Für Listen (RecyclerView) verwenden Sie LottieAnimationView mit enableMergePathsForKitKatAndAbove(true) und disableExtraScaleModeForOlderWorkarounds() zur Optimierung des Renderings. Für Animationen mit transparentem Hintergrund legen Sie android:layerType="hardware" für GPU-Beschleunigung fest.

Lottie auf iOS (Swift) verwenden

Auf iOS ist AnimationView die Haupt-Lottie-Klasse für UIKit und SwiftUI. Sie wird über Swift Package Manager oder CocoaPods hinzugefügt. JSON-Dateien werden zum Projekt-Bundle hinzugefügt. AnimationView bestimmt automatisch die Skalierung (logische Bildschirmdichte) und verwendet Core Animation zum Rendern von Ebenen mit 60 FPS.

import Lottie

// UIKit: AnimationView mit manueller Steuerung
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("Animation segment finished: \(finished)")
}
view.addSubview(animationView)

// UIKit: Animation mit Fortschritt (zur Bindung an Ereignisse)
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
    }
}

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

Best Practices für iOS: Für Animationen, die sofort nach dem Laden starten, verwenden Sie animationView.play(fromProgress: 0, toProgress: 1) mit loopMode = .playOnce für einmalige Akzenteffekte. Für Lottie in UITableView/UICollectionView verwenden Sie AnimationView mit einer zwischengespeicherten Animationsdatei über LottieAnimation.cached. Das Rendern einer großen Anzahl von Ebenen (50+) kann zu FPS-Einbrüchen führen — aktivieren Sie in solchen Fällen renderingEngine = .mainThread (Standard) oder .coreAnimation für macOS.

Lottie vs Video: Vergleich der Animationsformate

Lottie unterscheidet sich grundlegend von Videodateien: Es speichert keine Pixel, sondern beschreibt Vektorformen, deren Transformationen und Änderungskurven im Zeitverlauf. Video (MP4, WebM) ist eine Sequenz von Rasterbildern mit fester Auflösung. Der Unterschied zeigt sich in Dateigröße, Skalierungsqualität, Interaktivität und Leistung.

Wann Lottie wählen: Ladesymbole, Like/Reaktions-Animationen, Onboarding-Bildschirme, akzentuierte Mikroanimationen von Schaltflächen. Für komplexe Szenen mit 3D-Effekten, realistischer Beleuchtung oder fotorealistischen Figuren bleibt Video die praktischere Wahl. Lottie ist nicht für die Wiedergabe langer Szenen (mehr als 10 Sekunden) ausgelegt — die optimale Dauer einer Animation beträgt 2–5 Sekunden.

Optimierung der Lottie-Leistung

Die Leistung von Lottie hängt von der Anzahl der Ebenen, der Komplexität der Masken und Effekte sowie dem Renderer ab. Um 60 FPS auf Geräten der Mittelklasse zu halten, befolgen Sie diese Empfehlungen: Begrenzen Sie die Anzahl der Ebenen auf 30–40 pro Szene, vermeiden Sie überlappende verschachtelte Pre-Compositions, verwenden Sie dotLottie für komplexe Animationen.

// Optimierung von Lottie für RecyclerView
import com.airbnb.lottie.LottieAnimationView
import com.airbnb.lottie.LottieDrawable
import com.airbnb.lottie.LottieCompositionFactory

// Zwischenspeicherung der Komposition im Arbeitsspeicher
private val cache = LottieCompositionFactory.setCacheStrategy(CacheStrategy.Strong)

// LottieAnimationView-Pool zur Wiederverwendung
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)
    }
}

// Deaktivierung unnötiger Funktionen
lottieView.enableMergePathsForKitKatAndAbove(true)
lottieView.setHardwareAcceleration(true)
lottieView.setMaxFrame(60) // Begrenzung der Bildanzahl

Zusätzliche Optimierungen: Aktivieren Sie enableMergePathsForKitKatAndAbove(true) für Geräte mit Android 4.4+ — dies führt überlappende Pfade zu einem einzigen Pfad zusammen und reduziert die Anzahl der Draw-Aufrufe. Verwenden Sie dotLottie anstelle von JSON — das Binärformat komprimiert Animationen um 50–80% durch Protobuf-Serialisierung, was die Parse-Zeit verkürzt. Für Animationen in RecyclerView setzen Sie repeatCount = 0 (einmalige Wiedergabe) und stoppen Sie die Animation beim Scrollen über recyclerView.addOnScrollListener. Laut Airbnb Engineering Blog (2025) reduzieren diese Maßnahmen die CPU-Last um bis zu 40%.