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.
