Od Flash do Lottie do maszyn stanowych: ewolucja animacji wektorowej w Internecie
Jak animacja wektorowa sieci Web przeszła z Flash i ActionScript do eksportu After Effects Lottie, a następnie do środowisk wykonawczych maszyny stanowej i co zmieniło się na każdym kroku.
Rdzeń na wynos
Flash łączył animację wektorową i interaktywność w jednym narzędziu, ale działał we wtyczce, której Adobe przestał obsługiwać po 31 grudnia 2020 r. Lottie przywrócił animację wektorową, odtwarzając animacje After Effects, wyeksportowane jako JSON z Bodymovin, natywnie w Internecie i na urządzeniach mobilnych, ale te animacje są tylko odtwarzane. Środowiska wykonawcze maszyny stanowej, takie jak Rive i ExodeUI, ponownie dodają interaktywność do pliku projektu.
Flash: animacja i logika w jednym miejscu
Flash pozwala projektantom rysować wektory, animować je na osi czasu i dodawać zachowania za pomocą ActionScript, a wszystko to w jednym pliku. Obsługuje gry, reklamy i całe strony internetowe. Jej słabością była wtyczka: działała poza własnymi technologiami przeglądarki, powodując ciągłe problemy z bezpieczeństwem i wydajnością. Adobe zakończył obsługę odtwarzacza Flash po 31 grudnia 2020 r. i zablokował uruchamianie zawartości Flash od 12 stycznia 2021 r.
Lottie: wektory bez wtyczki
Lottie z Airbnb analizuje animacje Adobe After Effects wyeksportowane jako JSON za pomocą wtyczki Bodymovin i renderuje je natywnie w Internecie, iOS, Android i React Native. Dzięki temu bogaty ruch wektorowy znów stał się praktyczny w aplikacjach i nadal jest to najszerzej obsługiwany format animacji, które po prostu odtwarzają.
Brakujący element: interaktywność
Pliki Lottie opisują oś czasu, a nie zachowanie. Sprawienie, że animacja Lottie reaguje na najechanie myszką, załadowanie lub powodzenie, oznacza pisanie kodu wokół odtwarzacza. Flash ma wbudowane takie zachowanie; świat wolny od wtyczek zgubił to.
Maszyny stanowe: ponowne zachowanie w pliku
Środowiska wykonawcze maszyny stanowej przywracają pomysł Flash bez wtyczki. Rive pozwala zaprojektować animację wektorową i podłączyć ją do maszyny stanowej, której wejściami steruje Twój kod. ExodeUI, który tworzymy, wykorzystuje ten sam pomysł w interfejsie użytkownika produktu, dodając układ, fizykę sprężyn i logikę w jednym otwartym pliku JSON odtwarzanym przez środowiska wykonawcze dla React, SwiftUI, Flutter i innych.
Klucz Principles do zapamiętania
- Flash połączył animację wektorową i interaktywność we wtyczce
- Adobe zakończył obsługę odtwarzacza Flash po 31 grudnia 2020 r.
- Lottie odtwarza natywnie animacje After Effects wyeksportowane za pomocą Bodymovin
- Odtwarzanie animacji Lottie; interaktywność wymaga dodatkowego kodu
- Środowiska wykonawcze maszyny stanowej przywracają autorskie zachowanie z powrotem do pliku
Często zadawane pytania
Źródła
- Adobe Flash Player End of Life — Adobe
- lottie-web — GitHub (Airbnb)
- State Machine Playback — Dokumentacja Rive