Partager via

Fonctions d'assouplissement

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 utilisables par des animations :

  • La fonction d'accélération BounceIn fait rebondir l'animation au début.
  • La BounceOut fonction d’accélération fait rebondir l’animation à la fin.
  • La fonction d’adoucissement CubicIn accélère doucement l’animation.
  • La CubicInOut fonction d’interpolation accélère l’animation au début et ralentit 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'interpolation ralentit l'animation en douceur.
  • La fonction d’assouplissement SpringIn provoque 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 de lissage

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'assouplissement 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 une valeur comprise entre 0 et 1.

Méthode d'assouplissement 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 représente une fonction d'assouplissement qui démarre rapidement, ralentit, inverse le cours, puis inverse de nouveau le cours pour accélérer rapidement vers la fin. Par conséquent, alors que le mouvement global de l’instance est vers le bas Image, il change temporairement de direction à mi-chemin de l’animation.

Constructeur d’accélération personnalisé

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

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 de manière à sembler descendre jusqu'à sa position finale.

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 utilisées par des animations.

  • La BounceIn fonction d'accélération fait rebondir l’animation au début.
  • La BounceOut fonction de relaxation fait rebondir l’animation à la fin.
  • La CubicIn fonction d'adoucissement augmente progressivement la vitesse de l’animation.
  • La fonction d'assouplissement CubicInOut accélère l’animation au début et décélère l’animation à la fin.
  • La CubicOut fonction d'assouplissement décélère 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'assouplissement accélère l’animation en douceur.
  • La SinInOut fonction d’accélération permet d’accélérer l’animation en douceur au début et de décélérer en douceur à la fin.
  • La SinOut fonction de lissage 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'assouplissement entraîne une décélération rapide de l’animation à 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 de lissage

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.TranslateToAsync(0, 200, 2000, Easing.BounceIn);
await image.ScaleToAsync(2, 2000, Easing.CubicIn);
await image.RotateToAsync(360, 2000, Easing.SinInOut);
await image.ScaleToAsync(1, 2000, Easing.CubicOut);
await image.TranslateToAsync(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 :

  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 une valeur comprise entre 0 et 1.

Méthode d’assouplissement 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.TranslateToAsync(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.

Fonction de lissage 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.TranslateToAsync(0, 200, 2000, CustomEaseFunc);

Dans cet exemple, la CustomEaseFunc représente une fonction de facilité qui démarre rapidement, ralentit, change de direction, puis change à nouveau de direction pour accélérer rapidement vers la fin. Par conséquent, alors que le mouvement général de l’instance est Image en bas, il inverse temporairement le cours à mi-parcours de l’animation.

Constructeur de lissage personnalisé

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

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

Dans cet exemple, la fonction d'assouplissement 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 chute lente qui est atténué par la Math.Exp méthode. Par conséquent, l’instance Image est traduite de manière à sembler tomber à sa position finale.