Dari Flash hingga Lottie hingga State Machines: Evolusi Animasi Vektor Web
Bagaimana animasi vektor web berpindah dari Flash dan ActionScript ke ekspor After Effects Lottie dan kemudian ke runtime mesin negara, dan perubahan apa yang terjadi pada setiap langkah.
Pengambilan Inti
Flash menggabungkan animasi vektor dan interaktivitas dalam satu alat, namun dijalankan di plugin yang Adobe berhenti mendukungnya setelah 31 Desember 2020. Lottie menghadirkan kembali animasi vektor dengan memutar animasi After Effects, diekspor sebagai JSON dengan Bodymovin, secara asli di web dan seluler, namun animasi tersebut hanya diputar. Runtime mesin negara seperti Rive dan ExodeUI menambahkan interaktivitas kembali ke file desain.
Flash: animasi dan logika di satu tempat
Flash memungkinkan desainer menggambar vektor, menganimasikannya pada timeline dan menambahkan perilaku dengan ActionScript, semuanya dalam satu file. Ini mendukung permainan, iklan, dan seluruh situs web. Kelemahannya adalah pluginnya: ia berjalan di luar teknologi browsernya sendiri, dengan masalah keamanan dan kinerja yang terus-menerus. Adobe mengakhiri dukungan untuk Flash Player setelah 31 Desember 2020, dan memblokir konten Flash agar tidak berjalan mulai 12 Januari 2021.
Lottie: vektor tanpa plugin
Lottie, dari Airbnb, menguraikan animasi Adobe After Effects yang diekspor sebagai JSON dengan plugin Bodymovin dan merendernya secara asli di web, iOS, Android, dan React Native. Ini membuat gerakan vektor kaya menjadi praktis lagi dalam aplikasi, dan masih menjadi format yang paling banyak didukung untuk animasi yang mudah diputar.
Bagian yang hilang: interaktivitas
File Lottie menjelaskan garis waktu, bukan perilaku. Membuat animasi Lottie merespons hover, memuat, atau sukses berarti menulis kode di sekitar pemutar. Flash memiliki perilaku itu; dunia bebas plugin kehilangannya.
Mesin negara: perilaku dalam file lagi
Runtime mesin negara mengembalikan ide Flash tanpa plugin. Rive memungkinkan Anda mendesain animasi vektor dan mengirimkannya ke mesin negara yang inputnya dikontrol oleh kode Anda. ExodeUI, yang kami buat, menerapkan ide yang sama ke UI produk, menambahkan tata letak, fisika pegas, dan logika dalam satu file JSON terbuka yang diputar oleh runtime untuk React, SwiftUI, Flutter, dan banyak lagi.
Kunci Principles untuk Diingat
- Flash menggabungkan animasi vektor dan interaktivitas dalam sebuah plugin
- Adobe mengakhiri dukungan Pemain Flash setelah 31 Desember 2020
- Lottie memutar animasi After Effects yang diekspor dengan Bodymovin, secara asli
- Animasi Lottie diputar; interaktivitas membutuhkan kode tambahan
- Runtime mesin negara mengembalikan perilaku yang dibuat ke dalam file
Pertanyaan yang Sering Diajukan
Sumber
- Adobe Flash Player End of Life — Adobe
- lottie-web — GitHub (Airbnb)
- State Machine Playback — dokumen Rive