共用方式為

整合在一起

  • 發行項

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

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

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

轉換體驗

功能動畫

向前離開方向：
淡出：150m; 緩動：預設加速 向前進入方向：
向上滑動150px：300ms; 緩動：預設減速

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

物件範例

300 毫秒動作

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

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

範例

開啟 WinUI 3 資源庫應用程式，並查看隱含轉換運作情形。

WinUI 3 資源庫應用程式包含大多數 WinUI 3 控制項和功能的互動式範例。 從 Microsoft Store 取得應用程式，或在 GitHub 上取得原始程式碼

隱式動畫

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

您可以更改隱式動畫的以下屬性：

每個可以進行隱式動畫變更的屬性都有一個對應的轉換屬性。 若要為屬性設定動畫，您可以將轉換類型指派給對應的轉換屬性。 下表顯示了每個屬性要使用的轉換屬性和轉換類型。

動畫屬性 轉換屬性 隱式轉換類型
UIElement.Opacity OpacityTransition ScalarTransition
UIElement.Rotation RotationTransition ScalarTransition
UIElement.Scale ScaleTransition Vector3Transition
UIElement.Translation TranslationTransition Vector3Transition
Border.Background BackgroundTransition BrushTransition
ContentPresenter.Background BackgroundTransition BrushTransition
Panel.Background 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;
}

UWP 和 WinUI 2

重要

本文中的資訊和範例針對使用 Windows App SDK 和 WinUI 3 的應用程式進行了最佳化，但通常適用於使用 WinUI 2 的 UWP 應用程式。 如需平台特定資訊和範例，請參閱 UWP API 參考。

本節包含您在 UWP 或 WinUI 2 應用程式中使用控制項所需的資訊。

隱式動畫需要 Windows 10 版本 1809 (SDK 17763) 或更新版本。