Transições implícitas

As transições implícitas animam automaticamente alterações em propriedades específicas do UIElement. Em vez de escrever código de animação explícito, anexas um objeto de transição a uma propriedade e o WinUI 3 anima qualquer alteração de valor de forma fluida.

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

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

Animar as alterações de opacidade

Anexe um ScalarTransition à propriedade OpacityTransition para animar as alterações de opacidade:

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

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

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

Animar 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

Alterações de tradução animada

Anexe 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

Animar alterações de pincel de fundo

Associe 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 desencadeia a transição. Atribui um novo SolidColorBrush objeto para ativar a animação.

Configurar a duração da transição

Por defeito, as transições usam uma duração definida pela plataforma. Pode substituí-lo com a propriedade Duration:

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

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

Abra a aplicação WinUI 3 Gallery e veja transições implícitas em ação

A aplicação WinUI 3 Gallery inclui exemplos interativos da maioria dos controlos e funcionalidades do WinUI 3.

  • Last updated on