Dans mon précédent article, je vous ai proposé d'explorer les bases des animations sous .NET MAUI, y compris la rotation, la mise à l’échelle, la translation et la décoloration par transparence. Pour enrichir encore plus vos animations et les rendre plus fluides et naturelles, il est essentiel de comprendre et d'utiliser les fonctions d'accélération (ou easing functions). Ces fonctions modifient la vitesse de changement des propriétés d'un élément visuel au cours du temps, permettant de simuler des effets physiques comme l'accélération, la décélération, le rebond, et bien d'autres. Loin d'être des gadgets, ces accélérations (ou décélérations) suivant des courbes mathétiques différentes permettent de donner à vos animations un aspect plus organique, plus vivant et moins froid. C'est donc essentiel en termes d'UX.
Types de Fonctions d'Accélération
.NET MAUI propose une variété de fonctions d'accélération prêtes à l'emploi, chacune ayant un effet distinct basé sur une fonction mathématique particulière dont je ne parlerai pas ici pour me concentrer sur l'effet ressenti :
- Linear : Progression uniforme sans accélération ni décélération.
- BounceIn : Commence l'animation avec un effet de rebond.
- BounceOut : Termine l'animation avec un effet de rebond.
- CubicIn : Accélération lente au début.
- CubicOut : Décélération lente à la fin.
- CubicInOut : Accélération lente au début et décélération lente à la fin.
- SinusoidalIn : Accélération sinusoïdale au début.
- SinusoidalOut : Décélération sinusoïdale à la fin.
- SinusoidalInOut : Combinaison de l'accélération et de la décélération sinusoïdales.
Comprendre les Fonctions d'Accélération
Les fonctions d'accélération modifient le taux de progression d'une animation, ajoutant un peu de vie en simulant le mouvement d'objets du monde physique. MAUI propose plusieurs fonctions d'accélération prêtes à l'emploi telles celles listées ci-dessus.
Voici l'exemple d'une animation avec accélération lente au départ :
await myElement.TranslateTo(100, 0, 1000, Easing.CubicIn);
Dans cet exemple, myElement se déplace à droite sur une seconde mais en commençant lentement puis en accélérant.
Fonctions d'Accélération Courantes
Voici quelques fonctions d'accélération couramment utilisées :
- Bounce : Donne un effet de rebond à l'animation.
- Cubic : Accélération ou décélération en utilisant une courbe cubique.
- Sinusoidal : Utilise une fonction sinusoïdale pour une animation douce.
Exemple de Code : BounceIn
await myElement.ScaleTo(1.5, 1000, Easing.BounceIn);
Avec cet exemple, myElement s'agrandit avec un effet de rebond en une seconde.
Créer des Fonctions d'Accélération Personnalisées
Si vous désirez utiliser d'autres type d'accélérations vous pouvez également créer vos propres fonctions en implémentant la classe Easing.
Exemple de Code : Fonction d'Accélération Personnalisée
public class CustomEasing : Easing
{
public override double Ease(double t)
{
return t * t * (3 - 2 * t); // Exemple de fonction personnalisée
}
}
// Utilisation de la fonction personnalisée
await myElement.FadeTo(0, 1000, new CustomEasing());
Utilisation Avancée des Fonctions d'Accélération
Pour des animations complexes, vous pouvez combiner plusieurs fonctions d'accélération.
Exemple de Code : Combinaison de Fonctions d'Accélération
await myElement.TranslateTo(50, 50, 500, Easing.CubicIn)
.ContinueWith(_ => myElement.TranslateTo(0, 0, 500, Easing.CubicOut));
Dans cet exemple, myElement se déplace vers un nouveau point avec une accélération cubique puis revient à sa position initiale avec une décélération cubique.
Conclusion
Les fonctions d'accélération sous .NET MAUI offrent une multitude de possibilités pour enrichir vos animations et les rendre plus fluides et organiques. En maîtrisant ces fonctions, vous pouvez créer des interfaces utilisateur plus attrayantes et interactives ayant un rendu moins froid. Pour une exploration plus détaillée, consultez la documentation officielle de .NET MAUI sur les fonctions d'accélération.
Stay Tuned !