Niejawne przejścia

Niejawne przejścia automatycznie animują zmiany określonych właściwości elementu interfejsu użytkownika. Zamiast pisać jawny kod animacji, należy dołączyć obiekt przejścia do właściwości i WinUI 3 animuje wszelkie zmiany wartości płynnie.

Interfejs WinUI 3 udostępnia trzy klasy przejścia:

Klasa przejścia Ożywia
ScalarTransition Opacity, Rotation
Vector3Transition Scale, Translation
BrushTransition Background; Foreground na elementach uwidaczniających ForegroundTransition (na przykład TextBlock)

Animowanie zmian nieprzezroczystości

Dołącz ScalarTransition do właściwości OpacityTransition, aby animować zmiany nieprzezroczystości:

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

Po zmianie MyRect.Opacity kodu winUI 3 automatycznie animuje zmianę:

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

Animowanie zmian rotacji

Dołącz element ScalarTransition do właściwości 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
}

Animowanie zmian skali

Dołącz element Vector3Transition do właściwości 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

Animowanie zmian tłumaczenia

Dołącz Vector3Transition do właściwości 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

Animowanie zmian pędzla tła

Przypisz BrushTransition do właściwości BackgroundTransition panelu lub 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 tworzy animację przejścia między dwoma oddzielnymi obiektami pędzla. Ustawienie nowego koloru na istniejącym obiekcie SolidColorBrush nie wywołuje przejścia. Przypisz nowy SolidColorBrush obiekt, aby wyzwolić animację.

Konfigurowanie czasu trwania przejścia

Domyślnie przejścia używają czasu trwania zdefiniowanego przez platformę. Możesz zastąpić ją właściwością Duration :

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

Wartość Duration to TimeSpan w formacie hours:minutes:seconds, z opcjonalnymi ułamkowymi częściami sekundy (na przykład 0:0:0.5 dla 500 ms).

Otwórz aplikację Galeria WinUI 3 i zobacz niejawne przejścia w działaniu

Aplikacja z galerii WinUI 3 zawiera interaktywne przykłady większości kontrolek i funkcji WinUI 3.

  • Last updated on