Interoperabilità tra XAML e Composition

Gli elementi XAML di WinUI 3 si basano sul livello visuale di composizione di Windows. In WinUI 3 è possibile eseguire CompositionAnimation oggetti direttamente nelle UIElement istanze usando UIElement.StartAnimation. Ciò differisce da UWP, dove prima era necessario estrarre il visual sottostante usando ElementCompositionPreview.GetElementVisual.

Questa interoperabilità consente di applicare animazioni spring, animazioni di espressioni e altri tipi di animazione Composition agli elementi WinUI 3.

Ottenere il compositore

Usa CompositionTarget.GetCompositorForCurrentThread() per ottenere il Compositor per il thread dell'interfaccia utente XAML corrente:

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

Compositor compositor = CompositionTarget.GetCompositorForCurrentThread();

Chiamare questo metodo dal thread dell'interfaccia utente. Compositor Consente di creare animazioni, pennelli ed effetti.

Eseguire un'animazione elastica su un elemento UIElement

Creare un SpringVector3NaturalMotionAnimation oggetto destinato alla Scale proprietà e quindi chiamare UIElement.StartAnimation per eseguirlo:

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);
}

SpringVector3NaturalMotionAnimation usa la fisica a molla. L'elemento può andare leggermente oltre la posizione finale e poi assestarsi, creando una sensazione naturale.

Ottimizzare il comportamento della molla

Controllare il comportamento della molla impostando DampingRatio e Period:

_springAnimation.DampingRatio = 0.6f;
_springAnimation.Period = TimeSpan.FromMilliseconds(50);
DampingRatio Effetto
< 1.0 Sottosmorzato. L'elemento rimbalza prima di assestarsi.
= 1.0 Smorzato in modo critico. L'elemento raggiunge l'obiettivo senza superarlo.
> 1.0 Sovrasmorzato. L'elemento si avvicina più lentamente alla destinazione.

Usare le animazioni delle espressioni

Le animazioni basate su espressioni usano espressioni matematiche per controllare continuamente una proprietà in base a un altro valore. In WinUI 3 è possibile avviare un'animazione di espressione direttamente in :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);

Per altre informazioni sulle animazioni delle espressioni, vedere Animazioni basate su relazioni.

Differenze tra WinUI 3 e UWP

In UWP, dovevi estrarre un Visual da un elemento prima di potervi applicare un'animazione Composition:

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

In WinUI 3 è possibile chiamare StartAnimation direttamente su UIElement:

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

Apri l'app WinUI 3 Gallery e guarda l'interoperabilità tra XAML e Composition in azione

L'app Raccolta WinUI 3 include esempi interattivi di controlli e funzionalità winUI 3.

  • Last updated on