Podcast
Videos
September 6, 2022
Nov 2022
8 Min

Lottie-iOS - Geniale Animationen mit nur wenigen Zeilen Code

Wer hat nicht auch schon mal aufwendige Animationen eines Designers umsetzen müssen und sich nach einer einfachen Umsetzungsmöglichkeit gesehnt? Die Lösung bietet das Framework Lottie, mit dem sich super einfach, coole Animationen erstellen lassen.

Von Airbnb entwickelt, parst Lottie JSON-Files und rendert diese nativ für iOS, Android und React Native.
Als App-Entwickler kann man die Animation mit nur wenigen Zeilen Code implementieren. Der Designer erstellt die Animation und kann seiner Kreativität freien Lauf lassen, denn hier keine Grenzen gesetzt. Der App-Entwickler kann sich während dessen auf andere Aufgaben konzentrieren.

Installation:

Für das Hinzufügen des Frameworks zum Projekt, bieten sich verschiedenene Möglichkeiten: Zum Einen kann Lottie über Cocoapods eingebunden werden. Dazu fügt man im Podfile die Abhängigkeit pod 'lottie-ios' hinzu und führt anschließend den Befehl pod install aus, um schlussendlich das Framework dem Projekt hinzuzufügen.
Empfehlenswert ist auch die Möglichkeit Lottie mittels Carthage zu installieren. Hierzu muss im Cartfile lediglich das Framework referenziert werden. github "airbnb/lottie-ios" "master"
Anschließend lässt sich das Framework mittels carthage update --platform iOS installieren.

JSON-File

Keine Sorge, man muss das JSON-File nicht verstehen, sondern nur verwenden. Damit Lottie das JSON-File rendern kann, muss es mit After Effects erstellt werden.

Animation mit Adobe After Effects

Es empfiehlt sich, das Bildmaterial mit Adobe Illustrator zu erstellen und anschließend in After Effects zu importieren.
Unter Ablage > importieren > Datei... die .ai-Datei auswählen.

Wenn man in Adobe Illustrator Ebenen verwendet hat, sind diese auch in After Effects vorhanden und erleichtern das Erstellen der Animation innerhalb dessen erheblich.

Mit einem Doppelklick auf das importierte File erscheinen die Ebenen in der Zeitachse und sind zum Animieren bereit.

In der Zeitachse werden Key-Frames gesetzt, die letztendlich die Animation bestimmen. Tutorials für After-Effects Grundlagen gibt es reichlich im Netz. In unserem Beispiel animieren wir das Aufladen einer Batterie, wozu lediglich die Batterie-Balken passend in einzelnen Key-Frames ein- und ausgeblendet werden müssen.

JSON exportieren

Für das Exportieren der Animation als JSON wird an der Stelle ein Plugin für After Effects benötigt. Das Plugin heißt Bodymovin. Den Download-Link und eine genaue Beschreibung findet man hier (Link nicht mehr verfügbar).

JSON-Animation testen

Bevor man mit der Implementierung beginnt, sollte die erstellte Animation getestet werden. Es gibt es eine Möglichkeit die JSON-Animation zu testen, ohne eine einzige Zeile Code zu schreiben: Auf der Webseite Lottiefiles Preview zieht man das JSON-File einfach per Drag-and-Drop in das Webbrowser-Fenster und schon läuft die Animation. Sollte der Bildschirm weiß sein bzw. nichts anzeigen, dann ist das JSON-File nicht korrekt erstellt/exportiert worden.

Implementierung

Die Animation lässt sich an jeder beliebigen Stelle in der App implementieren. In unserem Fall erstellen wir eine UIView, die als eine Container-View dient und fügen dieser eine LOTAnimationView hinzu. Für name wird der Name der JSON-Datei angegeben:



import Lottie

class ViewController: UIViewController {
   // MARK: - IBOutlets
   @IBOutlet private var containerView: UIView!

   // MARK: - Instance Properties
   private let animationView = LOTAnimationView(name: "battery")

   // MARK: - View Lifecycle Methods
   override func viewDidLoad() {
       super.viewDidLoad()

       setupAnimationView()
   }

   ...

}

Das JSON-File wird zu den Assets im Projekt hinzugefügt:

Die Animation kann programmatisch angepasst werden. Für unsere Animation wird die Geschwindikeit mit animationSpeed angepasst und die Animation soll sich ständig mit loopAnimation wiederholen. Mit play() wird die Animation gestartet:

   // MARK: - Instance Methods
   private func setupAnimationView() {
       containerView.addSubview(animationView)

       animationView.frame = containerView.frame
       animationView.setAnimation(named: "battery")
       animationView.animationSpeed = 5
       animationView.loopAnimation = true
       animationView.play()
   }  

___ Je nach Anwendungsfall kann sich das JSON-File auch auf einem Server befinden und von da aufgerufen werden.
Die Online-Community für Lottiefiles bietet jede Menge Animationen zum Downloaden und Ausprobieren.

Für unsere nächste Animation verwenden wir kein lokales JSON-File, sondern laden stattdessen das JSON-File über eine URL für eine Geschenkbox.

   // MARK: - Instance Properties
   private let giftAnimationView: LOTAnimationView = {
       let urlString = "https://www.lottiefiles.com/storage/datafiles/zc3XRzudyWE36ZBJr7PIkkqq0PFIrIBgp4ojqShI/newAnimation.json"
       guard let url = URL(string: urlString) else { return LOTAnimationView(name: "battery") }

       let lottieAnimation = LOTAnimationView(contentsOf: url)

       return lottieAnimation
   }()    
// MARK: - Instance Methods
   private func setupGiftAnimationView() {
       containerView.addSubview(giftAnimationView)

       giftAnimationView.frame = containerView.frame
       giftAnimationView.autoReverseAnimation = true
       giftAnimationView.loopAnimation = true
       giftAnimationView.play()
   }
Kleine Anmerkung am Rande:

Während sich die App im Vordergrund befindet, wird die Animation abgespielt. Sollte man die App verlassen und zum Beispiel eine andere verwenden oder den Home-Button betätigen, gerät die App in den Hintergrund und die Animation wird gestoppt. Beim erneuten Öffnen der App spielt die Animation nicht mehr ab. Um diesen Fehler zu fixen, muss eine Methode implementiert werden, die die Animation wieder startet, sobald die App im Vordergrund ist. Hier verwenden wir das NotificationCenter, um auf das Ereignis zu reagieren.

  // MARK: - View Lifecycle Methods
   override func viewDidLoad() {
       super.viewDidLoad()

       ...

       NotificationCenter.default.addObserver(self, selector: #selector(handleEnterForeground), name: .UIApplicationWillEnterForeground, object: nil)
   }


   // MARK: - Instance Methods
   @objc
   private func handleEnterForeground() {
       animationView.play()
   }

Weitere Infos

Das Framework bietet viele weitere Möglichkeiten, um mit Animationen umzugehen. Für mehr Information kann man hier die offizielle Dokumentation anschauen.

Andreas Link
Andreas Link
Anh Dung Pham
Anh Dung Pham
Cihat Gündüz
Cihat Gündüz
Andreas Link
Ekrem Sentürk
Eva Maria Stock
Eva-Marie Stock
Andreas Link
Giulia Maier
Inken Marei Kolthoff
Inken Marei Kolthoff
Janina Baumann
Janina Baumann
Janina Bokeloh
Janina Bokeloh
Jeanette Schmidt
Jeanette Schmidt
Jens Krug
Jens Krug
Kajorn Pathomkeerati
Kajorn Pathomkeerati
Karl Barth
Karl Barth
Kay Dollt
Kay Dollt
Murat Yilmaz
Murat Yilmaz
Thorsten Hack
Thorsten Hack
Thorsten Hack
Thorsten Hack
Inken Marei Kolthoff
Cynthia Murat
Inhaltsverzeichnis

Weitere Artikel

Mitarbeiter-Interview mit Daniela
Janina Baumann
26.11.2022
4 Min

Mitarbeiter-Interview mit Daniela

Diesmal im Mitarbeiterinterview: Daniela aus unserem Designteam.

Artikel lesen
Android-Apps mit MVVM in Kotlin effektiv programmieren
Karl Barth
26.11.2022
5 Min

Android-Apps mit MVVM in Kotlin effektiv programmieren

Apps schnell und effizient programmieren - wer will das nicht?

Artikel lesen
Markdown für Facebook, Twitter & Co
Janina Bokeloh
26.11.2022
3 Min

Markdown für Facebook, Twitter & Co

Jede Woche finden Sie genau hier einen neuen Blogbeitrag. Durchschnittlich zweimal die Woche halten wir alle auf dem Laufenden via Facebook und Twitter.

Artikel lesen

Jetzt kostenloses Strategiegespräch sichern!

Die Beratungen sind grundsätzlich schnell ausgebucht, deshalb fülle jetzt in 2 Minuten das kurze Formular aus.

Jetzt Strategiegespräch sichern