Interoperacyjność XAML i Composition

Elementy XAML w technologii WinUI 3 opierają się na warstwie wizualnej Windows Composition. W WinUI 3 można uruchamiać obiekty CompositionAnimation bezpośrednio na wystąpieniach UIElement za pomocą UIElement.StartAnimation. Różni się to od platformy UWP, w której najpierw trzeba było wyodrębnić podstawową wizualizację przy użyciu polecenia ElementCompositionPreview.GetElementVisual.

Ta funkcja interoperacyjności umożliwia stosowanie animacji sprężynowych, animacji opartych na wyrażeniach i innych typów animacji Composition do elementów WinUI 3.

Pobierz Compositor

Użyj elementu CompositionTarget.GetCompositorForCurrentThread(), aby uzyskać obiekt Compositor dla bieżącego wątku interfejsu użytkownika XAML:

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

Compositor compositor = CompositionTarget.GetCompositorForCurrentThread();

Wywołaj tę metodę z wątku interfejsu użytkownika. Compositor umożliwia tworzenie animacji, pędzli i efektów.

Uruchom animację sprężynową na elemencie UIElement

Utwórz element SpringVector3NaturalMotionAnimation, który jest ukierunkowany na właściwość Scale, a następnie wywołaj UIElement.StartAnimation, aby go uruchomić:

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

Element SpringVector3NaturalMotionAnimation używa fizyki sprężyny. Element może nieznacznie przekroczyć pozycję docelową i ustabilizować się na miejscu, co daje naturalny efekt.

Dostosuj zachowanie sprężyny

Kontrolowanie zachowania sprężyny przez ustawienie DampingRatio i Period:

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

Używanie animacji wyrażeń

Animacje sterowane wyrażeniami wykorzystują wyrażenia matematyczne do ciągłego sterowania właściwością na podstawie innej wartości. W środowisku WinUI 3 można uruchomić animację wyrażeń bezpośrednio na obiekcie 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);

Aby uzyskać więcej informacji na temat animacji wyrażeń, zobacz Animacje oparte na relacji.

Różnice w systemach WinUI 3 i UWP

W UWP trzeba było wyodrębnić obiekt Visual z elementu, zanim można było uruchomić dla niego animację Composition:

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

W WinUI 3 możesz wywołać StartAnimation bezpośrednio na UIElement:

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

Otwórz galerię WinUI 3

Aplikacja Galeria WinUI 3 zawiera interaktywne przykłady kontrolek i funkcji WinUI 3.

Artykuły pokrewne

• Animacje naturalne
• Animacje spring
• Animacje oparte na relacjach
• Omówienie warstwy wizualnej