Od Flash po Lottie po štátne stroje: Vývoj webovej vektorovej animácie
Ako sa webová vektorová animácia presunula zo Flash a ActionScript do exportov After Effects Lottie a potom do runtime stavového stroja a čo sa každý krok zmenil.
Core Takeaway
Flash kombinoval vektorovú animáciu a interaktivitu v jednom nástroji, ale bežal v doplnku, ktorý Adobe prestal podporovať po 31. decembri 2020. Lottie vrátil vektorovú animáciu späť prehrávaním animácií After Effects, exportovaných ako JSON so Bodymovin, natívne sa prehrávajú iba na webe a v mobile, ale tieto animácie. Runtime stavového stroja ako Rive a ExodeUI pridávajú interaktivitu späť do súboru návrhu.
Flash: animácia a logika na jednom mieste
Flash umožňuje dizajnérom kresliť vektory, animovať ich na časovej osi a pridať správanie pomocou jazyka ActionScript, všetko v jednom súbore. Poháňal hry, reklamy a celé webové stránky. Jeho slabinou bol plugin: bežal mimo vlastných technológií prehliadača, s pretrvávajúcimi problémami so zabezpečením a výkonom. Adobe ukončil podporu pre prehrávač Flash po 31. decembri 2020 a zablokoval spustenie obsahu Flash od 12. januára 2021.
Lottie: vektory bez doplnku
Lottie od Airbnb analyzuje animácie Adobe After Effects exportované ako JSON pomocou doplnku Bodymovin a natívne ich vykresľuje na webe, iOS, Android a React Native. Vďaka tomu bol bohatý vektorový pohyb opäť praktický v aplikáciách a stále je to najrozšírenejší formát pre animácie, ktoré sa jednoducho prehrávajú.
Chýbajúci kúsok: interaktivita
Súbory Lottie popisujú časovú os, nie správanie. Reagovanie animácie Lottie na vznášanie sa, načítanie alebo úspech znamená napísanie kódu okolo prehrávača. Flash má toto správanie zabudované; svet bez doplnkov to stratil.
Stavové stroje: opäť správanie v súbore
Runtime stavového stroja prinášajú myšlienku Flash späť bez doplnku. Rive vám umožňuje navrhnúť vektorovú animáciu a prepojiť ju so stavovým automatom, ktorého vstupy riadia váš kód. ExodeUI, ktorý vyrábame, aplikuje rovnakú myšlienku na používateľské rozhranie produktu, pridáva rozloženie, fyziku pružiny a logiku v jednom otvorenom súbore JSON prehrávanom runtimemi pre React, SwiftUI, Flutter a ďalšie.
Kľúč Principle na zapamätanie
- Flash kombinuje vektorovú animáciu a interaktivitu v doplnku
- Adobe ukončila podporu prehrávača Flash po 31. decembri 2020
- Lottie prehráva animácie After Effects exportované pomocou Bodymovin, natívne
- Prehrávanie animácií Lottie; interaktivita vyžaduje dodatočný kód
- Runtime stavového stroja prinášajú autorské správanie späť do súboru
Často kladené otázky
Zdroje
- Adobe Flash Player End of Life — Adobe
- lottie-web — GitHub (Airbnb)
- State Machine Playback — Dokumenty Rive