Partager via

Animation d’éléments XAML avec des animations de composition

  • Article

Cet article présente de nouvelles propriétés qui vous permettent d’animer un UIElement XAML avec les performances des animations de composition et la facilité de définition des propriétés XAML.

Avant Windows 10, version 1809, vous avez eu 2 choix pour créer des animations dans vos applications UWP :

L’utilisation de la couche visuelle offre de meilleures performances que l’utilisation des constructions XAML. Toutefois, l’utilisation de ElementCompositionPreview pour obtenir l’objet visuel de composition sous-jacent de l’élément, puis l’animation du visuel avec des animations de composition, est plus complexe à utiliser.

À compter de Windows 10, version 1809, vous pouvez animer des propriétés sur un UIElement directement à l’aide d’animations de composition sans avoir à obtenir le visuel de composition sous-jacent.

Remarque

Pour utiliser ces propriétés sur UIElement, votre version cible du projet UWP doit être 1809 ou ultérieure. Pour plus d’informations sur la configuration de la version de votre projet, consultez Applications adaptatives de version.

Exemples

Galerie WinUI 2
Galerie WinUI 2

Si l’application Galerie WinUI 2 est installée, cliquez ici pour ouvrir l’application et voir Animation interop en action.

Les nouvelles propriétés de rendu remplacent les anciennes propriétés de rendu

Ce tableau affiche les propriétés que vous pouvez utiliser pour modifier le rendu d’un UIElement, qui peut également être animé avec une CompositionAnimation.

Propriété Type Description
Opacity Double Degré d’opacité de l’objet
Traduction Vector3 Décaler la position X/Y/Z de l’élément
TransformMatrix Matrix4x4 Matrice de transformation à appliquer à l’élément
Mise à l’échelle Vector3 Mettre à l’échelle l’élément, centré sur CenterPoint
Rotation Float Faire pivoter l’élément autour de RotationAxis et CenterPoint
RotationAxis Vector3 Axe de la rotation
CenterPoint Vector3 Point central de l’échelle et de la rotation

La valeur de la propriété TransformMatrix est combinée aux propriétés Scale, Rotation et Translation dans l’ordre suivant : TransformMatrix, Scale, Rotation, Translation.

Ces propriétés n’affectent pas la disposition de l’élément. Par conséquent, la modification de ces propriétés n’entraîne pas une nouvelle passe Measure/Arrange.

Ces propriétés ont le même objectif et le même comportement que les propriétés nommées comme celles de la classe Visual de composition (à l’exception de Translation, qui ne se trouve pas sur Visual).

Exemple : Définition de la propriété Scale

Cet exemple montre comment définir la propriété Scale sur un bouton.

<Button Scale="2,2,1" Content="I am a large button" />

var button = new Button();
button.Content = "I am a large button";
button.Scale = new Vector3(2.0f,2.0f,1.0f);

Exclusivité mutuelle entre les propriétés nouvelles et anciennes

Remarque

La propriété Opacity n’applique pas l’exclusivité mutuelle décrite dans cette section. Vous utilisez la même propriété Opacity que vous utilisiez des animations XAML ou de composition.

Les propriétés qui peuvent être animées avec une CompositionAnimation sont des remplacements pour plusieurs propriétés UIElement existantes :

Lorsque vous définissez (ou animez) l’une des nouvelles propriétés, vous ne pouvez pas utiliser les anciennes propriétés. À l’inverse, si vous définissez (ou animez) l’une des anciennes propriétés, vous ne pouvez pas utiliser les nouvelles propriétés.

Vous ne pouvez pas également utiliser les nouvelles propriétés si vous utilisez ElementCompositionPreview pour obtenir et gérer le visuel vous-même à l’aide de ces méthodes :

Important

Si vous tentez de combiner l’utilisation des deux ensembles de propriétés, l’appel d’API échoue et génère un message d’erreur.

Il est possible de passer d’un ensemble de propriétés en les désactivant, mais par souci de simplicité, il n’est pas recommandé. Si la propriété est sauvegardée par une DependencyProperty (par exemple, UIElement.Projection est sauvegardée par UIElement.ProjectionProperty), appelez ClearValue pour la restaurer à son état « inutilisé ». Sinon (par exemple, la propriété Scale), définissez la propriété sur sa valeur par défaut.

Animation des propriétés UIElement avec CompositionAnimation

Vous pouvez animer les propriétés de rendu répertoriées dans la table avec une CompositionAnimation. Ces propriétés peuvent également être référencées par une expressionAnimation.

Utilisez les méthodes StartAnimation et StopAnimation sur UIElement pour animer les propriétés UIElement.

Exemple : Animation de la propriété Scale avec un Vector3KeyFrameAnimation

Cet exemple montre comment animer l’échelle d’un bouton.

var compositor = Window.Current.Compositor;
var animation = compositor.CreateVector3KeyFrameAnimation();

animation.InsertKeyFrame(1.0f, new Vector3(2.0f,2.0f,1.0f));
animation.Duration = TimeSpan.FromSeconds(1);
animation.Target = "Scale";

button.StartAnimation(animation);

Exemple : Animation de la propriété Scale avec une expressionAnimation

Une page comporte deux boutons. Le deuxième bouton s’anime pour être deux fois plus grand (via l’échelle) que le premier bouton.

<Button x:Name="sourceButton" Content="Source"/>
<Button x:Name="destinationButton" Content="Destination"/>

var compositor = Window.Current.Compositor;
var animation = compositor.CreateExpressionAnimation("sourceButton.Scale*2");
animation.SetExpressionReferenceParameter("sourceButton", sourceButton);
animation.Target = "Scale";
destinationButton.StartAnimation(animation);