共用方式為


自然動態動畫

本文簡要介紹 NaturalMotionAnimation 空間,以及如何在你的使用者介面中運用這類動畫的概念性思考方法。

讓動作感覺熟悉且自然

優秀的應用程式是能創造出能吸引並留住使用者注意力,並幫助引導使用者完成任務的應用程式。 動態是區分使用者介面與使用者體驗的關鍵因素——促進使用者與其互動應用之間的連結。 連結越好,最終用戶的互動與滿意度就越高。

動態運動有助於建立這種連結的一種方式,是創造使用者熟悉且熟悉的體驗。 使用者對自己感知運動有一種基於真實經驗的無意識期待。 我們看到物品如何在地板上滑動、從桌上掉落、互相撞擊並彈開,並受彈簧影響而擺動。 利用這種預期的基於真實世界物理的動作,在我們眼中看起來和感覺都更自然。 動作變得更自然且互動,但更重要的是,整個體驗變得更加令人難忘且愉悅。

無動畫的縮放運動 使用立方貝茲曲線的縮放運動 使用彈簧動畫的縮放運動

最終結果是提升用戶參與度與用戶留存率。

控制與動態的平衡

在傳統使用者介面中, KeyFrameAnimations是描述動作的主要方式。 關鍵影格為設計師和開發者提供了最大化的控制權,讓他們能定義開始點、結束點以及插值過程。 雖然這在許多情況下非常有用,但關鍵影格動畫並不具動態性;這種運動不是自適應的,在任何條件下看起來都一樣。

在光譜的另一端,則是常見於遊戲和物理引擎中的模擬。 這些體驗往往是用戶互動中最真實且動態的,營造出每天所見的氛圍與隨機感。 雖然這讓動態感更生動且動態,但設計師與開發者的控制權較少,因此更難整合進傳統使用者介面。

控制頻譜圖

NaturalMotionAnimation的存在是為了彌合這種鴻溝——讓動畫中重要的元素如開始/結束時能取得平衡,同時保持動作看起來自然且動態。

備註

NaturalMotionAnimations 並非用來取代關鍵影格動畫——在 Fluent 設計語言中仍有推薦使用關鍵影格的地方。 NaturalMotionAnimations 是設計用在需要動態但關鍵影格動畫不夠動態的地方。

使用 NaturalMotionAnimations

在 WinUI 和 Windows 應用程式 SDK 中,你可以使用自然的動態體驗: 彈簧動畫。 想了解彈簧的更深入攻略,請參考 彈簧動畫

這種動作類型是透過全新的 NaturalMotionAnimation 實現的——這是一種專注於讓開發者能在介面中加入更熟悉且自然的動作,並兼顧控制與動態性的全新動畫類型。 它們揭示了以下能力:

  • 定義起始與結束值。
  • 將 InitialVelocity 定義並設置於 InteractionTracker 以與輸入關聯。
  • 定義運動特有的特性(例如彈簧的阻尼比)。

入門的一般公式:

  1. 使用其中一個 Create 方法,從合成器建立 NaturalMotionAnimation。
  2. 定義動畫的屬性。
  3. 將 NaturalMotionAnimation 作為參數傳給 CompositionObject 的 StartAnimation 呼叫。
    • 或者將其設定為 InteractionTracker InertiaModifier 的 Motion 屬性。

一個基本範例,使用 Spring NaturalMotionAnimation 讓視覺效果「彈跳」到一個新的 X 偏移量位置:

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