Fonctions d’accélération

Article
09/30/2024

L’interface utilisateur d’application multiplateforme .NET (.NET MAUI) inclut une Easing classe qui vous permet de spécifier une fonction de transfert qui contrôle la vitesse ou le ralentissement des animations au fur et à mesure qu’elles s’exécutent.

La Easing classe définit un certain nombre de fonctions d’accélération qui peuvent être consommées par des animations :

La BounceIn fonction d’accélération rebondit à l’animation au début.
La BounceOut fonction d’accélération rebondit l’animation à la fin.
La CubicIn fonction d’accélération accélère lentement l’animation.
La CubicInOut fonction d’accélération accélère l’animation au début et décélét l’animation à la fin.
La CubicOut fonction d’accélération décélét rapidement l’animation.
La Linear fonction d’accélération utilise une vitesse constante et est la fonction d’accélération par défaut.
La SinIn fonction d’accélération accélère l’animation en douceur.
La SinInOut fonction d’accélération accélère l’animation au début et décélét l’animation en douceur à la fin.
La SinOut fonction d’accélération décélére l’animation en douceur.
La SpringIn fonction d’accélération entraîne une accélération très rapide de l’animation vers la fin.
La SpringOut fonction d’accélération provoque la décélération rapide de l’animation vers la fin.

Les In suffixes Out indiquent si l’effet fourni par la fonction d’accélération est visible au début de l’animation, à la fin, ou les deux.

En outre, des fonctions d’accélération personnalisées peuvent être créées. Pour plus d’informations, consultez fonctions d’accélération personnalisées.

Utiliser une fonction d’accélération

Les méthodes d’extension d’animation dans la ViewExtensions classe permettent à une fonction d’accélération d’être spécifiée en tant qu’argument de méthode final :

await image.TranslateTo(0, 200, 2000, Easing.BounceIn);
await image.ScaleTo(2, 2000, Easing.CubicIn);
await image.RotateTo(360, 2000, Easing.SinInOut);
await image.ScaleTo(1, 2000, Easing.CubicOut);
await image.TranslateTo(0, -200, 2000, Easing.BounceOut);

En spécifiant une fonction d’accélération pour une animation, la vitesse d’animation devient non linéaire et produit l’effet fourni par la fonction d’accélération. L’omission d’une fonction d’accélération lors de la création d’une animation entraîne l’utilisation de la fonction d’accélération par défaut Linear , ce qui produit une vitesse linéaire.

Pour plus d’informations sur l’utilisation des méthodes d’extension d’animation dans la ViewExtensions classe, consultez animation de base. Les fonctions d’accélération peuvent également être consommées par la Animation classe. Pour plus d’informations, consultez Animation personnalisée.

Fonctions d’accélération personnalisées

Il existe trois approches principales pour créer une fonction d’accélération personnalisée :

Créez une méthode qui accepte un double argument et retourne un double résultat.
Créer un Func<double, double>.
Spécifiez la fonction d’accélération comme argument du Easing constructeur.

Dans les trois cas, la fonction d’accélération personnalisée doit retourner une valeur comprise entre 0 et 1.

Méthode d’accélération personnalisée

Une fonction d’accélération personnalisée peut être définie comme une méthode qui prend un double argument et retourne un double résultat :

double CustomEase (double t)
{
  return t == 0 || t == 1 ? t : (int)(5 * t) / 5.0;
}

await image.TranslateTo(0, 200, 2000, (Easing)CustomEase);

Dans cet exemple, la CustomEase méthode tronque la valeur entrante aux valeurs 0, 0.2, 0.4, 0.6, 0.8 et 1. Par conséquent, l’instance Image est traduite en sauts discrets plutôt qu’en douceur.

Func d’accélération personnalisée

Une fonction d’accélération personnalisée peut également être définie en tant que Func<double, double>:

Func<double, double> CustomEaseFunc = t => 9 * t * t * t - 13.5 * t * t + 5.5 * t;
await image.TranslateTo(0, 200, 2000, CustomEaseFunc);

Dans cet exemple, la CustomEaseFunc fonction d’accélération qui démarre rapidement, ralentit et inverse le cours, puis inverse le cours pour accélérer rapidement vers la fin. Par conséquent, alors que le mouvement global de l’instance est vers le Image bas, il inverse temporairement le cours à mi-chemin dans l’animation.

Constructeur d’accélération personnalisé

Une fonction d’accélération personnalisée peut également être définie comme argument du Easing constructeur :

await image.TranslateTo(0, 200, 2000, new Easing (t => 1 - Math.Cos (10 * Math.PI * t) * Math.Exp (-5 * t)));

Dans cet exemple, la fonction d’accélération personnalisée est spécifiée en tant qu’argument de fonction lambda pour le Easing constructeur et utilise la Math.Cos méthode pour créer un effet de suppression lente qui est atténué par la Math.Exp méthode. Par conséquent, l’instance Image est traduite afin qu’elle apparaisse à sa position finale.

Partager via