Lottie für Swift: Das komplette Tutorial mit Beispielen

Einführung in Lottie für Swift

Lottie ist eine leistungsstarke Open-Source-Bibliothek von Airbnb, mit der du Vektor-Animationen aus Adobe After Effects auf mobilen und Web-Plattformen darstellen kannst. Die Animationen werden als JSON-Dateien exportiert (mit dem Bodymovin-Plugin) und in Echtzeit ohne Qualitätsverlust abgespielt.

Für Swift-Entwickler eröffnet Lottie unbegrenzte Möglichkeiten: von einfachen Lade-Indikatoren und Icons bis hin zu komplexen Vollbild-Animationen, Begrüßungsbildschirmen und interaktiven UI-Elementen. Im Gegensatz zu GIFs oder Videos bieten Lottie-Animationen:

• Vektorbasiert – Sie skalieren ohne Qualitätsverlust auf jedem Gerät.
• Kleine Dateigröße – JSON-Dateien sind meist nur 1 bis 50 KB groß.
• Interaktiv – Du kannst Wiedergabe, Geschwindigkeit, Farbe und Fortschritt steuern.
• Plattformübergreifend – Dieselbe JSON-Datei funktioniert auf iOS, Android, Web, React Native und Flutter.

Dieser Artikel ist ein vollständiges Tutorial zur Verwendung von Lottie in Swift. Du lernst, wie du die Bibliothek installierst, alle wichtigen Methoden beherrschst, ein Praxisbeispiel durchgehst und typische Fehler vermeidest.

Lottie installieren

Lottie für Swift wird über den Swift Package Manager (SPM) oder CocoaPods installiert. Die empfohlene Methode ist SPM, da es direkt in Xcode integriert ist.

Installation mit dem Swift Package Manager (SPM)

1. Öffne dein Projekt in Xcode und wähle File → Add Packages...
2. Füge die Repository-URL ein: https://github.com/airbnb/lottie-ios.git
3. Wähle die Version (empfohlen wird die neueste stabile Version) und klicke auf Add Package.
4. Stelle sicher, dass das Paket zu deinem Target hinzugefügt wurde.

Installation mit CocoaPods

Wenn du CocoaPods verwendest, füge Folgendes in deine Podfile ein:

pod 'lottie-ios'

Führe dann aus:

pod install

Installation mit Carthage (veraltet)

github "airbnb/lottie-ios"

Führe carthage update --platform iOS aus und füge das Framework zu deinem Projekt hinzu.

Wichtig: Nach der Installation musst du die Bibliothek in der gewünschten Datei importieren:

import Lottie

Schnellstart mit Codebeispiel

Lass uns eine einfache App erstellen, die eine Lottie-Animation im Vollbildmodus abspielt.

Schritt 1: JSON-Datei vorbereiten

Lade eine Lottie-Animation herunter oder erstelle sie selbst. Für Tests kannst du kostenlose Animationen von LottieFiles verwenden. Lege die JSON-Datei (z. B. animation.json) in den Assets-Ordner deines Xcode-Projekts.

Schritt 2: Code schreiben

import UIKit
import Lottie

class ViewController: UIViewController {
    
    private var animationView: LottieAnimationView?
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 1. Animation aus Assets initialisieren
        animationView = LottieAnimationView(name: "animation")
        
        // 2. Größe und Position einstellen
        animationView?.frame = view.bounds
        animationView?.contentMode = .scaleAspectFit
        
        // 3. Zum Bildschirm hinzufügen
        view.addSubview(animationView!)
        
        // 4. Animation starten
        animationView?.play { (finished) in
            print("Animation beendet: \(finished)")
        }
    }
}

Starte die App – du siehst, wie die Animation einmal abgespielt wird. Um sie unendlich oft abzuspielen, ersetze den play-Aufruf durch play(fromProgress: 0, toProgress: 1, loopMode: .loop).

Wichtige Methoden und Funktionen von Lottie

Im Folgenden findest du 10 wichtige Methoden von Lottie für Swift. Jede Methode wird mit einer Beschreibung, Parametern und einem funktionierenden Codebeispiel erklärt.