Interopérabilité entre XAML et la composition

Les éléments XAML WinUI 3 sont soutenus par la couche visuelle Windows Composition. Dans WinUI 3, vous pouvez exécuter directement les objets CompositionAnimation sur les instances UIElement à l’aide de UIElement.StartAnimation. Cela diffère d’UWP, où il fallait d’abord extraire le visuel sous-jacent à l’aide de ElementCompositionPreview.GetElementVisual.

Cette interopérabilité vous permet d’appliquer des animations de printemps, des animations d’expression et d’autres types d’animation de composition aux éléments WinUI 3.

Télécharger Compositor

Utilisez CompositionTarget.GetCompositorForCurrentThread() pour obtenir le Compositor du thread d’interface utilisateur XAML actuel :

using Microsoft.UI.Composition;
using Microsoft.UI.Xaml.Media;

Compositor compositor = CompositionTarget.GetCompositorForCurrentThread();

Appelez cette méthode à partir du thread d’interface utilisateur. Le Compositor vous permet de créer des animations, des pinceaux et des effets.

Lancer une animation à ressort sur un UIElement

Créez un SpringVector3NaturalMotionAnimation objet qui cible la Scale propriété, puis appelez-la UIElement.StartAnimation pour l’exécuter :

using System.Numerics;
using Microsoft.UI.Composition;
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Input;
using Microsoft.UI.Xaml.Media;

private readonly Compositor _compositor = CompositionTarget.GetCompositorForCurrentThread();
private SpringVector3NaturalMotionAnimation? _springAnimation;

private SpringVector3NaturalMotionAnimation CreateOrUpdateSpringAnimation(float finalValue)
{
    _springAnimation ??= _compositor.CreateSpringVector3Animation();
    _springAnimation.Target = "Scale";
    _springAnimation.FinalValue = new Vector3(finalValue, finalValue, 1.0f);

    return _springAnimation;
}

private void Element_PointerEntered(object sender, PointerRoutedEventArgs e)
{
    var springAnimation = CreateOrUpdateSpringAnimation(1.5f);
    (sender as UIElement)?.StartAnimation(springAnimation);
}

private void Element_PointerExited(object sender, PointerRoutedEventArgs e)
{
    var springAnimation = CreateOrUpdateSpringAnimation(1.0f);
    (sender as UIElement)?.StartAnimation(springAnimation);
}

Le SpringVector3NaturalMotionAnimation utilise la physique des ressorts. L’élément peut dépasser légèrement et s’installer en place, ce qui crée une sensation naturelle.

Ajuster le comportement du ressort

Contrôlez le comportement du ressort en définissant DampingRatio et Period :

_springAnimation.DampingRatio = 0.6f;
_springAnimation.Period = TimeSpan.FromMilliseconds(50);

Utiliser des animations d’expression

Les animations d’expression utilisent des expressions mathématiques pour générer en continu une propriété à partir d’une autre valeur. Dans WinUI 3, vous pouvez démarrer une animation d’expression directement sur un UIElement:

using System.Numerics;
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Media;

var compositor = CompositionTarget.GetCompositorForCurrentThread();
var source = compositor.CreatePropertySet();
source.InsertVector3("Offset", new Vector3(40.0f, 0.0f, 0.0f));

var expressionAnimation = compositor.CreateExpressionAnimation("source.Offset");
expressionAnimation.SetReferenceParameter("source", source);
expressionAnimation.Target = "Translation";

myElement.StartAnimation(expressionAnimation);

Pour plus d’informations sur les animations d’expressions, consultez les animations basées sur les relations.

Différences winUI 3 et UWP

Dans UWP, vous deviez extraire un Visual d’un élément avant de pouvoir exécuter une animation Composition sur celui-ci :

// UWP pattern
var visual = ElementCompositionPreview.GetElementVisual(myElement);
visual.StartAnimation("Scale", springAnimation);

Dans WinUI 3, vous pouvez appeler StartAnimation directement sur UIElement :

// WinUI 3 pattern
myElement.StartAnimation(springAnimation);

Ouvrir la galerie WinUI 3

L’application Galerie WinUI 3 inclut des exemples interactifs de contrôles et de fonctionnalités WinUI 3.

Articles connexes

• Animations naturelles
• Animations de printemps
• Animations basées sur des relations
• Vue d’ensemble de la couche visuelle