Transiciones implícitas

Las transiciones implícitas animan automáticamente los cambios en determinadas propiedades de UIElement. En lugar de escribir código de animación explícito, adjunta un objeto de transición a una propiedad y WinUI 3 anima cualquier cambio de valor sin problemas.

WinUI 3 proporciona tres clases de transición:

Clase de transición Animaciones
ScalarTransition Opacity, Rotation
Vector3Transition Scale, Translation
BrushTransition Background; Foreground en elementos que exponen ForegroundTransition (por ejemplo, TextBlock)

Animar cambios de opacidad

Asocie un ScalarTransition a la propiedad OpacityTransition para animar los cambios de opacidad:

<Rectangle x:Name="MyRect" Width="80" Height="80" Opacity="1.0">
    <Rectangle.OpacityTransition>
        <ScalarTransition />
    </Rectangle.OpacityTransition>
</Rectangle>

Al cambiar MyRect.Opacity el código, WinUI 3 anima automáticamente el cambio:

MyRect.Opacity = 0.2;  // Animates from 1.0 to 0.2

Animar los cambios de rotación

Asigne ScalarTransition a la propiedad RotationTransition:

<Rectangle x:Name="MyRect" Width="80" Height="80">
    <Rectangle.RotationTransition>
        <ScalarTransition />
    </Rectangle.RotationTransition>
</Rectangle>

// Read ActualWidth/ActualHeight in Loaded or SizeChanged — they are 0 until layout runs.
private void MyRect_Loaded(object sender, RoutedEventArgs e)
{
    MyRect.CenterPoint = new System.Numerics.Vector3(
        (float)MyRect.ActualWidth / 2,
        (float)MyRect.ActualHeight / 2,
        0f);
    MyRect.Rotation = 90;  // Animates to 90 degrees
}

Animar los cambios de escala

Asocie un Vector3Transition a la propiedad ScaleTransition:

<Rectangle x:Name="MyRect" Width="80" Height="80">
    <Rectangle.ScaleTransition>
        <Vector3Transition />
    </Rectangle.ScaleTransition>
</Rectangle>

MyRect.Scale = new System.Numerics.Vector3(1.5f, 1.5f, 1.0f);  // Animates scale up

Aplicar animación a los cambios de traducción

Adjunta un Vector3Transition a la propiedad TranslationTransition:

<Rectangle x:Name="MyRect" Width="80" Height="80">
    <Rectangle.TranslationTransition>
        <Vector3Transition />
    </Rectangle.TranslationTransition>
</Rectangle>

MyRect.Translation = new System.Numerics.Vector3(100, 0, 0);  // Moves 100px right

Animar los cambios del pincel de fondo

Asocie un objeto BrushTransition a la propiedad BackgroundTransition de un panel o ContentPresenter:

<ContentPresenter x:Name="MyPresenter" Width="80" Height="80" Background="Blue">
    <ContentPresenter.BackgroundTransition>
        <BrushTransition />
    </ContentPresenter.BackgroundTransition>
</ContentPresenter>

// Animate from Blue to Yellow when the background is replaced with a new brush
MyPresenter.Background = new SolidColorBrush(Colors.Yellow);

Note

BrushTransition realiza una animación entre dos instancias de pincel distintas. Establecer un nuevo color en el objeto existente SolidColorBrush no desencadena la transición. Asigne un nuevo SolidColorBrush objeto para desencadenar la animación.

Configurar la duración de la transición

De forma predeterminada, las transiciones usan una duración definida por la plataforma. Puede invalidarlo con la Duration propiedad :

<Rectangle.OpacityTransition>
    <ScalarTransition Duration="0:0:0.5" />
</Rectangle.OpacityTransition>

El valor Duration es un TimeSpan con el formato hours:minutes:seconds, con segundos fraccionarios opcionales (por ejemplo, 0:0:0.5 para 500 ms).

Abra la aplicación Galería de WinUI 3 y vea transiciones implícitas en acción.

La aplicación WinUI 3 Gallery incluye ejemplos interactivos de la mayoría de los controles y características de WinUI 3.

  • Last updated on