計時和加/減速
雖然動態是根據現實世界呈現,但我們也是一種數位媒體,人們會對速度和表現有所期望。
範例
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,無論是瀏覽還是生成。
到達定點後,物體就會受到極大的摩擦力,這會減慢物體的靜止速度。由此產生的感覺是物體從很遠的距離移動並以極高的速度進入,或者正在快速返回到靜止狀態。
即使之前有一段時間沒有反應,傳入物體的速度也會讓人感覺快速且反應靈敏。
慢出,快進
cubic-bezier(1 , 0 , 1 , 1)
用於結束場景的 UI 或物件。
物件獲得動力並取得動量,直到達到脫離速度。由此產生的感覺是,物體正在盡最大努力離開使用者,並騰出空間讓新內容進入。