計時和加/減速

  • 發行項

雖然動態是根據現實世界呈現，但我們也是一種數位媒體，人們會對速度和表現有所期望。

範例

WinUI Gallery

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

標準動畫持續時間值

WinUI 提供了一組在整個平台控制中使用的標準動畫持續時間。 您也可以在建立自訂分鏡動畫時使用這些命名資源。

ThemeResource 名稱 值
ControlNormalAnimationDuration 250 毫秒
ControlFastAnimationDuration 167ms
ControlFasterAnimationDuration 83ms

Fluent 動作中的緩動

緩動是一種在物件行進時操縱其速度的方法。 它是將所有 Fluent 動態體驗聯繫在一起的黏合劑。雖然系統中使用的緩動非常極端，但有助於統一整個系統中移動物件的實體感覺。 這是模仿現實世界的一種方式，讓運動中的物體感覺能融入其環境。

A short video showing a circle appear from the lower-right corner of the frame and stopping near the upper-left corner of the frame.

將緩動套用至動態

這些緩動將幫助您獲得更自然的感覺，並且是用於 Fluent 動態的基準。

快出，慢進

cubic-bezier(0, 0, 0, 1)

用於進入場景的物件或 UI，無論是瀏覽還是生成。

到達定點後，物體就會受到極大的摩擦力，這會減慢物體的靜止速度。由此產生的感覺是物體從很遠的距離移動並以極高的速度進入，或者正在快速返回到靜止狀態。

即使之前有一段時間沒有反應，傳入物體的速度也會讓人感覺快速且反應靈敏。

decelerate easing

慢出，快進

cubic-bezier(1 , 0 , 1 , 1)

用於結束場景的 UI 或物件。

物件獲得動力並取得動量，直到達到脫離速度。由此產生的感覺是，物體正在盡最大努力離開使用者，並騰出空間讓新內容進入。

accelerate easing