A Flash-től a Lottie-ig az állapotgépekig: A webvektoranimáció fejlődése
Hogyan került át a webvektoros animáció a Flash-ről és az ActionScript-ről a Lottie After Effects exportjaira, majd az állapotgép futási környezetére, és miben változtak az egyes lépések.
Core Takeaway
A Flash egy eszközben egyesítette a vektoros animációt és az interaktivitást, de olyan beépülő modulban futott, amelyet a Adobe 2020. december 31-e után nem támogatott. A Lottie visszahozta a vektoros animációt a After Effects animációk lejátszásával, JSON néven exportálva Bodymovin animációkkal, de csak mobilon, és csak webes animációkkal. Az olyan állapotgép-futási környezetek, mint a Rive és a ExodeUI, visszaadják az interaktivitást a tervfájlba.
Flash: animáció és logika egy helyen
A Flash segítségével a tervezők vektorokat rajzolhatnak, animálhatnak egy idővonalon, és viselkedést adhatnak hozzá az ActionScript segítségével, mindezt egyetlen fájlban. Játékokat, hirdetéseket és egész webhelyeket működtetett. Gyengesége a bővítmény volt: a böngésző saját technológiáin kívül futott, folyamatos biztonsági és teljesítményproblémákkal. A Adobe 2020. december 31. után megszüntette a Flash Player támogatását, és 2021. január 12-től letiltotta a Flash tartalom futását.
Lottie: vektorok a bővítmény nélkül
Az Airbnb-től származó Lottie elemzi a JSON néven exportált Adobe After Effects animációkat a Bodymovin beépülő modullal, és natív módon jeleníti meg őket a weben, a iOS, Android és React Native felületeken. Ismét praktikussá tette a gazdag vektoros mozgást az alkalmazásokban, és még mindig ez a legszélesebb körben támogatott formátum az egyszerűen lejátszott animációk számára.
A hiányzó darab: interaktivitás
A Lottie fájlok egy idővonalat írnak le, nem a viselkedést. Ha egy Lottie animációt reagál a lebegésre, betöltésre vagy sikerre, akkor kódot kell írni a lejátszó köré. A Flash ezt a viselkedést beépítette; a plugin-mentes világ elvesztette.
Állapotgépek: ismét viselkedés a fájlban
Az állapotgép-futási idők visszahozzák a Flash ötletet a bővítmény nélkül. A Rive segítségével vektoranimációt tervezhet, és egy állapotgéphez csatlakoztathatja, amelynek bemeneteit az Ön kódja vezérli. Az általunk készített ExodeUI ugyanezt az ötletet alkalmazza a termék felhasználói felületén, elrendezést, rugófizikát és logikát adva egyetlen nyitott JSON fájlban, amelyet a React, SwiftUI, Flutter és egyebek futtatókörnyezetei játszanak le.
Kulcs Principle, amit meg kell jegyezni
- A Flash vektoros animációt és interaktivitást kombinált egy bővítményben
- A Adobe megszűnt a Flash lejátszó támogatása 2020. december 31. után
- A Lottie natív módon lejátssza a Bodymovin-szel exportált After Effects animációkat
- Lottie animációk lejátszása; az interaktivitáshoz extra kódra van szükség
- Az állapotgép futtatókörnyezetei visszahozzák a szerzői viselkedést a fájlba
Gyakran Ismételt Kérdések
Források
- Adobe Flash Player End of Life — Adobe
- lottie-web — GitHub (Airbnb)
- State Machine Playback — Rive dok