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 ViewExtensions classe, qui fonctionnent sur VisualElement des objets :

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.

Remarque

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

Les méthodes d’extension d’animation de la ViewExtensions classe sont toutes asynchrones et retournent un Task<bool> objet. La valeur de retour est false si l’animation se termine 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 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, avec l’animation 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 uniques

Chaque méthode d’extension de la ViewExtensions classe 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 RotateTo méthode, qui modifie progressivement la Rotation propriété d’un élément :

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

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

Remarque

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

Rotation relative

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

await image.RelRotateTo(360, 2000);

Dans cet exemple, une Image instance est pivotée de 360 degrés à partir de sa position de départ sur 2 secondes (2 000 millisecondes). La RelRotateTo méthode obtient la valeur de propriété actuelle Rotation de l’élément pour le début de l’animation, puis effectue une rotation de cette valeur vers 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 ScaleTo méthode, qui modifie progressivement la Scale propriété d’un élément :

await image.ScaleTo(2, 2000);

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

Remarque

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

Mise à l’échelle relative

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

await image.RelScaleTo(2, 2000);

Dans cet exemple, une Image instance est mise à l’échelle jusqu’à deux fois sa taille sur 2 secondes (2 000 millisecondes). La RelScaleTo méthode obtient la valeur de propriété actuelle Scale 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 ancres

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

Étant donné qu’un Image élément a été 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 AnchorY propriété :

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 et AnchorY les AnchorX propriétés doivent être définies sur des valeurs relatives à la largeur et à la hauteur du Image. Dans cet exemple, le centre de la Image disposition est défini comme étant au centre de la disposition, et la valeur par défaut AnchorX de 0,5 ne nécessite pas de modification. Toutefois, la AnchorY propriété est redéfinie pour être une valeur du haut du Image point central de la disposition. Cela garantit que la Image rotation complète est de 360 degrés autour du point central de la disposition.

Traduction

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

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

Dans cet exemple, l’instance Image est traduite horizontalement et verticalement sur 1 seconde (1 000 millisecondes). La TranslateTo méthode traduit simultanément l’image 100 unités indépendantes de l’appareil vers la gauche, et 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 nombres positifs traduit l’image à droite et vers le bas.

Important

Si un élément est initialement disposé hors écran, puis traduit sur l’écran, une fois que la disposition d’entrée de l’élément reste hors écran et que 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 toutes les traductions requises effectuées.

Suppression

La décoloration est effectuée avec la FadeTo méthode, qui modifie progressivement la Opacity propriété 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 FadeTo méthode obtient la valeur de propriété actuelle Opacity de l’élément pour le début de l’animation, puis disparaît 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 des Image utilisant 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 mise à l’échelle et pivote simultanément sur 4 secondes (4 000 millisecondes). La mise à l’échelle des deux Image animations séquentielles qui se produisent en même temps que la rotation. La RotateTo méthode s’exécute sans await opérateur et retourne immédiatement, avec la première ScaleTo animation, puis commence. L’opérateur await sur la première ScaleTo méthode retarde la deuxième ScaleTo méthode jusqu’à ce que la première ScaleTo méthode soit terminée. À ce stade, l’animation RotateTo est de moitié terminée et la Image rotation sera de 180 degrés. Au cours des 2 dernières secondes (2000 millisecondes), la deuxième ScaleTo animation et l’animation RotateTo se terminent.

Exécuter plusieurs animations simultanément

Les Task.WhenAny méthodes et Task.WhenAll les méthodes 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 Task objet et acceptent une collection de méthodes qui retournent chacun un Task objet. La Task.WhenAny méthode 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 Task.WhenAny méthode contient deux tâches. La première tâche fait pivoter une Image instance 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 Task.WhenAny de méthode se termine. Toutefois, même si la RotateTo méthode est toujours en cours d’exécution, la deuxième ScaleTo méthode peut commencer.

La Task.WhenAll méthode 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 Task.WhenAll méthode contient trois tâches, chacune s’exécutant sur 10 minutes. Chacune Task fait un nombre différent de rotations de 360 degrés – 307 rotations pour RotateTo, 251 rotations pour RotateXTo, et 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

Une application peut annuler une ou plusieurs animations avec un appel à la méthode d’extension CancelAnimations :

image.CancelAnimations();

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