Från Flash till Lottie till State Machines: The Evolution of Web Vector Animation
Hur webbvektoranimering flyttade från Flash och ActionScript till Lottie:s After Effects-exporter och sedan till körtider för tillståndsmaskin, och vad varje steg ändrade.
Core Takeaway
Flash kombinerade vektoranimation och interaktivitet i ett verktyg, men det kördes i ett plugin som Adobe slutade stödja efter den 31 december 2020. Lottie tog tillbaka vektoranimationer genom att spela After Effects-animationer, exporterade som JSON med Bodymovin med Bodymovin endast på webben och mobila animationer, men bara de som spelas upp på webben och mobil. Tillståndsmaskinkörningar som Rive och ExodeUI lägger till interaktivitet tillbaka i designfilen.
Flash: animation och logik på ett ställe
Flash låter designers rita vektorer, animera dem på en tidslinje och lägga till beteende med ActionScript, allt i en fil. Det drev spel, annonser och hela webbplatser. Dess svaghet var plugin: den körde utanför webbläsarens egna teknologier, med ihållande säkerhets- och prestandaproblem. Adobe avslutade stödet för Flash Player efter den 31 december 2020 och blockerade Flash-innehåll från att köras från den 12 januari 2021.
Lottie: vektorer utan plugin
Lottie, från Airbnb, analyserar Adobe After Effects-animationer exporterade som JSON med Bodymovin-plugin och återger dem inbyggt på webben, iOS, Android och React Native. Det gjorde rika vektorrörelser praktiska i appar igen, och det är fortfarande det format som stöds mest för animationer som helt enkelt spelar.
Den saknade biten: interaktivitet
Lottie-filer beskriver en tidslinje, inte beteende. Att få en Lottie-animation att svara på hovring, laddning eller framgång innebär att man skriver kod runt spelaren. Flash hade det beteendet inbyggt; den pluginfria världen förlorade det.
State machines: beteende i filen igen
State-machine runtimes ger Flash-idén tillbaka utan plugin. Rive låter dig designa vektoranimationer och koppla den till en tillståndsmaskin vars ingångar din kod styr. ExodeUI, som vi gör, tillämpar samma idé på produktgränssnittet, lägger till layout, fjäderfysik och logik i en öppen JSON-fil som spelas av runtimes för React, SwiftUI, Flutter och mer.
Nyckel Principles att komma ihåg
- Flash kombinerade vektoranimation och interaktivitet i ett plugin
- Adobe avslutade Flash Player-support efter den 31 december 2020
- Lottie spelar After Effects-animationer som exporteras med Bodymovin, inbyggt
- Lottie-animationer spelas upp; interaktivitet behöver extra kod
- Tillståndsmaskins körtider tar tillbaka det författade beteendet till filen
Vanliga frågor
Källor
- Adobe Flash Player End of Life — Adobe
- lottie-web — GitHub (Airbnb)
- State Machine Playback — Rive dokument