De la Flash la Lottie la mașini de stat: evoluția animației vectoriale web
Cum s-a mutat animația vectorială web de la Flash și ActionScript la exporturile After Effects de la Lottie și apoi la timpii de execuție a mașinii de stat și ce a schimbat fiecare pas.
Core Takeaway
Flash a combinat animația vectorială și interactivitatea într-un singur instrument, dar a rulat într-un plugin pe care Adobe a încetat să îl mai suporte după 31 decembrie 2020. Lottie a adus animația vectorială înapoi prin redarea animațiilor After Effects, exportate ca JSON cu Bodymovin, doar animațiile native și pe mobil, dar pe web. Timpurile de rulare ale mașinii de stat, cum ar fi Rive și ExodeUI, adaugă interactivitate înapoi în fișierul de proiectare.
Flash: animație și logică într-un singur loc
Flash le permite designerilor să deseneze vectori, să le anime pe o linie temporală și să adauge comportament cu ActionScript, totul într-un singur fișier. A alimentat jocuri, reclame și site-uri web întregi. Punctul său slab a fost pluginul: rula în afara tehnologiilor proprii ale browserului, cu probleme persistente de securitate și performanță. Adobe a încetat suportul pentru Flash Player după 31 decembrie 2020 și a blocat difuzarea conținutului Flash începând cu 12 ianuarie 2021.
Lottie: vectori fără plugin
Lottie, de la Airbnb, analizează animațiile Adobe After Effects exportate ca JSON cu pluginul Bodymovin și le redă nativ pe web, iOS, Android și React Native. A făcut din nou practică mișcarea vectorială bogată în aplicații și este încă cel mai acceptat format pentru animațiile care pur și simplu sunt redate.
Piesa lipsă: interactivitate
Fișierele Lottie descriu o cronologie, nu un comportament. A face ca o animație Lottie să răspundă la hover, la încărcare sau la succes înseamnă a scrie cod în jurul playerului. Flash avea acel comportament încorporat; lumea fără plugin a pierdut-o.
Mașini de stat: comportament din nou în fișier
Timpul de rulare a mașinii de stat aduc ideea Flash înapoi fără plugin. Rive vă permite să proiectați animație vectorială și să o conectați la o mașină de stat ale cărei intrări le controlează codul. ExodeUI, pe care îl facem, aplică aceeași idee interfeței de utilizare a produsului, adăugând aspectul, fizica primăverii și logica într-un fișier deschis JSON redat de runtime pentru React, SwiftUI, Flutter și multe altele.
Cheie Principles de reținut
- Flash a combinat animația vectorială și interactivitatea într-un plugin
- Adobe a încetat asistența pentru Flash Player după 31 decembrie 2020
- Lottie redă animații After Effects exportate cu Bodymovin, nativ
- Lottie joacă animații; interactivitatea are nevoie de cod suplimentar
- Timpurile de execuție ale mașinii de stat aduc comportamentul creat înapoi în fișier
Întrebări frecvente
Surse
- Adobe Flash Player End of Life — Adobe
- lottie-web — GitHub (Airbnb)
- State Machine Playback — Rive documente