共用方式為

Windows app 中的動畫

Fluent 動作的基本功能由計時、緩動、方向性和重力共同構成。 涉及其中一項時也必須將其他各項納入考慮，並在應用程式的內容中適當地套用。

以下是在應用程式中套用 Fluent 動態基本功能的 3 種方式。

  • 隱含動畫
    參數變更中的值之間的自動補間和計時，以使用標準化值達成非常簡單的 Fluent 動作。
  • 內建動畫
    系統元件，例如通用控件和共用動作，預設為 「Fluent」。。 基本原則的應用方式與其隱含的用法一致。
  • 遵循指引建議的自定義動畫
    有時候系統尚未提供您案例的確切動作解決方案。 在這些情況下，請使用基本建議作為您應用體驗的基準起點。

轉換範例

功能動畫

向外方向：
淡出：150米;Easing：預設加速 方向往前：
向上滑動150px：300ms; 緩動：預設減速

向後方向：
滑動向下 150px：150毫秒；緩動：預設加速 方向：向後進入
淡入：300ms; 緩動：預設減速

物件範例

300 毫秒動作

擴展方向：
成長：300ms; 緩動：標準

方向合約：
成長：150ms; 緩動：預設加速

隱式動畫

隱式動畫是一種透過在參數變更期間，在新舊值之間自動插值來實現 Fluent 動態的簡單方法。

開啟 WinUI 3 資源庫應用程式，並觀察隐式转换的運作情形

WinUI 3 圖庫圖示 WinUI 3 圖庫應用程式包含互動式的 WinUI 控制項與功能範例。 你可以從 Microsoft Store下載 App，或在 GitHub 瀏覽原始碼。

您可以對以下屬性進行隱式動畫處理：

每個可以隱含產生動畫變更的屬性都有對應的 轉換 屬性。 若要讓屬性產生動畫效果，您可以將轉換類型指派給對應的 轉換 屬性。 此表顯示每個轉換屬性及其使用的轉換類型。

動畫屬性 轉換屬性 隱式轉換類型
UIElement.Opacity OpacityTransition （不透明度過渡） ScalarTransition （標量轉換）
UIElement.Rotation RotationTransition ScalarTransition （標量轉換）
UIElement.Scale ScaleTransition （縮放過渡） Vector3Transition
UIElement.Translation 翻譯 TranslationTransition Vector3Transition
邊框背景 BackgroundTransition（背景過渡） BrushTransition （畫筆過渡）
ContentPresenter.Background BackgroundTransition（背景過渡） BrushTransition （畫筆過渡）
面板.背景 BackgroundTransition（背景過渡） BrushTransition （畫筆過渡）

此範例示範如何使用 Opacity 屬性和轉換，來使按鈕在啟用控制項時淡入並在停用控制項時淡出。

<Button x:Name="SubmitButton"
        Content="Submit"
        Opacity="{x:Bind OpaqueIfEnabled(SubmitButton.IsEnabled), Mode=OneWay}">
    <Button.OpacityTransition>
        <ScalarTransition />
    </Button.OpacityTransition>
</Button>

public double OpaqueIfEnabled(bool IsEnabled)
{
    return IsEnabled ? 1.0 : 0.2;
}
  • Last updated on