De Flash à Lottie en passant par les machines à états : l'évolution de l'animation vectorielle Web
Comment l'animation vectorielle Web est passée de Flash et ActionScript aux exportations After Effects de Lottie, puis aux environnements d'exécution de machine à états, et ce que chaque étape a changé.
À retenir
Flash combinait animation vectorielle et interactivité dans un seul outil, mais il fonctionnait dans un plugin que Adobe a cessé de prendre en charge après le 31 décembre 2020. Lottie a ramené l'animation vectorielle en lisant les animations After Effects, exportées sous JSON avec Bodymovin, nativement sur le Web et sur mobile, mais ces animations ne sont lues que. Les environnements d'exécution de machine à états tels que Rive et ExodeUI ajoutent de l'interactivité au fichier de conception.
Flash : animation et logique en un seul endroit
Flash permet aux concepteurs de dessiner des vecteurs, de les animer sur une chronologie et d'ajouter des comportements avec ActionScript, le tout dans un seul fichier. Il alimentait des jeux, des publicités et des sites Web entiers. Sa faiblesse était le plugin : il fonctionnait en dehors des technologies propres au navigateur, avec des problèmes persistants de sécurité et de performances. Adobe a mis fin à la prise en charge du lecteur Flash après le 31 décembre 2020 et a bloqué l'exécution du contenu Flash à partir du 12 janvier 2021.
Lottie : vecteurs sans le plugin
Lottie, d'Airbnb, analyse les animations Adobe After Effects exportées sous JSON avec le plugin Bodymovin et les restitue nativement sur le Web, iOS, Android et React Native. Il a rendu le mouvement vectoriel riche à nouveau pratique dans les applications, et il reste le format le plus largement pris en charge pour les animations qui sont simplement lues.
La pièce manquante : l’interactivité
Les fichiers Lottie décrivent une chronologie, pas un comportement. Faire en sorte qu'une animation Lottie réponde au survol, au chargement ou au succès signifie écrire du code autour du lecteur. Flash avait ce comportement intégré ; le monde sans plugin l'a perdu.
Machines à états : comportement dans le fichier à nouveau
Les environnements d'exécution de machine à états ramènent l'idée Flash sans le plugin. Rive vous permet de concevoir une animation vectorielle et de la connecter à une machine à états dont votre code contrôle les entrées. ExodeUI, que nous créons, applique la même idée à l'interface utilisateur du produit, en ajoutant la disposition, la physique des ressorts et la logique dans un fichier JSON ouvert joué par les environnements d'exécution pour React, SwiftUI, Flutter et plus encore.
Principes clés à retenir
- Flash combine animation vectorielle et interactivité dans un plugin
- Adobe a mis fin à la prise en charge du lecteur Flash après le 31 décembre 2020
- Lottie lit les animations After Effects exportées avec Bodymovin, de manière native
- Les animations Lottie sont lues ; l'interactivité nécessite du code supplémentaire
- Les environnements d'exécution de la machine à états ramènent le comportement créé dans le fichier
Questions fréquentes
Sources
- Adobe Flash Player End of Life — Adobe
- lottie-web — GitHub (Airbnb)
- State Machine Playback — Documents Rive