共用方式為


計時和加/減速

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

範例

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

標準動畫持續時間值

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

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

Fluent 動作中的緩動

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

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

將緩動套用至動態

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

快出,慢進

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

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

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

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

減速 Easing

慢出,快進

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

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

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

加速 Easing