隱含轉換

隱含式轉換會自動以動畫呈現特定 UIElement 屬性的變更。 你不需要寫明確的動畫程式碼，而是把過渡物件附加到屬性上，WinUI 3 就能順暢地動畫化任何值變更。

WinUI 3 提供三個轉換類別：

過渡類別 動畫師
ScalarTransition Opacity、Rotation
Vector3Transition Scale、Translation
BrushTransition Background；在具有 ForegroundTransition 的元素上 Foreground（例如 TextBlock）

為不透明度變化製作動畫

將 a ScalarTransition 附加到 OpacityTransition 屬性上以進行不透明度的動畫變化：

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

當你在程式碼中更改 MyRect.Opacity 時，WinUI 3 會自動將變更動畫化：

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

為旋轉變更加上動畫效果

將 ScalarTransition 附加到 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
}

動畫比例變化

將 Vector3Transition 附加到 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

以動畫顯示翻譯變更

將 Vector3Transition 附加到 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

以動畫呈現背景筆刷的變更

將 BrushTransition 附加至面板或 ContentPresenter 的 BackgroundTransition 屬性：

<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);

附註

BrushTransition會在兩個獨立的筆刷執行個體之間產生動畫效果。 在現有 SolidColorBrush 物件上設定新顏色不會觸發轉換。 指派一個新 SolidColorBrush 物件來觸發動畫。

設定轉換時間

預設情況下，轉場會使用由平台定義的持續時間。 你可以用 Duration 該屬性來覆蓋：

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

Duration 值是格式為 hours:minutes:seconds 的 TimeSpan，可選擇包含小數秒（例如，0:0:0.5 表示 500 毫秒）。

打開 WinUI 3 圖庫應用程式，看看隱含的轉場效果

WinUI 3 圖庫應用程式包含大多數 WinUI 3 控制項與功能的互動範例。

  • Last updated on