Flash'ten Lottie'e ve Durum Makinelerine: Web Vektör Animasyonunun Evrimi
Web vektör animasyonunun Flash ve ActionScript'ten Lottie'in After Effects dışa aktarmalarına ve ardından durum makinesi çalışma zamanlarına nasıl taşındığı ve her adımda nelerin değiştiği.
Ana nokta
Flash, vektör animasyonu ve etkileşimi tek bir araçta birleştirdi, ancak Adobe'in 31 Aralık 2020'den sonra desteklemeyi bıraktığı bir eklentide çalışıyordu. Lottie, yerel olarak web ve mobilde Bodymovin ile JSON olarak dışa aktarılan After Effects animasyonlarını oynatarak vektör animasyonunu geri getirdi, ancak bu animasyonlar yalnızca oynatılıyor. Rive ve ExodeUI gibi durum makinesi çalışma zamanları, tasarım dosyasına etkileşimi geri kazandırır.
Flash: animasyon ve mantık tek bir yerde
Flash, tasarımcıların tek bir dosyada vektörler çizmesine, bunları zaman çizelgesinde canlandırmasına ve ActionScript ile davranış eklemesine olanak tanır. Oyunlara, reklamlara ve tüm web sitelerine güç verdi. Zayıf noktası eklentiydi: Kalıcı güvenlik ve performans sorunlarıyla birlikte tarayıcının kendi teknolojilerinin dışında çalışıyordu. Adobe, 31 Aralık 2020'den sonra Flash Player desteğini sonlandırdı ve 12 Ocak 2021'den itibaren Flash içeriğinin çalışmasını engelledi.
Lottie: eklentisiz vektörler
Airbnb'den Lottie, Bodymovin eklentisiyle JSON olarak dışa aktarılan Adobe After Effects animasyonlarını ayrıştırır ve bunları web, iOS, Android ve React Native üzerinde yerel olarak işler. Zengin vektör hareketini uygulamalarda yeniden kullanışlı hale getirdi ve basitçe oynatılan animasyonlar için hala en yaygın olarak desteklenen formattır.
Eksik parça: etkileşim
Lottie dosyaları davranışı değil zaman çizelgesini tanımlar. Bir Lottie animasyonunun fareyle üzerine gelme, yükleme veya başarıya yanıt vermesini sağlamak, oynatıcının etrafına kod yazmak anlamına gelir. Flash'in bu davranışı yerleşikti; eklentisiz dünya bunu kaybetti.
Durum makineleri: dosyadaki davranış yeniden
Durum makinesi çalışma zamanları, Flash fikrini eklenti olmadan geri getiriyor. Rive, vektör animasyonu tasarlamanıza ve girişlerini kodunuzun kontrol ettiği bir durum makinesine bağlamanıza olanak tanır. Yaptığımız ExodeUI, React, SwiftUI, Flutter ve daha fazlası için çalışma zamanları tarafından oynatılan açık bir JSON dosyasına düzen, yay fiziği ve mantık ekleyerek aynı fikri ürün kullanıcı arayüzüne uygular.
Hatırlanacak temel ilkeler
- Flash, vektör animasyonunu ve etkileşimi bir eklentide birleştirdi
- Adobe, 31 Aralık 2020'den sonra Flash Oynatıcı desteğini sonlandırdı
- Lottie, Bodymovin ile dışa aktarılan After Effects animasyonlarını yerel olarak oynatır
- Lottie animasyonları oynatılır; etkileşim ekstra kod gerektirir
- Durum makinesi çalışma zamanları, yazılan davranışı dosyaya geri getirir
Sık sorulan sorular
Kaynaklar
- Adobe Flash Player End of Life — Adobe
- lottie-web — GitHub (Airbnb)
- State Machine Playback — Rive belgeleri