Από το Flash στο Lottie στο State Machines: The Evolution of Web Vector Animation
Πώς το web vector animation μετακινήθηκε από το Flash και το ActionScript στις εξαγωγές After Effects του Lottie και στη συνέχεια στους χρόνους εκτέλεσης του state-machine, και τι άλλαξε κάθε βήμα.
Core Takeaway
Το Flash συνδύασε διανυσματικά κινούμενα σχέδια και διαδραστικότητα σε ένα εργαλείο, αλλά λειτουργούσε σε μια προσθήκη που το Adobe σταμάτησε να υποστηρίζει μετά τις 31 Δεκεμβρίου 2020. Το Lottie επανέφερε τα διανυσματικά κινούμενα σχέδια παίζοντας κινούμενα σχέδια After Effects, τα οποία εξάγονταν ως JSON με JSON και αναπαραγωγή ιστού μόνο σε ZQX1. Οι χρόνοι εκτέλεσης κατάστασης μηχανής, όπως οι 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 είχε αυτή τη συμπεριφορά ενσωματωμένη. ο κόσμος χωρίς πρόσθετα το έχασε.
Κατάσταση μηχανών: συμπεριφορά στο αρχείο ξανά
Οι χρόνοι εκτέλεσης State-machine επαναφέρουν την ιδέα Flash χωρίς την προσθήκη. Το Rive σάς επιτρέπει να σχεδιάζετε διανυσματικά κινούμενα σχέδια και να τα συνδέετε σε ένα μηχάνημα κατάστασης του οποίου οι είσοδοι ελέγχει τον κώδικά σας. Το ExodeUI, το οποίο φτιάχνουμε, εφαρμόζει την ίδια ιδέα στη διεπαφή χρήστη του προϊόντος, προσθέτοντας διάταξη, φυσική ελατηρίου και λογική σε ένα ανοιχτό αρχείο JSON που παίζεται από χρόνους εκτέλεσης για React, SwiftUI, Flutter και άλλα.
Κλειδί Principles για να θυμάστε
- Το 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