Fra Flash til Lottie til State Machines: The Evolution of Web Vector Animation
Hvordan webvektoranimation flyttede fra Flash og ActionScript til Lottie's After Effects-eksporter og derefter til state-machine runtimes, og hvad hvert trin ændrede.
Core Takeaway
Flash kombinerede vektoranimation og interaktivitet i ét værktøj, men det kørte i et plugin, som Adobe stoppede med at understøtte efter den 31. december 2020. Lottie bragte vektoranimation tilbage ved at afspille After Effects-animationer, eksporteret som JSON med Bodymovin med Bodymovin kun på nettet og mobil, men kun dem, der spillede. State-machine runtimes såsom Rive og ExodeUI tilføjer interaktivitet tilbage til designfilen.
Flash: animation og logik på ét sted
Flash lader designere tegne vektorer, animere dem på en tidslinje og tilføje adfærd med ActionScript, alt sammen i én fil. Det drev spil, annoncer og hele websteder. Dens svaghed var pluginnet: det kørte uden for browserens egne teknologier med vedvarende sikkerheds- og ydeevneproblemer. Adobe afsluttede understøttelsen af Flash Player efter 31. december 2020 og blokerede Flash-indhold i at køre fra 12. januar 2021.
Lottie: vektorer uden plugin
Lottie fra Airbnb analyserer Adobe After Effects-animationer eksporteret som JSON med Bodymovin-pluginet og gengiver dem naturligt på nettet, iOS, Android og React Native. Det gjorde fyldige vektorbevægelser praktiske i apps igen, og det er stadig det mest udbredte format til animationer, der simpelthen spiller.
Den manglende brik: interaktivitet
Lottie filer beskriver en tidslinje, ikke adfærd. At få en Lottie-animation til at reagere på svævning, indlæsning eller succes betyder at skrive kode omkring afspilleren. Flash havde den adfærd indbygget; den plugin-fri verden mistede det.
Statsmaskiner: adfærd i filen igen
State-machine runtime bringer Flash ideen tilbage uden plugin. Rive lader dig designe vektoranimation og koble den til en tilstandsmaskine, hvis input din kode styrer. ExodeUI, som vi laver, anvender den samme idé til produktbrugergrænsefladen, tilføjer layout, fjederfysik og logik i én åben JSON-fil afspillet af runtimes for React, SwiftUI, Flutter og mere.
Tast Principles for at huske
- Flash kombinerede vektoranimation og interaktivitet i et plugin
- Adobe afsluttede Flash Player-support efter 31. december 2020
- Lottie afspiller After Effects-animationer eksporteret med Bodymovin, native
- Lottie afspilning af animationer; interaktivitet kræver ekstra kode
- State-machine runtime bringer forfatteradfærd tilbage i filen
Ofte stillede spørgsmål
Kilder
- Adobe Flash Player End of Life — Adobe
- lottie-web — GitHub (Airbnb)
- State Machine Playback — Rive dokumenter