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 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. puissants Concepts de base dans Rive🧗 Voici les notions clés : 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. Plan de travail : 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. Chronologie : 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. Machine d'état : 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. Exportation de code : 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 sur Figma. Exportez l'élément en tant que fichier SVG. des modèles d'illustration User Personas Allez sur Cliquez sur le bouton pour ouvrir vos brouillons Rive GetStarted 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 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 . Lorsque vous le sélectionnez, utilisez pour les regrouper. Ça devrait ressembler à ça 👇🏽 regrouper Ctrl ou Ctrl + Maj Ctrl + G 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 . Après avoir ajouté des os, cela devrait ressembler à ceci 👇🏽 Ctrl + B 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 . 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 👇🏽 visage 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 dupliquez-le et nommez le doublon ctrl_front, ctrl_back. Pour la 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. cible ctrl_back, Réglez la force sur -100 et définissez sa cible sur Maintenant, lorsque vous déplacez le le 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 👇🏽 ctrl avant. ctrl avant, ctrl arrière 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 . Ainsi, lorsque nous déplaçons la cible , 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 : ctrl_front ctrl_front Groupe Force de contrainte Position d'origine Cible lunettes 5% identique à l'origine ctrl_front ctrl_front les sourcils dix% identique à l'origine ctrl_front ctrl_front oreilles 5% pas besoin de définir l'origine ctrl_retour nez 5% identique à l'origine ctrl_front ctrl_front affronter 5% identique à l'origine ctrl_front ctrl_front 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 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. Animer 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 pour voir cette animation et consulter les différentes chronologies en détail. Ça ressemble à ça 👇🏽 ici 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 . Ce nom est important car c'est ce dont nous aurons besoin pour identifier notre machine d'état plus tard dans le code. Login State Machine Suivez les étapes ci-dessous pour configurer votre machine d'état : Créez deux couches dans notre machine d'état et renommez-en une en . 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. Type 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 . Nous utiliserons cette entrée tout en fusionnant (mélangeant) les animations de chronologie et afin qu'à mesure que les nombres augmentent, il semble que le personnage regarde de gauche à droite. look look_left look_right Créez une autre entrée, cette fois un booléen, et nommez-la . Il contrôle quand nous voulons que l'animation apparaisse. Créez deux entrées de déclenchement, renommez l'une et l'autre . Vous en aurez besoin pour déclencher les états de réussite et d'échec. check fail success Faites maintenant glisser et déposez l'animation et l'animation sur le graphique de la couche . Sur ce graphique, vous verrez quelques états par défaut : look_idle look_left Type 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. 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 En utilisant l'une des entrées que vous avez créées précédemment, vous pouvez définir la que vous souhaitez remplir avant le prochain état de la transition. condition. condition Dans la couche , connectez les états , et en utilisant une transition linéaire. Pour l'état , nous voudrions qu'il soit un mélange de l'animation et . Pour ce faire, sélectionnez l'état 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 . Cette entrée contrôlera notre mélange. Ensuite, dans la section Chronologies, sélectionnez les chronologies et , et réglez-les sur 0 et 100. Lorsque vous augmentez le chiffre d'entrée , il mélange les deux animations. de type Entry look_Idle look_left look_left look_left look_right look_left de recherche look_left look_right de look Connectez l'état de fusion au à 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 lorsque le booléen de vérification est faux. Faites de même pour la flèche de transition pointant de vers l'état de fusion, mais maintenant que boolean est défini sur true. look_idle look_idle look_idle vérifiez Désormais, lorsque vous cliquez sur la case à cocher de l'entrée , vous pouvez la définir sur vrai ou faux. Lorsque vous jouez la machine d'état, elle continuera à afficher l'état jusqu'à ce que vous changiez le booléen en true, puis elle démarrera l'animation . Pour fusionner et , vous augmentez la valeur du nombre d'entrées Look. de vérification look_Idle de vérification look_left look_left look_right Maintenant, dans Layer1, c'est là que vous ajouterez les déclencheurs et . À partir de l'état , vous connecterez l'état . À partir de l'état , connectez les états et . Dans la transition de l'état à l'état , ajoutez une Dans cette , ajoutez l'entrée de déclencheur . Cela signifie que la machine d'état ne doit lire l'animation que lorsque l'entrée est déclenchée. de réussite d'échec d'entrée inactif inactif de réussite d'échec d'inactivité de réussite condition. condition de réussite de réussite de réussite Faites de même pour la transition d'état , mais ajoutez le déclencheur dans la à la place. Maintenant, à partir du , créez une ligne de transition vers le Ici, sélectionnez , et réglez-le à 100 %. Cela signifie que l'animation inactive ne sera lue que lorsque l'animation aura fini de jouer. Faites de même pour la transition de à . d'échec d'échec condition succès ralenti. Exit time réussie 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 vers l'animation pour tout voir en détail lien 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 = "nikki@gmail.com"; 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 et , l'entrée de vérification est modifiée en fonction du booléen emailFocus passwordFocus FocusNode.hasFocus Ensuite, dans les fonctions et , nous voyons les écouteurs sont ajoutés et supprimés. Les auditeurs sont habitués à écouter les changements d'orientation. initState dispose Vous pouvez consulter le code de l'interface utilisateur et le reste du code . Ce morceau de code montre comment ajouter le RiveAsset : ici 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 ou commenter si vous avez besoin d'aide tout en suivant ce didacticiel. Twitter Découvrez ces tutoriels vidéo pour mieux comprendre l'animation Rive Techniques de gréement de base Machines d'état Rig Artwork pour le suivi de la tête Vous pouvez également consulter la pour plusieurs didacticiels vidéo sur les animations Rive. chaîne Rive Références🧶 Personnage de connexion animé Également publié . ici
