En ce jour de 14 février pour que la fête soit plus folle, parlons animations ! (Quoi ? Vous aviez oublié ? Courrez chez le fleuriste et réservez un bon restaurant il n'est peut-être pas trop tard !). Comme une bonne soirée réussie, les UI aiment bien les animations ! Comment ?
Comprendre les Animations de Base
Les animations dans .NET MAUI permettent de rendre les interfaces utilisateur plus dynamiques et attrayantes. Elles sont principalement utilisées pour modifier progressivement les propriétés d'un élément visuel sur une période de temps définie. Les animations de base incluent des transformations telles que la rotation, la mise à l’échelle, la translation et la décoloration. Voici un aperçu pratique pour commencer avec les animations sous .NET MAUI, accompagné de quelques exemples de code.
Attention : D'abord évitez l'effet "sapin de Noël" ça lasse très vite l'utilisateur. Ensuite ne vous laissez pas aveugler par le seul aspect visuel. Les animations ne sont pas que des ajouts cosmétiques, elles doivent aussi servir la sémantique de l'App, rendre les actions de l'utilisateur claires. Une UI qui ne bouge pas semble morte et non réactive. Les animations servent avant tout à accompagner une action pour confirmer visuellement sa prise en charge. Ca peut ête joli, là nest pas la question, mais surtout pensez sémantique avant esthétique !
Les Méthodes d’Extension d’Animation
.NET MAUI, tout en restant assez sobre sur ce plan, offre plusieurs méthodes d’extension pour animer les éléments visuels. Ces méthodes sont asynchrones et retournent un objet Task<bool>. Voici quelques-unes des méthodes d’animation les plus couramment utilisées :
- FadeTo : Anime la propriété Opacity d’un élément.
- RotateTo : Anime la propriété Rotation.
- ScaleTo : Anime la propriété Scale.
- TranslateTo : Anime les propriétés TranslationX et TranslationY.
Exemple de Code : FadeTo
await myElement.FadeTo(1, 4000);
Dans cet exemple, l’opacité de myElement passe à 1 (complètement visible) sur 4 secondes.
Créer des Animations Séquentielles et Composées
Les animations peuvent être combinées pour créer des séquences d'animations ou des animations composées. Cela permet d’exécuter plusieurs animations de manière séquentielle ou simultanée. Cela est nécessaire pour créer un effet final un peu plus sophistiqué (ce qui ne veut pas dire forcément très complexe. Par exemple simuler une légère vibration sera quelque chose de discret mais demandera d'utiliser plus animations, en même tout ou sérialisées).
Animation Séquentielle
Une animation séquentielle déroule une suite d'animations avec un timing précis. Chaque animation débute quand la précédente se termine.
await myElement.TranslateTo(100, 0, 1000); // Déplacement à droite
await myElement.RotateTo(360, 2000); // Rotation complète
await myElement.FadeTo(0, 1000); // Disparition
Dans cet exemple, myElement se déplace à droite, effectue une rotation complète, puis disparaît. Si les animations n'étaient pas séquentielles le résultat visuel serait un mélange brouillon d'un objet qui commence à se déplacer en tournant sur lui-même tout en disparaissant. Cela peut être désiré mais ici ce n'est pas ce qu'on voulait faire. Pour mélanger plusieurs mouvements en même temps on utilisera donc l'autre technique qui suit :
Animation Composite
Une animation composite lance plusieurs animations en même temps. Cela réclame donc de ne pas attendre que chacune soit terminée pour lancer la prochaine. En général le mode composite est mélangé avec du séquentiel pour des effets plus intéressants :
myElement.RotateTo(360, 4000);
await myElement.ScaleTo(2, 2000);
await myElement.ScaleTo(1, 2000);
Ici, myElement effectue une rotation de 360 degrés sur 4 secondes pendant qu’il double de taille puis revient à sa taille initiale. Les déplacements seront ainsi séquentiels (await) mais la rotation (pas d'await) jouera en même temps que les deux déplacements (et bien synchro puisque la rotation dure 4 secondes et que chaque déplacement dure 2 secondes).
Animer avec des Ancres
Mais non, marin d'eau douce, je ne parle de mouiller l'ancre ni de jongler avec, mais des propriétés AnchorX et AnchorY qui définissent le centre de rotation ou de mise à l’échelle d’un élément. Modifier ces propriétés permet de contrôler le point autour duquel l’animation est effectuée.
Exemple de Code : Animer avec AnchorY
double radius = Math.Min(layout.Width, layout.Height) / 2;
myElement.AnchorY = radius / myElement.Height;
await myElement.RotateTo(360, 2000);
Dans cet exemple, myElement pivote autour du centre de layout.
Annuler les Animations
Il est possible d'annuler toutes les animations en cours sur un élément avec la méthode CancelAnimations.
myElement.CancelAnimations();
Cela arrête immédiatement toutes les animations en cours sur myElement.
Conclusion
Les animations dans .NET MAUI offrent une manière simple et efficace d’améliorer l’interaction utilisateur avec des transitions fluides et dynamiques. Pour une exploration plus approfondie et d'autres exemples, consultez la documentation officielle de .NET MAUI sur les animations.
Et n'oubliez que nous sommes le 14 février, votre crush ne vous le pardonnerait pas !
Stay Tuned !