組合在一起Bringing it together

時間、加減速、方向以及重力搭配,構成了 Fluent 動作的基礎。Timing, easing, directionality, and gravity work together to form the foundation of Fluent motion. 每一個在其他應用程式中應予以考量,並在應用程式內容中適當地套用。Each has to be considered in the context of the others, and applied appropriately in the context of your app.

以下是 3 種在應用程式中套用 Fluent 動作基礎的方式。Here are 3 ways to apply Fluent motion fundamentals in your app.

隱含動畫 參數變更中值之間的自動補間和計時會變更,以使用標準化值達成非常簡單的流暢動作。Implicit animation Automatic tween and timing between values in a parameter change to achieve very simple Fluent motion using the standardized values.

內建動畫 系統元件(例如通用控制項和共用的動作)是「預設為流暢」。Built-in animation System components, such as common controls and shared motion, are "Fluent by default". 基本概念的套用方式與隱含使用方式一致。Fundamentals have been applied in a manner consistent with their implied usage.

遵循指引建議的自訂動畫 有時候系統可能尚未針對您的案例提供確切的動作解決方案。Custom animation following guidance recommendations There may be times when the system does not yet provide an exact motion solution for your scenario. 在這些情況下,請使用基準基本建議作為您體驗的起點。In those cases, use the baseline fundamental recommendations as a starting point for your experiences.

轉換範例Transition example

功能性動畫

向前方向:Direction Forward Out:
淡出: 150m;緩和:預設 向前加速方向:Fade out: 150m; Easing: Default Accelerate Direction Forward In:
向上滑150px:300毫秒;簡化:預設減速Slide up 150px: 300ms; Easing: Default Decelerate

反向方向:Direction Backward Out:
向下滑動150px: 150ms;緩和:預設的向前加速 方向:Slide down 150px: 150ms; Easing: Default Accelerate Direction Backward In:
淡化:300毫秒;簡化:預設減速Fade in: 300ms; Easing: Default Decelerate

物件範例Object example

300ms 動作

方向展開:Direction Expand:
成長:300毫秒;簡化:標準Grow: 300ms; Easing: Standard

方向合約:Direction Contract:
成長: 150ms;簡化:預設加速Grow: 150ms; Easing: Default Accelerate

範例Examples

XAML controls gallery

如果您已安裝 XAML 控制項資源庫 應用程式,請按一下這裡 開啟應用程式,並查看隱含轉換的實際運作情形。If you have the XAML Controls Gallery app installed, click here to open the app and see Implicit Transitions in action.

隱含動畫Implicit Animations

隱含動畫需要 Windows 10 版本 1809 (SDK 17763) 或更新版本。Implicit animations require Windows 10, version 1809 (SDK 17763) or later.

隱含動畫是一種簡單的方式,可在參數變更期間自動插插新的值與新值,以達成流暢的移動。Implicit animations are a simple way to achieve Fluent motion by automatically interpolating between the old and new values during a parameter change.

您可以隱含地以動畫顯示下列屬性的變更:You can implicitly animate changes to the following properties:

每個可以有隱含動畫變更的屬性都有對應的 轉換 屬性。Each property that can have changes implicitly animated has a corresponding transition property. 若要以動畫顯示內容,請將轉換類型指派給對應的 轉換 屬性。To animate the property, you assign a transition type to the corresponding transition property. 下表顯示 轉換 屬性和要用於每一個的轉換類型。This table shows the transition properties and the transition type to use for each one.

動畫屬性Animated property 轉換屬性Transition property 隱含轉換類型Implicit transition type
UIElement。不透明度UIElement.Opacity OpacityTransitionOpacityTransition ScalarTransitionScalarTransition
UIElement.RotationUIElement.Rotation RotationTransitionRotationTransition ScalarTransitionScalarTransition
UIElement.ScaleUIElement.Scale ScaleTransitionScaleTransition Vector3TransitionVector3Transition
UIElement.TranslationUIElement.Translation TranslationTransitionTranslationTransition Vector3TransitionVector3Transition
框線. 背景Border.Background BackgroundTransitionBackgroundTransition BrushTransitionBrushTransition
ContentPresenter 背景ContentPresenter.Background BackgroundTransitionBackgroundTransition BrushTransitionBrushTransition
Panel。背景Panel.Background BackgroundTransitionBackgroundTransition BrushTransitionBrushTransition

這個範例示範如何使用不透明度屬性和轉換,讓按鈕在控制項啟用時淡入,並在停用時淡出。This example shows how to use the Opacity property and transition to make a button fade in when the control is enabled and fade out when it's disabled.

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