XAML- och kompositionskompatibilitet

WinUI 3 XAML-elementen stöds av det visuella lagret i Windows Composition. I WinUI 3 kan du köra CompositionAnimation-objekt direkt på UIElement-instanser med hjälp av UIElement.StartAnimation. Detta skiljer sig från UWP, där du först behövde extrahera det underliggande visuella objektet med hjälp av ElementCompositionPreview.GetElementVisual.

Med den här interopen kan du använda våranimationer, uttrycksanimeringar och andra animeringstyper för sammansättning på WinUI 3-element.

Hämta compositorn

Använd CompositionTarget.GetCompositorForCurrentThread() för att hämta Compositor för den aktuella XAML-användargränssnittstråden:

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

Compositor compositor = CompositionTarget.GetCompositorForCurrentThread();

Anropa den här metoden från användargränssnittstråden. Med Compositor kan du skapa animeringar, penslar och effekter.

Kör en fjäderanimation på ett UIElement

Skapa en SpringVector3NaturalMotionAnimation som riktar sig mot Scale egenskapen och anropa UIElement.StartAnimation sedan för att köra den:

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 använder fjäderfysik. Elementet kan röra sig lite förbi sin slutposition och sedan lägga sig på plats, vilket skapar en naturlig rörelse.

Justera fjäderns beteende

Kontrollera springbeteendet genom att ange DampingRatio och Period:

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

Använda uttrycksanimeringar

Uttrycksanimeringar använder matematiska uttryck för att kontinuerligt styra en egenskap utifrån ett annat värde. I WinUI 3 kan du starta en uttrycksanimering direkt på en 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);

Mer information om uttrycksanimeringar finns i Relationsbaserade animeringar.

Skillnader mellan WinUI 3 och UWP

I UWP var du tvungen att extrahera en Visual från ett element innan du kunde köra en kompositionsanimation på den:

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

I WinUI 3 kan du anropa StartAnimation direkt på UIElement:

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

Öppna WinUI 3-galleriet

WinUI 3-galleriappen innehåller interaktiva exempel på WinUI 3-kontroller och -funktioner.

Relaterade artiklar

• Naturliga animeringar
• Våranimationer
• Relationsbaserade animeringar
• Översikt över visuellt lager