Transições implícitas

Transições implícitas animam automaticamente as alterações em propriedades específicas de UIElement. Em vez de escrever código de animação explícito, você anexa um objeto de transição a uma propriedade e o WinUI 3 anima as alterações de valor sem problemas.

O WinUI 3 fornece três classes de transição:

Classe de transição Anima
ScalarTransition Opacity, Rotation
Vector3Transition Scale, Translation
BrushTransition Background; Foreground em elementos que expõem ForegroundTransition (por exemplo, TextBlock)

Animem as alterações de opacidade.

Anexe um ScalarTransition à propriedade OpacityTransition para animar mudanças na opacidade:

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

Quando você altera MyRect.Opacity o código, o WinUI 3 anima automaticamente a alteração:

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

Aplicar animação às alterações de rotação

Anexe um ScalarTransition à propriedade 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 alterações de escala

Anexe um Vector3Transition à propriedade 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

Animar alterações na tradução

Anexe um Vector3Transition à propriedade 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

Animem as alterações do pincel de fundo.

Anexe um BrushTransition à propriedade BackgroundTransition de um painel ou 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 anima entre duas instâncias de pincel separadas. Definir uma nova cor no objeto existente SolidColorBrush não dispara a transição. Atribua um novo SolidColorBrush objeto para disparar a animação.

Configurar a duração da transição

Por padrão, as transições usam uma duração definida pela plataforma. Você pode substituí-la com a Duration propriedade:

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

O valor de Duration é um TimeSpan no formato hours:minutes:seconds, com segundos fracionários opcionais (por exemplo, 0:0:0.5 representando 500 ms).

Abra o aplicativo da Galeria do WinUI 3 e veja transições implícitas em ação

O aplicativo da Galeria do WinUI 3 inclui exemplos interativos da maioria dos controles e recursos do WinUI 3.

  • Last updated on