Von Flash über Lottie bis hin zu Zustandsmaschinen: Die Entwicklung der Web-Vektoranimation
Wie sich Web-Vektoranimationen von Flash und ActionScript zu den After Effects-Exporten von Lottie und dann zu Zustandsmaschinenlaufzeiten bewegten und was sich bei jedem Schritt änderte.
Kernaussage
Flash kombinierte Vektoranimation und Interaktivität in einem Tool, lief jedoch in einem Plugin, das Adobe nach dem 31. Dezember 2020 nicht mehr unterstützte. Lottie brachte Vektoranimationen zurück, indem es After Effects-Animationen abspielte, die als JSON mit Bodymovin exportiert wurden, nativ im Web und auf Mobilgeräten, aber diese Animationen werden nur abgespielt. Zustandsmaschinenlaufzeiten wie Rive und ExodeUI fügen der Designdatei wieder Interaktivität hinzu.
Flash: Animation und Logik an einem Ort
Mit Flash können Designer Vektoren zeichnen, sie auf einer Zeitleiste animieren und Verhalten mit ActionScript hinzufügen – alles in einer Datei. Es unterstützte Spiele, Anzeigen und ganze Websites. Seine Schwäche war das Plugin: Es lief außerhalb der browsereigenen Technologien und hatte anhaltende Sicherheits- und Leistungsprobleme. Adobe beendete die Unterstützung für den Flash Player nach dem 31. Dezember 2020 und blockierte die Ausführung von Flash-Inhalten ab dem 12. Januar 2021.
Lottie: Vektoren ohne Plugin
Lottie von Airbnb analysiert Adobe After Effects-Animationen, die als JSON mit dem Bodymovin-Plugin exportiert wurden, und rendert sie nativ im Web, iOS, Android und React Native. Dadurch wurde Rich Vector Motion in Apps wieder praktikabel und es ist immer noch das am weitesten verbreitete Format für Animationen, die einfach abgespielt werden.
Das fehlende Teil: Interaktivität
Lottie-Dateien beschreiben eine Zeitleiste, kein Verhalten. Damit eine Lottie-Animation auf Schweben, Laden oder Erfolg reagiert, muss Code um den Player herum geschrieben werden. Flash hatte dieses Verhalten eingebaut; Die Plugin-freie Welt hat es verloren.
Zustandsautomaten: Verhalten in der Datei erneut
State-Machine-Laufzeiten bringen die Flash-Idee ohne das Plugin zurück. Mit Rive können Sie Vektoranimationen entwerfen und sie mit einer Zustandsmaschine verbinden, deren Eingaben Ihr Code steuert. ExodeUI, das wir erstellen, wendet die gleiche Idee auf die Benutzeroberfläche des Produkts an und fügt Layout, Federphysik und Logik in einer offenen JSON-Datei hinzu, die von Laufzeiten für React, SwiftUI, Flutter und mehr abgespielt wird.
Wichtige Prinzipien
- Flash kombinierte Vektoranimation und Interaktivität in einem Plugin
- Adobe beendete die Flash-Player-Unterstützung nach dem 31. Dezember 2020
- Lottie spielt After Effects-Animationen, die mit Bodymovin exportiert wurden, nativ ab
- Lottie Animationen werden abgespielt; Interaktivität erfordert zusätzlichen Code
- State-Machine-Laufzeiten bringen erstelltes Verhalten zurück in die Datei
Häufige Fragen
Quellen
- Adobe Flash Player End of Life — Adobe
- lottie-web — GitHub (Airbnb)
- State Machine Playback — Rive-Dokumente