Implicit áttűnések

Az implicit átmenetek automatikusan animálják bizonyos UIElement-tulajdonságok változásait. Explicit animációs kód írása helyett egy áttűnési objektumot csatol egy tulajdonsághoz, és a WinUI 3 zökkenőmentesen animálja az értékváltozásokat.

A WinUI 3 három átmeneti osztályt biztosít:

Átmeneti osztály Animálja
ScalarTransition Opacity, Rotation
Vector3Transition Scale, Translation
BrushTransition Background; Foreground azokon az elemeken, amelyek rendelkeznek ForegroundTransition-val (például TextBlock)

Az átlátszatlanság változásának animálása

Csatoljon egy ScalarTransition tulajdonságot az OpacityTransition átlátszatlansági módosítások animálásához:

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

A kód módosításakor MyRect.Opacity a WinUI 3 automatikusan animálja a módosítást:

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

Forgatási módosítások animálása

Csatolja a ScalarTransition tulajdonsághoz a RotationTransition következőt:

<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
}

Méretezési módosítások animálása

Csatolja a Vector3Transition tulajdonsághoz a ScaleTransition következőt:

<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

Fordítási módosítások animálása

Csatolja a Vector3Transition tulajdonsághoz a TranslationTransition következőt:

<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

Háttérkefe módosításainak animálása

Csatoljon egy BrushTransitionBackgroundTransition panel tulajdonságához vagy 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 két különálló ecsetpéldány között hoz létre animációt. A meglévő SolidColorBrush objektum új színének beállítása nem váltja ki az áttűnést. Rendeljen hozzá egy új SolidColorBrush objektumot az animáció aktiválásához.

Áttűnési időtartam konfigurálása

Alapértelmezés szerint az áttűnések platformalapú időtartamot használnak. Felülbírálhatja a Duration tulajdonsággal:

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

A(z) Duration érték egy TimeSpan, hours:minutes:seconds formátumban, opcionális másodperctörttel (például 0:0:0.5 az 500 ms esetén).

Nyissa meg a WinUI 3 Katalógus alkalmazást, és tekintse meg az implicit áttűnéseket működés közben

A WinUI 3 Katalógus alkalmazás interaktív példákat tartalmaz a WinUI 3 vezérlők és funkciók többségére.

  • Last updated on