Interoperabilidad de XAML y Composition

Los elementos XAML de WinUI 3 están respaldados por la capa visual de composición de Windows. En WinUI 3, puedes ejecutar objetos CompositionAnimation directamente en instancias de UIElement usando UIElement.StartAnimation. Esto difiere de UWP, donde primero necesitabas extraer el objeto visual subyacente mediante ElementCompositionPreview.GetElementVisual.

Esta interoperabilidad te permite aplicar animaciones de primavera, animaciones de expresión y otros tipos de animación de composición a los elementos WinUI 3.

Obtener el compositor

Utiliza CompositionTarget.GetCompositorForCurrentThread() para obtener el Compositor del hilo de interfaz de usuario XAML actual:

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

Compositor compositor = CompositionTarget.GetCompositorForCurrentThread();

Llame a este método desde el hilo de la interfaz de usuario. Compositor Permite crear animaciones, pinceles y efectos.

Ejecutar una animación de resorte en un UIElement

Cree un SpringVector3NaturalMotionAnimation que tenga como destino la Scale propiedad y, a continuación, llame UIElement.StartAnimation a para ejecutarla:

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

El SpringVector3NaturalMotionAnimation utiliza la física de resorte. El elemento puede sobrepasar ligeramente su posición y asentarse en su sitio, lo que crea una sensación natural.

Ajustar el comportamiento del muelle

Controle el comportamiento de spring estableciendo DampingRatio y Period:

_springAnimation.DampingRatio = 0.6f;
_springAnimation.Period = TimeSpan.FromMilliseconds(50);
DampingRatio Effect
< 1.0 Subamortiguado. El elemento rebota antes de estabilizarse.
= 1.0 Amortiguación crítica. El elemento alcanza el objetivo sin sobrepasarlo.
> 1.0 Sobreamortiguado. El elemento se aproxima más lentamente al destino.

Usar animaciones de expresión

Las animaciones basadas en expresiones usan expresiones matemáticas para controlar continuamente una propiedad en función de otro valor. En WinUI 3, puedes iniciar una animación de expresión directamente en 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);

Para obtener más información sobre las animaciones de expresión, vea Animaciones basadas en relaciones.

Diferencias de WinUI 3 y UWP

En UWP, tenías que extraer un Visual de un elemento antes de poder ejecutar una animación de composición en él:

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

En WinUI 3, puedes llamar a StartAnimation directamente en el UIElement:

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

Abra la aplicación WinUI 3 Gallery y descubra la interoperabilidad entre XAML y Composition en acción

La aplicación Galería de WinUI 3 incluye ejemplos interactivos de características y controles de WinUI 3.

  • Last updated on