Accélération des fonctions dans Xamarin.Forms

  • Article

Télécharger l’exemple Télécharger l’exemple

Xamarin.Forms inclut une classe Easing qui vous permet de spécifier une fonction de transfert qui contrôle la façon dont les animations accélèrent ou ralentissent 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 les animations :

  • La BounceIn fonction d’accélération fait rebondir l’animation au début.
  • La BounceOut fonction d’accélération fait rebondir 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 ralentit l’animation à la fin.
  • La CubicOut fonction d’accélération ralentit 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 en douceur l’animation au début et ralentit en douceur l’animation à la fin.
  • La SinOut fonction d’accélération ralentit 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 entraîne une décélération rapide de l’animation vers la fin.

Les In suffixes et Out indiquent si l’effet fourni par la fonction d’accélération est perceptible 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 de spécifier une fonction d’accélération 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 de l’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.

Notes

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 appelé automatiquement 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 main pour créer une fonction d’accélération personnalisée :

  1. Créez une méthode qui prend 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 0 et 1. Chaque approche sera maintenant abordée à tour de rôle.

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, le Image instance est traduit en sauts discrets plutôt qu’en douceur.

Func d’assouplissement personnalisé

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 à nouveau le cours pour accélérer rapidement vers la fin. Par conséquent, bien que le mouvement global du instance soit vers le Image bas, il inverse temporairement le cours à mi-chemin de l’animation.

Constructeur d’accélération personnalisée

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 pour le 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, le Image instance est traduit de sorte qu’il semble tomber à son emplacement de repos final.

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 façon dont les animations accélèrent ou ralentissent à mesure qu’elles s’exécutent.