От Flash до Lottie до държавни машини: Еволюцията на уеб векторната анимация
Как уеб векторната анимация се премести от Flash и ActionScript към After Effects експорти на Lottie и след това към времена за изпълнение на държавна машина и какво промени всяка стъпка.
Ядро за вкъщи
Flash combined vector animation and interactivity in one tool, but it ran in a plugin that Adobe stopped supporting after December 31, 2020. Lottie brought vector animation back by playing After Effects animations, exported as JSON with Bodymovin, natively on web and mobile, but those animations only play. Времето за изпълнение на държавна машина като Rive и ExodeUI добавя интерактивност обратно към файла за проектиране.
Flash: анимация и логика на едно място
Flash позволява на дизайнерите да рисуват вектори, да ги анимират на времева линия и да добавят поведение с ActionScript, всичко това в един файл. Той захранва игри, реклами и цели уебсайтове. Неговата слабост беше плъгинът: работеше извън собствените технологии на браузъра, с постоянни проблеми със сигурността и производителността. Adobe прекрати поддръжката за Flash Player след 31 декември 2020 г. и блокира изпълнението на съдържанието на Flash от 12 януари 2021 г.
Lottie: вектори без плъгина
Lottie, from Airbnb, parses Adobe After Effects animations exported as JSON with the Bodymovin plugin and renders them natively on web, iOS, Android and React Native. Той направи богатото векторно движение отново практично в приложенията и все още е най-широко поддържаният формат за анимации, които просто се възпроизвеждат.
Липсващото парче: интерактивност
Lottie файловете описват времева линия, а не поведение. Да накарате Lottie анимация да реагира на задържане, зареждане или успех означава писане на код около плейъра. Flash имаше вградено това поведение; светът без плъгини го загуби.
Щатски машини: отново поведение във файла
Времето за изпълнение на държавна машина връща идеята Flash без плъгина. Rive ви позволява да проектирате векторна анимация и да я свържете към държавна машина, чиито входове контролира вашият код. ExodeUI, който правим, прилага същата идея към потребителския интерфейс на продукта, добавяйки оформление, пролетна физика и логика в един отворен JSON файл, възпроизвеждан от времена за изпълнение за React, SwiftUI, Flutter и др.
Ключове Principle, които трябва да запомните
- Flash комбинира векторна анимация и интерактивност в плъгин
- Adobe прекрати поддръжката на Flash Player след 31 декември 2020 г.
- Lottie plays After Effects animations exported with Bodymovin, natively
- Възпроизвеждане на Lottie анимации; интерактивността изисква допълнителен код
- Времето за изпълнение на държавната машина връща авторското поведение обратно във файла
Често задавани въпроси
Източници
- Adobe Flash Player End of Life — Adobe
- lottie-web — GitHub (Airbnb)
- State Machine Playback — Rive документи