Interoperabilita mezi XAML a Composition

Elementy XAML WinUI 3 jsou podporovány vizuální vrstvou Windows Composition. Ve WinUI 3 můžete spouštět CompositionAnimation objekty přímo na UIElement instancích pomocí UIElement.StartAnimation. To se liší od UPW, kde jste nejprve potřebovali extrahovat základní vizuál pomocí ElementCompositionPreview.GetElementVisual.

Toto propojení umožňuje použít u prvků WinUI 3 pružinové animace, animace řízené výrazy a další typy kompozičních animací.

Získejte kompozitor

Pomocí CompositionTarget.GetCompositorForCurrentThread() získáte Compositor pro aktuální vlákno uživatelského rozhraní XAML:

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

Compositor compositor = CompositionTarget.GetCompositorForCurrentThread();

Volejte tuto metodu z vlákna uživatelského rozhraní. Compositor umožňuje vytvářet animace, štětce a efekty.

Spusťte pružinovou animaci na prvku UIElement

Vytvořte objekt SpringVector3NaturalMotionAnimation , který cílí na Scale vlastnost, a pak ho spusťte voláním UIElement.StartAnimation :

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 používá pružinovou fyziku. Prvek může cílovou polohu mírně přesáhnout a poté se ustálit na místě, což působí přirozeně.

Upravte chování pružiny

Řízení chování pružiny nastavením DampingRatio a Period:

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

Použití animací výrazů

Animace výrazů používají matematické výrazy k nepřetržitému řízení vlastnosti z jiné hodnoty. Ve WinUI 3 můžete spustit animaci výrazu přímo na 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);

Další informace o animacích výrazů najdete v tématu Animace založené na relacích.

Rozdíly winUI 3 a UPW

V UWP jste museli nejprve z prvku extrahovat Visual, než jste na něm mohli spustit animaci Composition:

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

Ve WinUI 3 můžete volat StartAnimation přímo na UIElement:

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

Otevření galerie WinUI 3

Aplikace Galerie WinUI 3 obsahuje interaktivní příklady ovládacích prvků a funkcí WinUI 3.

Související články

• Přirozené animace
• Pružinové animace
• Animace založené na relacích
• Přehled vizuální vrstvy