Rive Animation for Flutter : un guide du débutant pour créer facilement des animations époustouflantes !

Les animations augmentent généralement l'attrait visuel d'une application ou d'un site Web et améliorent l'engagement global des utilisateurs. Selon une étude de Forrester Research, les sites Web avec des animations bien exécutées connaissent une augmentation de l'engagement des utilisateurs pouvant atteindre 400 %. Des animations engageantes peuvent capter l'attention des utilisateurs et les encourager à interagir davantage avec la plateforme. Cependant, les développeurs doivent apprendre à maîtriser l'animation, en particulier lorsqu'ils travaillent avec des outils et des techniques d'animation plus avancés.

Saisir Rive en tant que développeur sans expérience en animation peut être relativement facile par rapport à d'autres outils ou frameworks d'animation. Rive (anciennement connu sous le nom de Flare) est conçu pour être convivial et accessible aux développeurs, même ceux qui ont peu ou pas d'expérience en animation. Dans cet article, vous apprendrez à créer facilement de superbes animations Rive simples et à les gérer dans votre application Flutter.

Table des matières

• Introduction à Rive🧙‍♂️

  • Concepts de base dans Rive🧗

• Une animation de connexion interactive simple🚀

  • Configurez l'élément sur votre Artboard📃
  • Temps d'animation ! 🕶️
  • Configurez votre State Machine🏍️
  • Implémentez l'animation dans votre application Flutter👨‍🚒

• Conclusion🏋️‍♀️

• Références🧶

  
  

Introduction à Rive🧙‍♂️

Rive est un outil d'animation et un moteur d'exécution puissants et conviviaux qui permettent aux développeurs et aux concepteurs de créer des animations époustouflantes et interactives pour diverses plates-formes, notamment des applications mobiles, des applications Web et des jeux.

Concepts de base dans Rive🧗

Voici les notions clés :

1. Plan de travail : un plan de travail est un canevas sur lequel vous créez votre animation. C'est l'endroit principal pour créer et organiser des éléments d'animation, tels que des groupes, des contraintes, des os, etc.
2. Chronologie : la chronologie est l'endroit où les animations sont définies. Il vous permet de définir des images clés et de spécifier comment les objets doivent changer au fil du temps. Les images clés représentent des moments spécifiques dans le temps où les propriétés d'un objet sont explicitement définies. Le système d'animation interpole entre les images clés pour créer des transitions fluides.
3. Machine d'état : Rive dispose d'une fonction de machine d'état qui vous permet de spécifier différents états pour votre animation. Vous pouvez déclencher des transitions d'état en fonction de l'entrée de l'utilisateur ou d'autres conditions, permettant la création d'animations interactives avec différents comportements en fonction de l'état actuel.
4. Exportation de code : Rive vous permet d'exporter des animations sous forme de code, ce qui facilite leur intégration dans vos applications. Pour les développeurs Flutter, Rive propose un package d'exécution et d'intégration Flutter qui facilite l'utilisation des animations Rive dans les projets Flutter.

Une animation de connexion interactive simple🚀

Nous allons passer par le processus de création d'une animation de connexion simple et l'exporter vers notre application Flutter. Nous utiliserons la StateMachine pour gérer l'interactivité de cette animation dans l'application. Au final, ça devrait ressembler à ça 👇🏽

Configurez l'élément sur votre Artboard📃

Suivez les étapes ci-dessous pour configurer l'élément sur le plan de travail Rive :

• Tout d'abord, nous devrons obtenir l'élément lui-même. Je l'ai obtenu à partir des modèles d'illustration User Personas sur Figma. Exportez l'élément en tant que fichier SVG.
• Allez sur Rive Cliquez sur le bouton GetStarted pour ouvrir vos brouillons
• Dans vos brouillons, créez un nouveau fichier et sélectionnez un plan de travail vierge.
• Faites glisser et déposez l'élément sur le plan de travail, il sera automatiquement ajouté au dossier des actifs et vous pouvez le voir placé sur votre plan de travail, il devrait ressembler à ceci 👇🏽

• Dans la barre latérale, nous allons regrouper les différentes formes qui composent cet élément et les nommer en conséquence. Sélectionnez tout ce que vous voulez grouper en utilisant Ctrl ou Ctrl + Maj . Lorsque vous le sélectionnez, utilisez Ctrl + G pour les regrouper. Ça devrait ressembler à ça 👇🏽

• Nous allons maintenant ajouter des os à cet élément. Les os aident à créer des animations plus dynamiques et réalistes. Compte tenu de la façon dont nous voulons que cette animation se déroule, nous ajouterons des os au cou et à la poitrine pour créer une illusion de respiration. Nous ajouterons également des os aux cheveux car nous voulons que les cheveux bougent également légèrement.
• Sélectionnez l'outil os dans le coin supérieur gauche ou utilisez Ctrl + B . Après avoir ajouté des os, cela devrait ressembler à ceci 👇🏽

• Nous allons maintenant renommer les os pour une identification facile. Nous allons également regrouper tous les éléments du visage et nommer ce nouveau groupe visage . En utilisant des relations hiérarchiques, nous pouvons relier les os aux parties de cet élément que nous devons affecter ou déformer. Nous pouvons le faire en déplaçant les os vers les formes qu'ils affectent directement. Pour déplacer un groupe ou un os, sélectionnez-le et déplacez-le à l'aide de votre souris. Ça ressemblera à ça 👇🏽

• Ensuite, nous allons lier nos os et les peser. La liaison garantit que lorsqu'un os se déplace, les parties correspondantes de la surface du personnage se déplacent en conséquence, créant l'illusion de déformation. La pondération, également connue sous le nom de pondération des sommets, consiste à attribuer des valeurs d'influence (poids) à chaque sommet du maillage du personnage en fonction de sa proximité avec des os spécifiques. Nous allons naviguer vers le chemin de la forme que nous lierions. Pour le cou, c'est ainsi que nous le lions à l'os du cou.

  

  Après avoir lié les os, nous définissons les sommets en leur attribuant des poids. Ici, notez que nous avons mis le dernier ensemble de sommets à 50% car nous voulons que les deux os aient un effet de 50% sur eux. Vous devez utiliser 50 %, en particulier lorsque les sommets définis couvrent une section qui affecte les deux os. Maintenant, nous ferions la même chose pour le chemin des cheveux. Nous allons également changer les os gauche et droit d'un à deux os pour nous aider à obtenir le mouvement fluide que nous voulons pour les cheveux.

• Nous voudrions avoir un effet clignotant dans cette animation, pour y parvenir, nous allons utiliser la fonction clip sur les deux formes d'yeux comme celle-ci 👇🏽

• Ensuite, nous ajouterons le suivi de la tête en utilisant des contraintes de translation à cet élément car nous voulons déplacer la tête pendant l'animation. Puisqu'il s'agit d'un élément 2D, l'ajout de contraintes de translation lui donnera de la profondeur et une certaine forme d'effet 3D. Sélectionnez tout et groupez-le. Maintenant, nous avons un seul groupe.

• Ensuite, dans le coin supérieur gauche, sélectionnez l'outil de groupe et créez un groupe au centre de la tête (au niveau du nez). Dans la barre d'outils de droite, changez son style de groupe en cible, nommez-le ctrl_front, dupliquez-le et nommez le doublon ctrl_back.

• Pour la cible ctrl_back, sélectionnez l'option contraintes dans la barre d'outils à droite. Sélectionnez les contraintes de traduction dans la liste des options de contraintes disponibles. Cliquez sur l'icône devant l'option de contrainte sélectionnée pour définir ses propriétés.

• Réglez la force sur -100 et définissez sa cible sur ctrl avant. Maintenant, lorsque vous déplacez le ctrl avant, le ctrl arrière se déplace dans la direction opposée. Cela nous aidera à définir des contraintes pour les parties du visage qui doivent se déplacer dans une direction opposée, comme les oreilles. Ça devrait ressembler à ça 👇🏽

  
  

  

• Nous allons maintenant définir des contraintes pour le reste du visage. Nous regrouperons également les yeux (gauche et droit) et les oreilles (gauche et droite) pour nous aider à mieux les gérer. On va mettre des contraintes pour les yeux comme ça 👇🏽

• Remarquez comment nous avons d'abord défini l'origine du groupe yeux pour qu'elle soit la même que celle de ctrl_front . Ainsi, lorsque nous déplaçons la cible ctrl_front , le groupe d'yeux qui est maintenant contraint à cette cible se déplacera avec elle sans sauter maladroitement. Nous ferons de même pour les suivants :

Nous n'avons pas besoin de définir des contraintes pour les lèvres.

Voilà à quoi ça ressemble après avoir fini d'ajouter toutes nos contraintes 👇🏽

💃🏽 🥳 Félicitations, nous avons réussi à préparer notre élément pour le type d'animation que nous voulons réaliser. Ouf!!

Temps d'animation ! 🕶️

Dans la barre d'outils à droite, cliquez sur le bouton Animer pour passer à l'interface d'animation. Nous allons créer six chronologies d'animation et lier le tout avec une machine d'état. Dans la timeline, en utilisant ce que nous avons mis en place précédemment avec des os et des contraintes, nous pouvons définir des images clés pour créer l'animation que nous voulons réaliser.

La première animation de la chronologie est l'animation inactive. Ce sera l'état inactif de l'animation. Nous l'utiliserons lorsque l'élément animé n'est pas engagé.

• Tout d'abord, nous regroupons toutes les parties de notre élément et le nommons caractère avant de commencer le processus d'animation.
• Ensuite, nous fixons la durée à 4 minutes,
• définissez notre zone de travail et définissez le type de chronologie sur boucle. Il est idéal pour une animation ralentie.

Pour cette animation inactive, nous allons créer une illusion de respiration, de légers mouvements de cheveux et de clignotement. En utilisant l'os du cou, les os des cheveux et les éléments de l'œil droit/gauche, nous définirons les images clés nécessaires dans différentes poses, ce qui signifie que nous pouvons définir les propriétés spécifiques de l'élément sélectionné sur les points de la chronologie. En tenant compte du style de transition d'une image clé à la suivante, nous choisirons le type d'interpolation dont nous avons besoin. Vous pouvez le trouver en bas vers la droite de la section Chronologie. L'interpolation est soit maintenue, linéaire ou courbe, selon la façon dont vous souhaitez passer d'une image clé à la suivante. Ça ressemblera à ça 👇🏽

À partir du gif ci-dessus, vous pouvez remarquer que sur les différentes images clés de la chronologie, nous avons défini différentes poses pour les éléments sélectionnés. Cette transition d'une image clé à l'autre forme l'animation. En utilisant cette même procédure, nous allons créer les cinq autres chronologies. Vous pouvez cliquer ici pour voir cette animation et consulter les différentes chronologies en détail. Ça ressemble à ça 👇🏽

Configurez votre State Machine🏍️

Nous sommes arrivés à la dernière partie de ce processus d'animation. Une machine d'état est un moyen visuel de connecter l'animation. À l'aide de la machine d'état, nous pouvons contrôler quelle animation est lue en fonction de l'entrée que nous avons définie. Nous pouvons mélanger ou fusionner deux animations chronologiques ou plus afin qu'elles soient lues simultanément. Nous devons sélectionner le bon type d'entrées dans la machine d'état car c'est ce que nous utiliserons pour contrôler l'animation dans l'application.

Dans la machine d'état, nous avons trois types d'entrées :

• Nombre : une entrée numérique est une valeur numérique utilisée dans une machine d'état pour représenter et contrôler des données quantitatives. Vous pouvez configurer la machine d'état pour qu'elle passe à un état particulier en fonction de la valeur numérique saisie.
• Booléen : une entrée booléenne est une valeur binaire qui peut être vraie ou fausse. Maintenant, la machine d'état passe à un état particulier en fonction de la valeur d'entrée, vraie ou fausse.
• Déclencheur : Une entrée de déclenchement est une entrée utilisée pour signaler un événement. Contrairement aux entrées booléennes qui conservent leur état jusqu'à ce qu'elles soient explicitement modifiées, les déclencheurs sont réinitialisés à leur état par défaut après avoir été déclenchés.

Dans le panneau Animation, cliquez sur le bouton plus et créez une machine d'état. Nous l'appellerons Login State Machine . Ce nom est important car c'est ce dont nous aurons besoin pour identifier notre machine d'état plus tard dans le code.

Suivez les étapes ci-dessous pour configurer votre machine d'état :

1. Créez deux couches dans notre machine d'état et renommez-en une en Type . Plusieurs couches nous aident à jouer plusieurs états en même temps. Pour obtenir une autre couche dans votre machine d'état, cliquez sur l'icône plus en haut du graphique StateMachine.
2. Dans la section Entrées, vous devriez le voir étiqueté juste à côté de la machine d'état. Cliquez sur l'icône plus, sélectionnez une entrée numérique et nommez-la look . Nous utiliserons cette entrée tout en fusionnant (mélangeant) les animations de chronologie look_left et look_right afin qu'à mesure que les nombres augmentent, il semble que le personnage regarde de gauche à droite.
3. Créez une autre entrée, cette fois un booléen, et nommez-la check . Il contrôle quand nous voulons que l'animation apparaisse. Créez deux entrées de déclenchement, renommez l'une fail et l'autre success . Vous en aurez besoin pour déclencher les états de réussite et d'échec.
4. Faites maintenant glisser et déposez l'animation look_idle et l'animation look_left sur le graphique de la couche Type . Sur ce graphique, vous verrez quelques états par défaut :
   • Entrée - C'est le point d'entrée de tout état d'animation connecté à cet état.
   • Sortie - C'est le point de sortie de tout état d'animation connecté à cet état
   • Anystate - Tout état d'animation connecté à celui-ci est joué tant qu'il remplit les conditions de la transition.
5. La transition est la ligne et la flèche reliant deux états ou plus. En regardant la direction de la flèche, vous pouvez voir comment les états sont maintenant connectés. Lorsque vous cliquez dessus, vous pouvez voir les propriétés de la transition. Dans les propriétés, vous pouvez créer une condition. En utilisant l'une des entrées que vous avez créées précédemment, vous pouvez définir la condition que vous souhaitez remplir avant le prochain état de la transition.
6. Dans la couche de type , connectez les états Entry , look_Idle et look_left en utilisant une transition linéaire. Pour l'état look_left , nous voudrions qu'il soit un mélange de l'animation look_left et look_right . Pour ce faire, sélectionnez l'état look_left sur le graphique et, sur le côté gauche du panneau, sélectionnez Blend 1d. Pour l'option d'entrée, sélectionnez l'entrée de recherche . Cette entrée contrôlera notre mélange. Ensuite, dans la section Chronologies, sélectionnez les chronologies look_left et look_right , et réglez-les sur 0 et 100. Lorsque vous augmentez le chiffre d'entrée de look , il mélange les deux animations.
7. Connectez l'état de fusion au look_idle à l'aide de la ligne de transition et de la flèche. Cliquez maintenant sur la flèche et définissez la condition sur lorsque l'entrée de vérification est fausse. Cela nous aidera à contrôler l'animation et à indiquer à la StateMachine d'afficher l'état look_idle lorsque le booléen de vérification est faux. Faites de même pour la flèche de transition pointant de look_idle vers l'état de fusion, mais vérifiez maintenant que boolean est défini sur true.
8. Désormais, lorsque vous cliquez sur la case à cocher de l'entrée de vérification , vous pouvez la définir sur vrai ou faux. Lorsque vous jouez la machine d'état, elle continuera à afficher l'état look_Idle jusqu'à ce que vous changiez le booléen de vérification en true, puis elle démarrera l'animation look_left . Pour fusionner look_left et look_right , vous augmentez la valeur du nombre d'entrées Look.
9. Maintenant, dans Layer1, c'est là que vous ajouterez les déclencheurs de réussite et d'échec . À partir de l'état d'entrée , vous connecterez l'état inactif . À partir de l'état inactif , connectez les états de réussite et d'échec . Dans la transition de l'état d'inactivité à l'état de réussite , ajoutez une condition. Dans cette condition , ajoutez l'entrée de déclencheur de réussite . Cela signifie que la machine d'état ne doit lire l'animation de réussite que lorsque l'entrée de réussite est déclenchée.
10. Faites de même pour la transition d'état d'échec , mais ajoutez le déclencheur d'échec dans la condition à la place. Maintenant, à partir du succès , créez une ligne de transition vers le ralenti. Ici, sélectionnez Exit time , et réglez-le à 100 %. Cela signifie que l'animation inactive ne sera lue que lorsque l'animation réussie aura fini de jouer. Faites de même pour la transition de retour à inactif .

Maintenant, l'animation complète dans la machine d'état ressemblera à ceci 👇🏽

Découvrez l'animation complète et la machine d'état ici .

Félicitations 🥳, nous avons réussi à animer notre élément et à le paramétrer avec une machine d'état ! Cependant, avant d'exporter le fichier rive, nous allons changer l'arrière-plan et les couleurs de la chemise du personnage. Ça ressemblera à ça👇🏽

La couleur de fond est (#B581EB) et la couleur de la chemise du personnage est (#BD08D7)

Voici le lien vers l'animation pour tout voir en détail

Implémentez l'animation dans votre application Flutter👨‍🚒

Nous utiliserons cette animation sur notre page de connexion. Créez un projet d'application Flutter et ajoutez la dépendance Rive au pubspec.yaml

 dependencies: rive: ^0.11.12

Ajoutez également le fichier Rive exporté aux actifs de votre projet. Nous pouvons maintenant continuer à créer l'interface utilisateur basée sur notre conception. Notre objectif est que l'animation fasse ce qui suit :

• réagir avec l'animation de réussite lorsque l'e-mail/le mot de passe est correct
• réagir avec l'animation d'échec lorsque l'e-mail/le mot de passe est erroné
• répondre avec la direction du curseur dans le champ de texte

Nous allons d'abord définir certaines choses avant la fonction Widget Build.

 ///Login details String emailCred = "[email protected]"; String passwordCred = "123456"; /// input form controller FocusNode emailFocusNode = FocusNode(); TextEditingController emailCtr = TextEditingController(); FocusNode passwordFocusNode = FocusNode(); TextEditingController passwordCtr = TextEditingController(); /// rive controller and input values StateMachineController? controller; SMIInput<bool>? check; SMIInput<double>? look; SMIInput<bool>? success; SMIInput<bool>? fail; bool isLoading = false; bool isError = false; @override void initState() { emailFocusNode.addListener(emailFocus); passwordFocusNode.addListener(passwordFocus); super.initState(); } @override void dispose() { emailFocusNode.removeListener(emailFocus); passwordFocusNode.removeListener(passwordFocus); super.dispose(); } void emailFocus() { check?.change(emailFocusNode.hasFocus); } void passwordFocus() { check?.change(passwordFocusNode.hasFocus); }

Ici, nous pouvons noter ce qui suit :

• L'e-mail et le mot de passe corrects sont définis.
• Le nœud de focus et le contrôleur d'édition de texte pour l'e-mail et le mot de passe sont également définis.
• Ici, le contrôleur Rive et les entrées sont définis comme nullables. Vous remarquez que les entrées sont définies en utilisant le nom exact qu'elles utilisent dans la machine d'état.
• Le booléen de chargement et d'erreur est défini.
• Dans les fonctions emailFocus et passwordFocus , l'entrée de vérification est modifiée en fonction du booléen FocusNode.hasFocus
• Ensuite, dans les fonctions initState et dispose , nous voyons les écouteurs sont ajoutés et supprimés. Les auditeurs sont habitués à écouter les changements d'orientation.

Vous pouvez consulter le code de l'interface utilisateur et le reste du code ici . Ce morceau de code montre comment ajouter le RiveAsset :

 SizedBox( height: 250, width: 250, child: RiveAnimation.asset( "assets/login_screen.riv", fit: BoxFit.fitHeight, stateMachines: const ["Login State Machine"], onInit: (artboard) { controller = StateMachineController.fromArtboard( artboard, "Login State Machine", ); if (controller == null) return; artboard.addController(controller!); check = controller?.findInput("check"); look = controller?.findInput("look"); success = controller?.findInput("success"); fail = controller?.findInput("fail"); }, ), ),

À partir du code ci-dessus, nous pouvons noter ce qui suit :

• La StateMachine porte le même nom que nous l'avons nommée dans l'éditeur Rive
• Le contrôleur et les entrées sont définis

Voici le code de la fonction de connexion :

 void login()async{ //extract the text coming from the text fields final email = emailCtr.text; final password = passwordCtr.text; //Set loading boolean to true and delay to give an illusion of loading setState(() { isLoading = true; }); await Future.delayed( const Duration(milliseconds: 2000), ); // check if details entered is the same as the correct creditials defined if (email == emailCred && password == passwordCred) { //if correct trigger the success input and set error boolean to false success?.change(true); setState(() { isError = false; }); if(context.mounted){ // delay and navigate to home screen await Future.delayed( const Duration(seconds: 2),(){ Navigator.push(context, MaterialPageRoute(builder: (context) =>const HomeScreen())); }); } } else { // if details don't match defined credentials // set error boolean to true and trigger the fail input // set loading boolean to false setState(() { isError = true; }); fail?.change(true); } setState(() { isLoading = false; }); }

Découvrez le code complet ici .

En faisant cela, nous avons complété notre code d'animation de connexion. Voici à quoi tout ressemble:

Conclusion🏋️‍♀️

Toutes nos félicitations! Nous avons terminé cette animation de connexion interactive simple. Voici un aperçu de tout ce que nous avons pu accomplir :

• Mettre en place notre élément sur le plan de travail Rive,
• Créer différents états animés de cet élément,
• Rassemblez tous ces états à l'aide de la machine d'état
• Exportez-le et ajoutez-le à l'application Flutter

En suivant ce didacticiel étape par étape, vous pourriez rencontrer quelques goulots d'étranglement, mais cela deviendra plus facile avec la pratique. Vous pouvez me joindre sur Twitter ou commenter si vous avez besoin d'aide tout en suivant ce didacticiel.

Découvrez ces tutoriels vidéo pour mieux comprendre l'animation Rive

Vous pouvez également consulter la chaîne Rive pour plusieurs didacticiels vidéo sur les animations Rive.

Références🧶

Personnage de connexion animé