Od Flash k Lottie ke státním strojům: Vývoj webové vektorové animace
Jak se webová vektorová animace přesunula z Flash a ActionScript do exportů After Effects Lottie a poté do runtime stavového stroje a co se každý krok změnil.
Core Takeaway
Flash kombinoval vektorovou animaci a interaktivitu v jednom nástroji, ale běžel v pluginu, který Adobe přestal podporovat po 31. prosinci 2020. Lottie vrátil vektorovou animaci zpět přehráváním animací After Effects, exportovaných jako JSON s Bodymovin, nativně pouze na webu a mobilu, ale tyto animace se přehrávají. Běhové moduly stavového stroje, jako jsou Rive a ExodeUI, přidávají interaktivitu zpět do souboru návrhu.
Flash: animace a logika na jednom místě
Flash umožňuje návrhářům kreslit vektory, animovat je na časové ose a přidávat chování pomocí jazyka ActionScript, vše v jednom souboru. Poháněl hry, reklamy a celé webové stránky. Jeho slabinou byl plugin: běžel mimo vlastní technologie prohlížeče, s přetrvávajícími problémy se zabezpečením a výkonem. Adobe ukončil podporu pro Flash Player po 31. prosinci 2020 a zablokoval spuštění obsahu Flash od 12. ledna 2021.
Lottie: vektory bez pluginu
Lottie z Airbnb analyzuje animace Adobe After Effects exportované jako JSON pomocí pluginu Bodymovin a nativně je vykresluje na webu iOS, Android a React Native. Díky tomu byl bohatý vektorový pohyb opět praktický v aplikacích a stále je to nejrozšířenější formát pro animace, které se jednoduše přehrávají.
Chybějící kousek: interaktivita
Soubory Lottie popisují časovou osu, nikoli chování. Aby animace Lottie reagovala na umístění kurzoru, načítání nebo úspěch znamená napsat kód kolem přehrávače. Flash měl toto chování zabudované; svět bez pluginů to ztratil.
Stavové stroje: opět chování v souboru
Běhové moduly State-Machine přinášejí myšlenku Flash zpět bez pluginu. Rive vám umožňuje navrhnout vektorovou animaci a propojit ji se stavovým automatem, jehož vstupy řídí váš kód. ExodeUI, který vyrábíme, aplikuje stejnou myšlenku na uživatelské rozhraní produktu, přidává rozložení, pružinovou fyziku a logiku v jednom otevřeném souboru JSON přehrávaném běhovými moduly pro React, SwiftUI, Flutter a další.
Klíč Principle k zapamatování
- Flash kombinoval vektorovou animaci a interaktivitu v pluginu
- Adobe ukončila podporu Flash Player po 31. prosinci 2020
- Lottie přehrává nativně animace After Effects exportované pomocí Bodymovin
- Přehrávání animací Lottie; interaktivita vyžaduje další kód
- Běhové moduly stavového stroje vracejí do souboru chování autora
Často kladené otázky
Zdroje
- Adobe Flash Player End of Life — Adobe
- lottie-web — GitHub (Airbnb)
- State Machine Playback — Dokumenty Rive