計時和加/減速Timing and easing

動作是根據現實世界,而我們也有數位媒體,伴隨對速度和效能的期望。While motion is based in the real world, we are also a digital medium, which comes with an expectation of speed and performance.

範例Examples

XAML controls gallery

如果您已安裝 XAML 控制項資源庫 應用程式,請按一下這裡 開啟應用程式,並查看緩和功能的作用。If you have the XAML Controls Gallery app installed, click here to open the app and see Easing Functions in action.

Fluent 動作如何使用時間How Fluent motion uses time

計時是在 UI 內當物件進入、離開或移動時使動態感覺自然的一項重要元素。Timing is an important element to making motion feel natural for objects entering, exiting, or moving within the UI.

  1. 物件或場景輸入檢視快速但著名。Objects or scenes entering the view are quick, but celebrated. 這些動畫通常持續時間比離開較長以階層式建構場景。These animations are typically longer in duration than exits to allow for hierarchical build-up of a scene.
  2. 物件或場景進入檢視非常快速。Objects or scenes exiting the view are very quick. 使用者應該能夠了解 UI 發生的位置。The user should be able to understand where the UI went. 不過,一旦 UI 關閉,它應該會讓開。However, once the UI is dismissed, it should get out of the way.
  3. 物件跨場景轉譯應該有適合其所移動距離的持續時間量。Objects translating across a scene should have a duration appropriate to the amount of distance they travel.

Fluent 動作中的計時Timing in Fluent motion

在 Fluent 中動作的計時使用 500ms (或二分之一秒) 做為基準,因為這是使用者感知為瞬間的最長時間量。The timing of motion in Fluent uses 500ms (or one-half second) as a baseline because this is the maximum amount of time that a user perceives as instant.

顯示三個圓形的短片,以垂直方式堆疊,以不同的速度向左和向右移動:150毫秒、300毫秒和500毫秒。

150ms (離開)150ms (Exit)

用於離開場景或關閉的物件或頁面。Use for objects or pages that are exiting the scene or closing. 可讓非常快速的方向回饋離開 UI,而計時不會阻礙畫面播放速率以達到流暢的動畫。Allows for very quick directional feedback of exiting UI where timing does not impede upon framerate to achieve a smooth animation.

150ms 動作

300ms (進入)300ms (Enter)

用於進入場景或開啟的物件或頁面。Use for objects or pages that are entering the scene or opening. 可在其進入場景時擁有合理的量的時間展示內容。Allows a reasonable amount of time to celebrate content as it enters the scene.

300ms 動作

≤500ms (移動)≤500ms (Move)

針對在單一場景或多個場景之間轉譯的物件使用。Use for objects which are translating across a single scene or multiple scenes.

500毫秒動作

Fluent 動畫中的加/減速Easing in Fluent motion

加/減速是操作物件移動時的速度的一種方式。Easing is a way to manipulate the velocity of an object as it travels. 它可緊密結合所有的 Fluent 動畫體驗。It's the glue that ties together all the Fluent motion experiences. 雖然極端,系統中所使用的加/減速可協助統一物件在整個系統移動的實際感覺。While extreme, the easing used in the system helps unify the physical feel of objects moving throughout the system. 這是唯一模擬真實世界的途徑,並可讓動作中的物件感覺它們屬於其環境。This is one way to mimic the real world, and make objects in motion feel like they belong in their environment.

顯示圓形的短片會顯示在畫面右下角,並停止框架左上角附近的圓形。

將加/減速套用到動作Apply easing to motion

這些加/減速有助於您達到更自然的操作,並且也是我們用於 Fluent 動作的基準。These easings will help you achieve a more natural feel, and are the baseline we use for Fluent motion.

程式碼範例顯示如何套用建議的加/減速值到 Storyboard 動畫 (XAML) 或 Composition 動畫 (C#)。The code examples show how to apply recommended easing values to Storyboard animations (XAML) or Composition animations (C#).

加速 (離開)Accelerate (Exit)

用於即將結束場景的 UI 或物件。Use for UI or objects that are exiting the scene.

物件會變成有動力並獲得動力,直到達到 escape 速度為止。Objects become powered and gain momentum until they reach escape velocity. 產生的結果是,物件正在嘗試使其無法使用使用者的方式,並騰出空間給新的內容。The resulting feel is that the object is trying its hardest to get out of the user's way and make room for new content to come in.

加速簡化

cubic-bezier(0.7 , 0 , 1 , 0.5)
<!-- Use for XAML Storyboard animations. -->
<Storyboard x:Name="Storyboard">
    <DoubleAnimation Storyboard.TargetName="Translation" Storyboard.TargetProperty="X" From="0" To="200" Duration="0:0:0.15">
        <DoubleAnimation.EasingFunction>
            <ExponentialEase Exponent="4.5" EasingMode="EaseIn" />
        </DoubleAnimation.EasingFunction>
    </DoubleAnimation>
</Storyboard>
// Use for Composition animations.
CubicBezierEasingFunction accelerate =
    _compositor.CreateCubicBezierEasingFunction(new Vector2(0.7f, 0.0f), new Vector2(1.0f, 0.5f));
_exitAnimation = _compositor.CreateScalarKeyFrameAnimation();
_exitAnimation.InsertKeyFrame(0.0f, _startValue);
_exitAnimation.InsertKeyFrame(1.0f, _endValue, accelerate);
_exitAnimation.Duration = TimeSpan.FromMilliseconds(150);

減速 (進入)Decelerate (Enter)

針對輸入場景的物件或 UI 使用,不論是流覽或產生。Use for objects or UI entering the scene, either navigating or spawning.

一旦進入場景之後,就會達到物件的極端干擾,使物件變慢。Once on-scene, the object is met with extreme friction, which slows the object to rest. 產生的結果是,物件從較遠的距離移離並進入極遠的速度,或是很快地回到 rest 狀態。The resulting feel is that the object traveled from a long distance away and entered at an extreme velocity, or is quickly returning to a rest state.

即使它之前有點無回應,連入物件的速度也具有感覺迅速和回應的效果。Even if it's preceded by a moment of unresponsiveness, the velocity of the incoming object has the effect of feeling fast and responsive.

減速的簡化

cubic-bezier(0.1 , 0.9 , 0.2 , 1)
<!-- Use for XAML Storyboard animations. -->
<Storyboard x:Name="Storyboard">
    <DoubleAnimation Storyboard.TargetName="Translation" Storyboard.TargetProperty="X" From="0" To="200" Duration="0:0:0.3">
        <DoubleAnimation.EasingFunction>
            <ExponentialEase Exponent="7" EasingMode="EaseOut" />
        </DoubleAnimation.EasingFunction>
    </DoubleAnimation>
</Storyboard>
// Use for Composition animations.
CubicBezierEasingFunction decelerate =
    _compositor.CreateCubicBezierEasingFunction(new Vector2(0.1f, 0.9f), new Vector2(0.2f, 1.0f));
_enterAnimation = _compositor.CreateScalarKeyFrameAnimation();
_enterAnimation.InsertKeyFrame(0.0f, _startValue);
_enterAnimation.InsertKeyFrame(1.0f, _endValue, decelerate);
_enterAnimation.Duration = TimeSpan.FromMilliseconds(300);

標準加/減速 (移動)Standard Easing (Move)

這是系統內任何動畫參數變更的基準簡化。This is the baseline easing for any animated parameter change inside of the system. 請對使用畫面上狀態會改變的物件使用標準加/減速,例如簡單的位置變更。Use standard easing for objects that change from state to state on-screen, such as a simple position change. 此外,對場景中的物件變形使用,像是會長大的物件。Also, use it for objects morphing in-scene, like an object that grows.

產生的結果是,將狀態從 A 變更為 B 的物件會克服,並透過自然的強制執行。The resulting feel is that objects changing state from A to B are overcoming, and taken over by, natural forces.

標準簡化

cubic-bezier(0.8 , 0 , 0.2 , 1)
<!-- Use for XAML Storyboard animations. -->
<Storyboard x:Name="Storyboard">
    <DoubleAnimation Storyboard.TargetName="Translation" Storyboard.TargetProperty="X" From="0" To="200" Duration="0:0:0.5">
        <DoubleAnimation.EasingFunction>
            <CircleEase EasingMode="EaseInOut" />
        </DoubleAnimation.EasingFunction>
    </DoubleAnimation>
</Storyboard>
// Use for Composition animations.
CubicBezierEasingFunction standard =
    _compositor.CreateCubicBezierEasingFunction(new Vector2(0.8f, 0.0f), new Vector2(0.2f, 1.0f));
 _moveAnimation = _compositor.CreateScalarKeyFrameAnimation();
 _moveAnimation.InsertKeyFrame(0.0f, _startValue);
 _moveAnimation.InsertKeyFrame(1.0f, _endValue, standard);
 _moveAnimation.Duration = TimeSpan.FromMilliseconds(500);