Implicita övergångar

Implicita övergångar animerar automatiskt ändringar i specifika UIElement-egenskaper. I stället för att skriva explicit animeringskod kopplar du ett övergångsobjekt till en egenskap och WinUI 3 animerar alla värdeändringar smidigt.

WinUI 3 innehåller tre övergångsklasser:

Övergångsklass Animerar
ScalarTransition Opacity, Rotation
Vector3Transition Scale, Translation
BrushTransition Background; Foreground på element som exponerar ForegroundTransition (till exempel TextBlock)

Animera ogenomskinlighetsändringar

Koppla en ScalarTransition till egenskapen OpacityTransition för att animera ogenomskinlighetsändringar:

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

När du ändrar MyRect.Opacity i kod animerar WinUI 3 automatiskt ändringen:

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

Animera rotationsändringar

Koppla en ScalarTransition till egenskapen 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
}

Animera skalningsändringar

Koppla en Vector3Transition till egenskapen 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

Animera översättningsändringar

Koppla en Vector3Transition till egenskapen 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

Animera ändringar i bakgrundspenseln

Knyt en BrushTransition till egenskapen BackgroundTransition för en panel eller 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 animerar mellan två separata penselinstanser. Att ange en ny färg på det befintliga SolidColorBrush objektet utlöser inte övergången. Tilldela ett nytt SolidColorBrush objekt för att utlösa animeringen.

Konfigurera övergångsvaraktighet

Som standard använder övergångar en plattformsdefinierad varaktighet. Du kan åsidosätta den med egenskapen Duration :

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

Värdet Duration är ett TimeSpan i formatet hours:minutes:seconds, med valfria bråksekunder (till exempel 0:0:0.5 för 500 ms).

Öppna WinUI 3-galleriappen och se implicita övergångar i praktiken

WinUI 3-galleriappen innehåller interaktiva exempel på de flesta WinUI 3-kontroller och funktioner.

  • Last updated on