Fra Flash til Lottie til State Machines: The Evolution of Web Vector Animation
Hvordan webvektoranimasjon flyttet fra Flash og ActionScript til Lotties After Effects-eksporter og deretter til tilstandsmaskinkjøringer, og hva hvert trinn endret.
Kjerne takeaway
Flash kombinerte vektoranimasjon og interaktivitet i ett verktøy, men det kjørte i en plugin som Adobe sluttet å støtte etter 31. desember 2020. Lottie brakte vektoranimasjon tilbake ved å spille av After Effects-animasjoner, eksportert som JSON med Bodymovin med Bodymovin bare på nett og mobil, men bare spill. Kjøretider for tilstandsmaskiner som Rive og ExodeUI legger til interaktivitet tilbake i designfilen.
Flash: animasjon og logikk på ett sted
Flash lar designere tegne vektorer, animere dem på en tidslinje og legge til atferd med ActionScript, alt i én fil. Den drev spill, annonser og hele nettsteder. Svakheten var plugin-en: den kjørte utenfor nettleserens egne teknologier, med vedvarende sikkerhets- og ytelsesproblemer. Adobe avsluttet støtten for Flash Player etter 31. desember 2020, og blokkerte Flash-innhold fra å kjøre fra 12. januar 2021.
Lottie: vektorer uten plugin
Lottie, fra Airbnb, analyserer Adobe After Effects-animasjoner eksportert som JSON med Bodymovin-plugin og gjengir dem naturlig på nettet, iOS, Android og React Native. Det gjorde rike vektorbevegelser praktiske i apper igjen, og det er fortsatt det mest støttede formatet for animasjoner som bare spiller.
Den manglende brikken: interaktivitet
Lottie-filer beskriver en tidslinje, ikke oppførsel. Å få en Lottie-animasjon til å reagere på sveving, lasting eller suksess betyr å skrive kode rundt spilleren. Flash hadde den oppførselen innebygd; den plugin-frie verden mistet den.
State maskiner: oppførsel i filen igjen
State-machine runtime bringer Flash ideen tilbake uten plugin. Rive lar deg designe vektoranimasjon og koble den til en tilstandsmaskin hvis innganger koden din kontrollerer. ExodeUI, som vi lager, bruker den samme ideen på produktets brukergrensesnitt, og legger til layout, vårfysikk og logikk i én åpen JSON-fil som spilles av kjøretider for React, SwiftUI, Flutter og mer.
Tast Principles å huske
- Flash kombinerte vektoranimasjon og interaktivitet i en plugin
- Adobe avsluttet Flash Player-støtte etter 31. desember 2020
- Lottie spiller After Effects-animasjoner eksportert med Bodymovin, naturlig
- Lottie animasjoner spille; interaktivitet trenger ekstra kode
- State-machine kjøretider bringer forfatteradferd tilbake til filen
Ofte stilte spørsmål
Kilder
- Adobe Flash Player End of Life — Adobe
- lottie-web — GitHub (Airbnb)
- State Machine Playback — Rive dokumenter