Partager via

Fonctions d’accélération dans Xamarin.Forms

Xamarin.Forms inclut une classe d’accélération 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. Cet article montre comment utiliser les fonctions d’accélération prédéfinies et comment créer des fonctions d’accélération personnalisées.

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.

Consommation d’une fonction d’accélération

Les méthodes d’extension d’animation de la ViewExtensions classe permettent à une fonction d’accélération d’être spécifiée comme paramètre de méthode final, comme illustré dans l’exemple de code suivant :

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.

Remarque

Xamarin.Forms 5.0 inclut un convertisseur de type qui convertit une représentation sous forme de chaîne d’une fonction d’accélération en membre d’énumération approprié Easing . Ce convertisseur de type est automatiquement appelé sur toutes les propriétés de type Easing définies en XAML.

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

Fonctions d’accélération personnalisées

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

  1. Créez une méthode qui accepte un double argument et retourne un double résultat.
  2. Créer un Func<double, double>.
  3. 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 0 pour un argument 0 et 1 pour un argument de 1. Toutefois, n’importe quelle valeur peut être retournée entre les valeurs d’argument de 0 et 1. Chaque approche sera maintenant abordée à son tour.

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, comme illustré dans l’exemple de code suivant :

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

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

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 comme un Func<double, double>, comme illustré dans l’exemple de code suivant :

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

Représente CustomEaseFunc une 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, comme illustré dans l’exemple de code suivant :

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

La fonction d’accélération personnalisée est spécifiée en tant qu’argument de fonction lambda au Easing constructeur et utilise la Math.Cos méthode pour créer un effet de baisse lente qui est atténué par la Math.Exp méthode. Par conséquent, l’instance Image est traduite afin qu’elle apparaisse à sa dernière place de repos.

Résumé

Cet article a montré comment utiliser les fonctions d’accélération prédéfinies et comment créer des fonctions d’accélération personnalisées. Xamarin.Forms 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.

  • Last updated on