春天動畫

本文說明如何使用 Spring NaturalMotionAnimations。

先決條件

在這裡，我們假設您已熟悉下列文章中討論的概念：

• 自然動作動畫

為什麼泉水？

彈簧是我們生活中某個時候都經歷過的常見運動經驗：從彈簧玩具到物理教室使用彈簧連接方塊的經驗。 彈簧的擺動經常引發觀察者的俏皮和輕鬆的情感反應。 因此，彈簧的運動可以有效地轉化為應用程式UI，適合那些希望創造出比傳統立方貝塞爾曲線更生動、更引人注目的運動體驗的開發者。 在這些情況下，春季動作不僅會建立更活潑的動作體驗，還能協助吸引人們對新內容或目前動畫內容的注意。 視應用程式商標或動作語言而定，振蕩會更明顯且可見，但在其他情況下則比較微妙。

使用彈簧動畫的動作

在 UI 中使用彈簧

如先前所述，彈簧動畫可以作為一種實用的設計整合到您的應用程式中，以帶來一種非常熟悉且充滿趣味性的UI體驗。 UI 中彈簧的常見用法如下：

Spring 使用量描述	視覺範例
讓動作體驗更加引人注目，看起來更生動活潑。 （動畫縮放比例）	使用彈簧動畫縮放運動
讓動作體驗巧妙地感覺更精力充沛（動畫位移）

在這些案例中，可以藉由「跳至」新的值並在其周圍振蕩，或以一些初始速度在當前值周圍振蕩，來觸發彈簧的運動。

定義您的彈簧運動

您可以使用 NaturalMotionAnimation API 來建立 Spring 體驗。 具體而言，您會使用 Compositor 的 Create* 方法來建立 SpringNaturalMotionAnimation。 然後您就可以定義動作的下列屬性：

• DampingRatio – 表示動畫中使用的彈簧動作抑制程度。

• 週期 – 彈簧完成一次振盪所需的時間。
• 最終值/起始值 – 定義彈簧運動的起始和結束位置（如果未定義，起始值和/或最終值將是目前的值）。
• 初始速度 – 以程式設計方式設定動作的初始速度。

您也可以定義一組與 KeyFrameAnimations 相同的動作屬性：

• 延遲時間 / 延遲行為
• StopBehavior

在以動畫處理 Offset 和 Scale/Size 的常見案例中，Windows 設計小組建議對不同類型的彈簧使用以下 DampingRatio（阻尼比）和 Period（周期）值：

定義屬性之後，您就可以將 spring 自然運動動畫傳入 CompositionObject 的 StartAnimation 方法或 InteractionTracker InertiaModifier 的 Motion 屬性中。

範例

在此範例中，您會建立導覽和畫布 UI 體驗，當使用者點擊展開按鈕時，導覽窗格會以彈力和振盪動作動畫展開。

當 時，Spring 動畫在點擊時啟動

首先，在點擊事件中定義 spring 動畫，以便瀏覽窗格出現。 接著，您可以使用 InitialValueExpression 功能來定義動畫的屬性，並使用 Expression 來確定 FinalValue。 您也會追蹤窗格是否已開啟狀態，然後在就緒時啟動動畫。

private void Button_Clicked(object sender, RoutedEventArgs e)
{
 _springAnimation = _compositor.CreateSpringScalarAnimation();
 _springAnimation.DampingRatio = 0.75f;
 _springAnimation.Period = TimeSpan.FromSeconds(0.5);

 if (!_expanded)
 {
 _expanded = true;
 _propSet.InsertBoolean("expanded", true);
 _springAnimation.InitialValueExpression["FinalValue"] = "this.StartingValue + 250";
 } else
 {
 _expanded = false;
 _propSet.InsertBoolean("expanded", false);
_springAnimation.InitialValueExpression["FinalValue"] = "this.StartingValue - 250";
 }
 _naviPane.StartAnimation("Offset.X", _springAnimation);
}

現在，如果您想要將此動作系結至輸入，該怎麼辦？ 如果使用者滑出去，窗格會有彈簧效果地彈出來嗎？ 如果使用者用力或快速地撥動，動作會根據來自使用者的速度進行調整。

在滑動 時 Spring 動畫

若要這樣做，您可以採用我們相同的 Spring Animation，並使用 InteractionTracker 將其傳遞至 InertiaModifier。 如需 InputAnimations 和 InteractionTracker 的詳細資訊，請參閱 與 InteractionTracker自定義操作體驗。 我們將假設此程式碼範例您已設定 InteractionTracker 和 VisualInteractionSource。 我們將專注於創建使用自然運動動畫(NaturalMotionAnimation)的慣性修飾物，在這個例子中是彈簧效果。

// InteractionTracker and the VisualInteractionSource previously setup
// The open and close ScalarSpringAnimations defined earlier
private void SetupInput()
{
 // Define the InertiaModifier to manage the open motion
 var openMotionModifer = InteractionTrackerInertiaNaturalMotion.Create(compositor);

 // Condition defines to use open animation if panes in non-expanded view
 // Property set value to track if open or closed is managed in other part of code
 openMotionModifer.Condition = _compositor.CreateExpressionAnimation(
"propset.expanded == false");
 openMotionModifer.Condition.SetReferenceParameter("propSet", _propSet);
 openMotionModifer.NaturalMotion = _openSpringAnimation;

 // Define the InertiaModifer to manage the close motion
 var closeMotionModifier = InteractionTrackerInertiaNaturalMotion.Create(_compositor);

 // Condition defines to use close animation if panes in expanded view
 // Property set value to track if open or closed is managed in other part of code
 closeMotionModifier.Condition = 
_compositor.CreateExpressionAnimation("propSet.expanded == true");
 closeMotionModifier.Condition.SetReferenceParameter("propSet", _propSet);
 closeMotionModifier.NaturalMotion = _closeSpringAnimation;

 _tracker.ConfigurePositionXInertiaModifiers(new 
InteractionTrackerInertiaNaturalMotion[] { openMotionModifer, closeMotionModifier});

 // Take output of InteractionTracker and assign to the pane
 var exp = _compositor.CreateExpressionAnimation("-tracker.Position.X");
 exp.SetReferenceParameter("tracker", _tracker);
 ElementCompositionPreview.GetElementVisual(pageNavigation).
StartAnimation("Translation.X", exp);
}

現在，您的UI中同時有一個程式控制的和輸入驅動的彈簧動畫！

總而言之，在應用程式中使用 Spring 動畫的步驟：

1. 從 Compositor 上創建 SpringAnimation。
2. 如果您想要非預設值，請定義 SpringAnimation 的屬性：
   • 阻尼比
   • 期間
   • 最終值
   • 初始值
   • 初速度
3. 指派給目標。
   • 如果您要建立 CompositionObject 屬性的動畫效果，請將 SpringAnimation 當做參數傳遞至 StartAnimation。
   • 如果您想要搭配輸入使用，請將 InertiaModifier 的 NaturalMotion 屬性設定為 SpringAnimation。