Implicitní přechody

Implicitní přechody automaticky animují změny konkrétních vlastností UIElement. Místo psaní explicitního animačního kódu připojíte objekt přechodu k vlastnosti a WinUI 3 hladce animuje všechny změny hodnot.

WinUI 3 poskytuje tři třídy přechodu:

Třída přechodu Animuje
ScalarTransition Opacity, Rotation
Vector3Transition Scale, Translation
BrushTransition Background; Foreground na prvcích, které zpřístupňují ForegroundTransition (například TextBlock)

Animace změn neprůhlednosti

Připojte ScalarTransition k vlastnosti OpacityTransition, aby se animovaly změny průhlednosti:

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

Když změníte MyRect.Opacity kód, WinUI 3 tuto změnu automaticky animuje:

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

Animace změn otočení

Připojte prvek ScalarTransition k vlastnosti 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
}

Animace změn měřítka

Připojte Vector3Transition k vlastnosti 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

Animace změn překladu

Připojte objekt Vector3Transition k vlastnosti 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

Animovat změny štětce na pozadí

Připojte BrushTransition k vlastnosti BackgroundTransition panelu nebo 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 animuje mezi dvěma samostatnými instancemi štětce. Nastavení nové barvy u existujícího SolidColorBrush objektu neaktivuje přechod. Přiřaďte nový SolidColorBrush objekt, který aktivuje animaci.

Konfigurace doby trvání přechodu

Přechody ve výchozím nastavení používají dobu definovanou platformou. Můžete ho přepsat pomocí vlastnosti Duration:

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

Hodnota Duration je TimeSpan ve formátu hours:minutes:secondss volitelnými desetinnými sekundami (například 0:0:0.5 pro 500 ms).

Otevřete aplikaci Galerie WinUI 3 a podívejte se na implicitní přechody v akci.

Aplikace Galerie WinUI 3 obsahuje interaktivní příklady většiny ovládacích prvků a funkcí WinUI 3.

  • Last updated on