От Flash до Lottie и к конечным автоматам: эволюция векторной веб-анимации
Как веб-векторная анимация перешла из Flash и ActionScript в экспорт After Effects из Lottie, а затем в среду выполнения конечных автоматов, и что изменилось на каждом этапе.
Главное
Flash объединил векторную анимацию и интерактивность в одном инструменте, но работал в плагине, который Adobe прекратил поддерживать после 31 декабря 2020 года. Lottie вернул векторную анимацию, воспроизводя анимацию After Effects, экспортированную как JSON с Bodymovin, изначально в Интернете и на мобильных устройствах, но эти анимации только воспроизводятся. Среды выполнения конечных автоматов, такие как Rive и ExodeUI, снова добавляют интерактивность в файл проекта.
Flash: анимация и логика в одном месте
Flash позволяет дизайнерам рисовать векторы, анимировать их на временной шкале и добавлять поведение с помощью ActionScript — и все это в одном файле. Он приводил в действие игры, рекламу и целые веб-сайты. Его слабостью был плагин: он работал вне собственных технологий браузера, вызывая постоянные проблемы с безопасностью и производительностью. Adobe прекратил поддержку Flash Player после 31 декабря 2020 г. и заблокировал запуск контента Flash с 12 января 2021 г.
Lottie: векторы без плагина
Lottie от Airbnb анализирует анимации Adobe After Effects, экспортированные как JSON с помощью плагина Bodymovin, и отображает их в Интернете, iOS, Android и React Native. Это снова сделало богатое векторное движение практичным в приложениях, и это по-прежнему наиболее широко поддерживаемый формат для просто воспроизводимой анимации.
Недостающий элемент: интерактивность
Файлы Lottie описывают временную шкалу, а не поведение. Чтобы анимация Lottie реагировала на наведение курсора, загрузку или успех, необходимо писать код вокруг проигрывателя. В Flash такое поведение было встроено; мир без плагинов потерял его.
Конечные автоматы: снова поведение в файле
Среды выполнения конечных автоматов возвращают идею Flash без плагина. Rive позволяет создавать векторную анимацию и подключать ее к конечному автомату, входными данными которого управляет ваш код. ExodeUI, который мы создаем, применяет ту же идею к пользовательскому интерфейсу продукта, добавляя макет, пружинную физику и логику в один открытый файл JSON, воспроизводимый средами выполнения для React, SwiftUI, Flutter и других.
Ключевые принципы
- Flash объединил векторную анимацию и интерактивность в плагине
- Adobe прекратил поддержку Flash Player после 31 декабря 2020 г.
- Lottie воспроизводит анимацию After Effects, экспортированную с помощью Bodymovin, изначально
- Lottie воспроизводится анимация; интерактивность требует дополнительного кода
- Среды выполнения конечных автоматов возвращают авторское поведение обратно в файл.
Частые вопросы
Источники
- Adobe Flash Player End of Life — Adobe
- lottie-web — Гитхаб (Airbnb)
- State Machine Playback — Документация Rive