共用方式為


自然動作動畫

本文提供 NaturalMotionAnimation 空間的簡短概觀,並介紹如何從概念性的角度來思考在您的 UI 中使用這些動畫類型的方式。

讓動作感覺熟悉且自然

絕佳的應用程式可以創造體驗來吸引並保持使用者的注意力,同時協助引導使用者完成工作。 動作是區隔使用者介面與使用者體驗的關鍵區別因素,可在使用者與其正在互動的應用程式之間激起連結。 連結越良好,終端使用者的參與度跟滿意度也就越高。

動作可協助建立此連結的其中一種方式,就是建立使用者熟悉的體驗。 使用者對於他們如何感知以真實生活體驗為基礎的動作,會有無意識的預期。 我們看到物體如何滑過地板、從桌子上掉下來、彼此碰撞彈跳,以及連接彈簧振蕩。 透過以真實世界物理的外觀和感覺為基礎來運用這種期望的運動,在我們的眼裡會更加自然。 動作變得更加自然也更有互動,但更重要的是,整個體驗變得更加令人難忘又愉快。

調整沒有動畫的動作使用立方貝塞爾的縮放動作使用春季動畫調整動作

最終結果就是,使用者提高對應用程式的參與度和保留率。

平衡控制項和動態

在傳統 UI 中,KeyFrameAnimation是描述動作的主要方式。 KeyFrame 為設計人員和開發人員提供了最大的控制權,可定義動畫的開始、結束和插值。 雖然在許多情況下,這個方式非常有用,但 KeyFrame 動畫的動態性不足;動作無法根據條件調適,而且在任何情況下看起來都一樣。

而在光譜另一端的遊戲和物理引擎中,則經常可以看到模擬。 這些通常是使用者互動中最近似實際生活且最有動態的體驗,創造出使用者每日所見的環境感和隨機感。 雖然這讓動作感覺更活潑也更動態,但設計人員與開發人員的控制權較少,因此更難整合到傳統 UI 中。

控制頻譜圖

NaturalMotionAnimation的存在有助於彌合這種差距 – 為動畫的重要元素提供控制權的平衡,例如開始/完成,同時讓動作的外觀和感覺維持自然與動態。

注意

NaturalMotionAnimations 並非用來取代 KeyFrame 動畫 – 在 Fluent 設計語言中,仍有一些地方建議使用 KeyFrames。 NaturalMotionAnimations 是要用在那些需要使用動作,但 KeyFrame 動畫無法滿足其動態要求的地方。

使用 NaturalMotionAnimations

從 Fall Creators Update 開始,您可以存取新的動作體驗:彈簧動畫。 如需更深入逐步介紹彈簧的相關內容,請參閱彈簧動畫

這個動作類型是使用新的 NaturalMotionAnimation 來達成 – 這個新動畫類型的中心,在於讓開發人員能夠在其 UI 中建立感覺更熟悉且自然的動作,並在控制權和動態之間取得平衡。 它們會公開下列功能:

  • 定義開始和結束值。
  • 定義 InitialVelocity,並使用 InteractionTracker 繫結至輸入。
  • 定義動作特定屬性 (例如彈簧的 DampingRatio)。

開始使用的通用公式:

  1. 使用其中一個 Create 方法,從 Compositor 建立 NaturalMotionAnimation。
  2. 定義動畫的屬性。
  3. 將 NaturalMotionAnimation 當做參數傳遞至 CompositionObject 的 StartAnimation 呼叫。
    • 或是設定為 InteractionTracker InertiaModifier 的 Motion 屬性。

使用彈簧 NaturalMotionAnimation 將視覺效果「彈簧」設為 X Offset 新位置的基本範例:

_springAnimation = _compositor.CreateSpringScalarAnimation();
_springAnimation.Period = TimeSpan.FromSeconds(0.07);
_springAnimation.DelayTime = TimeSpan.FromSeconds(1);
_springAnimation.EndPoint = 500f;
sectionNav.StartAnimation("Offset.X", _springAnimation);