Từ Flash đến Lottie đến máy trạng thái: Sự phát triển của hoạt hình vectơ web
Cách hoạt ảnh vectơ web chuyển từ Flash và ActionScript sang xuất After Effects của Lottie, sau đó sang thời gian chạy của máy trạng thái và mỗi bước đã thay đổi những gì.
Điểm chính
Flash đã kết hợp hoạt ảnh vector và khả năng tương tác trong một công cụ, nhưng nó chạy trong một plugin mà Adobe đã ngừng hỗ trợ sau ngày 31 tháng 12 năm 2020. Lottie đã đưa hoạt ảnh vector trở lại bằng cách phát hoạt ảnh After Effects, được xuất dưới dạng JSON với Bodymovin, vốn có trên web và thiết bị di động, nhưng những hoạt ảnh đó chỉ phát. Các thời gian chạy máy trạng thái như Rive và ExodeUI thêm tính tương tác trở lại vào tệp thiết kế.
Flash: hoạt hình và logic ở một nơi
Flash cho phép các nhà thiết kế vẽ vectơ, tạo hoạt ảnh cho chúng theo dòng thời gian và thêm hành vi bằng ActionScript, tất cả trong một tệp. Nó hỗ trợ trò chơi, quảng cáo và toàn bộ trang web. Điểm yếu của nó là plugin: nó chạy bên ngoài công nghệ của trình duyệt, thường xuyên gặp phải các vấn đề về bảo mật và hiệu suất. Adobe đã ngừng hỗ trợ cho Trình phát Flash sau ngày 31 tháng 12 năm 2020 và chặn nội dung Flash chạy từ ngày 12 tháng 1 năm 2021.
Lottie: vectơ không có plugin
Lottie, từ Airbnb, phân tích các hoạt ảnh Adobe After Effects được xuất dưới dạng JSON bằng plugin Bodymovin và hiển thị chúng nguyên bản trên web, iOS, Android và React Native. Nó làm cho chuyển động vector phong phú trở nên thực tế trong các ứng dụng một lần nữa và nó vẫn là định dạng được hỗ trợ rộng rãi nhất cho các hoạt ảnh chỉ phát.
Phần còn thiếu: tính tương tác
Các tệp Lottie mô tả dòng thời gian chứ không phải hành vi. Tạo hoạt ảnh Lottie phản hồi khi di chuột, tải hoặc thành công có nghĩa là viết mã xung quanh trình phát. Flash đã tích hợp sẵn hành vi đó; thế giới không có plugin đã đánh mất nó.
Máy trạng thái: hoạt động lại trong tệp
Thời gian chạy máy trạng thái mang lại ý tưởng Flash mà không cần plugin. Rive cho phép bạn thiết kế hoạt hình vector và kết nối nó với một máy trạng thái có đầu vào điều khiển mã của bạn. ExodeUI do chúng tôi tạo ra, áp dụng ý tưởng tương tự cho giao diện người dùng sản phẩm, thêm bố cục, vật lý lò xo và logic trong một tệp JSON mở được phát bởi các thời gian chạy dành cho React, SwiftUI, Flutter, v.v.
Nguyên tắc chính cần nhớ
- Flash kết hợp hoạt ảnh vector và tính tương tác trong một plugin
- Adobe đã ngừng hỗ trợ Trình phát Flash sau ngày 31 tháng 12 năm 2020
- Lottie phát hoạt ảnh After Effects được xuất bằng Bodymovin, nguyên bản
- Phát hoạt ảnh Lottie; tính tương tác cần thêm mã
- Thời gian chạy của máy trạng thái đưa hành vi được tác giả trở lại tệp
Câu hỏi thường gặp
Nguồn
- Adobe Flash Player End of Life — Adobe
- lottie-web — GitHub (Airbnb)
- State Machine Playback — Tài liệu Rive