Від 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 тощо.
Ключі Principle, які слід запам’ятати
- Flash поєднав векторну анімацію та інтерактивність у плагіні
- Adobe припинив підтримку Flash Player після 31 грудня 2020 року
- Lottie відтворює After Effects анімації, експортовані за допомогою Bodymovin, оригінально
- відтворення анімації Lottie; інтерактивність потребує додаткового коду
- Середи виконання кінцевої машини повертають авторську поведінку назад у файл
Часті запитання
Джерела
- Adobe Flash Player End of Life — Adobe
- lottie-web — GitHub (Airbnb)
- State Machine Playback — Rive документи