Partager via

Animation de base

  • Article

Les classes d’animation de l’interface utilisateur d’application multiplateforme .NET (.NET MAUI) ciblent différentes propriétés d’éléments visuels, avec une animation de base classique changeant progressivement une propriété d’une valeur à une autre sur une période de temps.

Les animations de base peuvent être créées avec des méthodes d’extension fournies par la classe ViewExtensions, qui fonctionnent sur des objets VisualElement :

Par défaut, chaque animation prend 250 millisecondes. Toutefois, une durée pour chaque animation peut être spécifiée lors de la création de l’animation.

Note

La classe ViewExtensions fournit également une méthode d’extension LayoutTo. Toutefois, cette méthode est destinée à être utilisée par des mises en page pour animer des transitions entre les états de mise en page qui contiennent des changements de taille et de position.

Les méthodes d’extension d’animation de la classe ViewExtensions sont toutes asynchrones et retournent un objet Task<bool>. La valeur de retour est false si l’animation est terminée et true si l’animation est annulée. Par conséquent, lorsque les opérations d’animation sont combinées avec l’opérateur await, il devient possible de créer des animations séquentielles avec les méthodes d’animation suivantes s’exécutant une fois la méthode précédente terminée. Pour plus d’informations, consultez les "Animations Composées" .

S’il est nécessaire de laisser une animation se terminer en arrière-plan, l’opérateur await peut être omis. Dans ce scénario, les méthodes d'extension d'animation retournent rapidement après avoir lancé l'animation, qui se déroule en arrière-plan. Cette opération peut être prise en compte lors de la création d’animations composites. Pour plus d’informations, consultez Animations Composites .

Sur Android, les animations respectent les paramètres d’animation système :

  • Si les animations du système sont désactivées (par des fonctionnalités d’accessibilité ou des fonctionnalités de développement), les nouvelles animations passent immédiatement à leur état terminé.
  • Si le mode d’économie d’alimentation de l’appareil est activé pendant que les animations sont en cours, les animations passent immédiatement à leur état terminé.
  • Si les durées d’animation de l’appareil sont définies sur zéro (désactivée) alors que les animations sont en cours et que la version de l’API est 33 ou ultérieure, les animations passent immédiatement à leur état terminé.

Animations individuelles

Chaque méthode d’extension de la classe ViewExtensions implémente une seule opération d’animation qui remplace progressivement une propriété d’une valeur par une autre valeur sur une période donnée.

Rotation

La rotation est effectuée avec la méthode RotateTo, qui modifie progressivement la propriété Rotation d’un élément :

await image.RotateTo(360, 2000);
image.Rotation = 0;

Dans cet exemple, une instance de Image est pivotée jusqu’à 360 degrés sur 2 secondes (2 000 millisecondes). La méthode RotateTo obtient la valeur de propriété Rotation actuelle de l’élément pour le début de l’animation, puis fait pivoter de cette valeur vers son premier argument (360). Une fois l’animation terminée, la propriété Rotation de l’image est réinitialisée à 0. Cela garantit que la propriété Rotation ne reste pas à 360 après la conclusion de l’animation, ce qui empêcherait des rotations supplémentaires.

Note

Outre la méthode RotateTo, il existe également des méthodes RotateXTo et RotateYTo qui animent les propriétés RotationX et RotationY, respectivement.

Rotation relative

La rotation relative est effectuée avec la méthode RelRotateTo, qui modifie progressivement la propriété Rotation d’un élément :

await image.RelRotateTo(360, 2000);

Dans cet exemple, une instance de Image est pivotée de 360 degrés à partir de sa position de départ sur 2 secondes (2 000 millisecondes). La méthode RelRotateTo obtient la valeur de propriété Rotation actuelle de l’élément pour le début de l’animation, puis fait pivoter de cette valeur à la valeur plus son premier argument (360). Cela garantit que chaque animation sera toujours une rotation de 360 degrés à partir de la position de départ. Par conséquent, si une nouvelle animation est appelée alors qu’une animation est déjà en cours, elle commence à partir de la position actuelle et peut se terminer à une position qui n’est pas un incrément de 360 degrés.

Mise à l'échelle

La mise à l’échelle est effectuée avec la méthode ScaleTo, qui modifie progressivement la propriété Scale d’un élément :

await image.ScaleTo(2, 2000);

Dans cet exemple, une instance de Image est mise à l’échelle jusqu’à deux fois sa taille sur 2 secondes (2 000 millisecondes). La méthode ScaleTo obtient la valeur de propriété Scale actuelle de l’élément pour le début de l’animation, puis effectue une mise à l’échelle de cette valeur à son premier argument. Cela a pour effet d’étendre la taille de l’image à deux fois sa taille.

Note

Outre la méthode ScaleTo, il existe également des méthodes ScaleXTo et ScaleYTo qui animent les propriétés ScaleX et ScaleY, respectivement.

Mise à l’échelle relative

La mise à l’échelle relative est effectuée avec la méthode RelScaleTo, qui modifie progressivement la propriété Scale d’un élément :

await image.RelScaleTo(2, 2000);

Dans cet exemple, une instance de Image est mise à l’échelle jusqu’à deux fois sa taille sur 2 secondes (2 000 millisecondes). La méthode RelScaleTo obtient la valeur de propriété Scale actuelle de l’élément pour le début de l’animation, puis passe de cette valeur à la valeur plus son premier argument. Cela garantit que chaque animation sera toujours une mise à l’échelle de 2 à partir de la position de départ.

Mise à l’échelle et rotation avec points d'ancrage

Les propriétés AnchorX et AnchorY d’un élément visuel définissent le centre de mise à l’échelle ou de rotation des propriétés Rotation et Scale. Par conséquent, leurs valeurs affectent également les méthodes RotateTo et ScaleTo.

Compte tenu d’un Image placé au centre d’une disposition, l’exemple de code suivant illustre la rotation de l’image autour du centre de la disposition en définissant sa propriété AnchorY :

double radius = Math.Min(absoluteLayout.Width, absoluteLayout.Height) / 2;
image.AnchorY = radius / image.Height;
await image.RotateTo(360, 2000);

Pour faire pivoter l’instance Image autour du centre de la disposition, les propriétés AnchorX et AnchorY doivent être définies sur des valeurs relatives à la largeur et à la hauteur du Image. Dans cet exemple, le centre de la Image est défini comme étant au centre de la disposition. Par conséquent, la valeur par défaut AnchorX de 0,5 ne nécessite pas de modification. Toutefois, la propriété AnchorY est redéfinie comme une valeur à partir du sommet de la Image jusqu'au point central de la mise en page. Cela garantit que le Image effectue une rotation complète de 360 degrés autour du point central de la disposition.

Traduction

La traduction est effectuée avec la méthode TranslateTo, qui modifie progressivement les propriétés TranslationX et TranslationY d’un élément :

await image.TranslateTo(-100, -100, 1000);

Dans cet exemple, l’instance de Image est traduite horizontalement et verticalement sur 1 seconde (1 000 millisecondes). La méthode TranslateTo déplace simultanément l'image de 100 unités indépendantes de l'appareil vers la gauche et de 100 unités indépendantes de l'appareil vers le haut. Cela est dû au fait que les premiers et deuxième arguments sont tous deux des nombres négatifs. Fournir des valeurs positives déplace l’image vers la droite et vers le bas.

Important

Si un élément est initialement disposé hors écran et ensuite déplacé sur l’écran, après cette opération, la disposition d'entrée de l'élément reste hors écran et l'utilisateur ne peut pas interagir avec lui. Par conséquent, il est recommandé qu'une vue soit présentée dans sa position finale, puis que toutes les traductions nécessaires soient effectuées.

Décoloration

La décoloration est effectuée avec la méthode FadeTo, qui modifie progressivement la propriété Opacity d’un élément :

image.Opacity = 0;
await image.FadeTo(1, 4000);

Dans cet exemple, l’instance Image disparaît en plus de 4 secondes (4 000 millisecondes). La méthode FadeTo obtient la valeur de propriété Opacity actuelle de l’élément pour le début de l’animation, puis s’efface de cette valeur à son premier argument.

Animations composées

Une animation composée est une combinaison séquentielle d’animations et peut être créée avec l’opérateur await :

await image.TranslateTo(-100, 0, 1000);    // Move image left
await image.TranslateTo(-100, -100, 1000); // Move image diagonally up and left
await image.TranslateTo(100, 100, 2000);   // Move image diagonally down and right
await image.TranslateTo(0, 100, 1000);     // Move image left
await image.TranslateTo(0, 0, 1000);       // Move image up

Dans cet exemple, l’instance Image est traduite sur 6 secondes (6 000 millisecondes). La traduction du Image utilise cinq animations, avec l’opérateur await indiquant que chaque animation s’exécute de manière séquentielle. Par conséquent, les méthodes d’animation suivantes s’exécutent une fois la méthode précédente terminée.

Animations composites

Une animation composite est une combinaison d’animations où deux animations ou plus s’exécutent simultanément. Les animations composites peuvent être créées en combinant des animations attendues et non attendues :

image.RotateTo(360, 4000);
await image.ScaleTo(2, 2000);
await image.ScaleTo(1, 2000);

Dans cet exemple, l’instance Image est redimensionnée et pivote simultanément pendant 4 secondes (4 000 millisecondes). La mise à l’échelle du Image utilise deux animations séquentielles qui se produisent en même temps que la rotation. La méthode RotateTo s'exécute sans opérateur de await et retourne immédiatement ; ensuite, la première animation ScaleTo commence. L’opérateur await sur la première méthode ScaleTo retarde la deuxième méthode ScaleTo jusqu’à ce que la première méthode de ScaleTo soit terminée. À ce stade, l’animation RotateTo est de moitié terminée et la Image sera pivotée de 180 degrés. Au cours des 2 dernières secondes (2000 millisecondes), la deuxième animation ScaleTo et l’animation RotateTo se terminent toutes les deux.

Exécuter plusieurs animations simultanément

Les méthodes Task.WhenAny et Task.WhenAll peuvent être utilisées pour exécuter plusieurs méthodes asynchrones simultanément, et peuvent donc créer des animations composites. Les deux méthodes retournent un objet Task et acceptent une collection de méthodes qui retournent chacun un objet Task. La méthode Task.WhenAny se termine lorsqu’une méthode de sa collection termine l’exécution, comme illustré dans l’exemple de code suivant :

await Task.WhenAny<bool>
(
  image.RotateTo(360, 4000),
  image.ScaleTo(2, 2000)
);
await image.ScaleTo(1, 2000);

Dans cet exemple, la méthode Task.WhenAny contient deux tâches. La première tâche fait pivoter une instance de Image sur 4 secondes (4 000 millisecondes) et la deuxième tâche met à l’échelle l’image sur 2 secondes (2 000 millisecondes). Une fois la deuxième tâche terminée, l’appel de méthode Task.WhenAny se termine. Toutefois, même si la méthode RotateTo est toujours en cours d’exécution, la deuxième méthode ScaleTo peut commencer.

La méthode Task.WhenAll se termine lorsque toutes les méthodes de sa collection sont terminées, comme illustré dans l’exemple de code suivant :

// 10 minute animation
uint duration = 10 * 60 * 1000;
await Task.WhenAll
(
  image.RotateTo(307 * 360, duration),
  image.RotateXTo(251 * 360, duration),
  image.RotateYTo(199 * 360, duration)
);

Dans cet exemple, la méthode Task.WhenAll contient trois tâches, chacune s’exécutant sur 10 minutes. Chaque Task effectue un nombre différent de rotations de 360 degrés : 307 rotations pour RotateTo, 251 rotations pour RotateXToet 199 rotations pour RotateYTo. Ces valeurs sont des nombres premiers, ce qui garantit que les rotations ne sont pas synchronisées et ne entraînent donc pas de modèles répétitifs.

Annulation d’animations

La méthode d’extension CancelAnimations est utilisée pour annuler toutes les animations, telles que la rotation, la mise à l’échelle, la traduction et la décoloration, qui s’exécutent sur une VisualElementspécifique.

image.CancelAnimations();

Dans cet exemple, toutes les animations qui s’exécutent sur l’instance Image sont immédiatement annulées.