整合在一起

  • 發行項

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

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

隱式動畫 參數變更中的值之間的自動補間和計時，以使用標準化值實現非常簡單的 Fluent 動態。

內建動畫 系統元件 (例如公共控制和共用動態)「預設為 Fluent」。 基本功能的套用方式與其隱含的用法一致。

遵循指南建議的自訂動畫 有時系統可能尚未為您的場景提供精確的動態解決方案。 在這些情況下，請使用基準基本功能建議作為體驗的起點。

轉換體驗

functional animation

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

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

物件範例

300ms motion

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

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

範例

WinUI Gallery

如果您已安裝 WinUI 2 程式庫應用程式，請按一下此處以開啟應用程式並查看隱式轉換的運作情形。

隱式動畫

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

隱式動畫是一種透過在參數變更期間，在新舊值之間自動插值來實現 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;
}