Spring アニメーション

この記事では、Spring NaturalMotionAnimations の使用方法について説明します。

[前提条件]

ここでは、これらの記事で説明されている概念を理解していることを前提としています。

• 自然な動きのアニメーション

なぜバネ?

スプリングは、私たちが人生のどこかで経験してきた一般的な動きの一種です。スリンキーから、ばねを使ったブロックでの物理の授業の体験までさまざまです。 春の振動運動は、しばしばそれを観察する人々からの遊び心と軽快な感情的反応を生み出します。 その結果、スプリングのモーションは、従来の立方ベジエよりもエンドユーザーに対してより鮮やかで“ポップ”な動きの体験を創出したいと考える人々に、アプリケーションUIにおいてうまく適用されます。 このような場合、スプリング モーションは、動きのあるモーション エクスペリエンスを作成するだけでなく、新しいコンテンツや現在アニメーション化されているコンテンツに注目を集めるのに役立ちます。 アプリケーションのブランド化やモーション言語に応じて、振動はより顕著で目に見えますが、それ以外の場合はより微妙です。

UI でのスプリングの使用

前述のように、スプリングは、アプリに統合して、非常に使い慣れた遊び心のある UI エクスペリエンスを導入するのに役立つモーションです。 UI でのスプリングの一般的な使用方法は次のとおりです。

スプリングの使用説明	ビジュアルの例
モーションエクスペリエンスを「ポップ」にして、より活気に見える。 (スケールのアニメーション化)
モーションエクスペリエンスをよりダイナミックに感じさせる (オフセットをアニメーション化すること)

これらの各ケースでは、スプリングモーションは、新たな値に飛び移ってその周りを振動することや、ある初期速度を伴って現在の値の周りを振動することによってトリガーできます。

ばねの動きの定義

Spring エクスペリエンスは、NaturalMotionAnimation API を使用して作成します。 具体的には、Compositor から Create* メソッドを使用して SpringNaturalMotionAnimation を作成します。 その後、モーションの次のプロパティを定義できます。

• DampingRatio – アニメーションで使用されるスプリング モーションの減衰レベルを表します。

• 期間 – 単一の振動を実行するためにスプリングにかかる時間。
• 最終/開始値 – ばねモーションの開始位置と終了位置を定義します (定義されていない場合、開始値または最終値は現在の値になります)。
• 初期速度 – モーションのプログラムによる初期速度。

また、KeyFrameAnimations と同じモーションの一連のプロパティを定義することもできます。

• 遅延時間/遅延動作
• StopBehavior

オフセットとスケール/サイズをアニメーション化する一般的なケースでは、さまざまな種類のスプリングに対して、DampingRatio と Period の Windows デザイン チームが推奨する値を次に示します。

プロパティを定義したら、Spring NaturalMotionAnimation を CompositionObject の StartAnimation メソッドまたは InteractionTracker InertiaModifier の Motion プロパティに渡すことができます。

例

この例では、ナビゲーションとキャンバス UI エクスペリエンスを作成します。このエクスペリエンスでは、ユーザーが展開ボタンをクリックすると、ナビゲーション ペインがバネのような振動モーションでアニメーション化されます。

まず、ナビゲーション ウィンドウが表示されたときの、クリックしたイベント内でスプリング アニメーションを定義します。 次に、InitialValueExpression 機能を使用してアニメーションのプロパティを定義し、式を使用して 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 アニメーションを取得し、InteractionTracker を使用して InertiaModifier に渡すことができます。 InputAnimations と InteractionTracker の詳細については、「 InteractionTracker を使用したカスタム操作エクスペリエンス」を参照してください。 このコード例では、InteractionTracker と VisualInteractionSource が既にセットアップされていることを前提としています。 ここでは、NaturalMotionAnimation (この場合はスプリング) を使用する InertiaModifier を作成することに重点を置きます。

// 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);
}

これで、プログラムによる Spring アニメーションと入力駆動型の Spring アニメーションの両方が UI に追加されました。

要約すると、アプリで Spring アニメーションを使用する手順は次のとおりです。

1. コンポジターから SpringAnimation を作成します。
2. 既定値以外が必要な場合は、SpringAnimation のプロパティを定義します。
   • 減衰比
   • ピリオド
   • 最終的な値
   • 初期値
   • 初期速度
3. ターゲットに割り当てます。
   • CompositionObject プロパティをアニメーション化する場合は、パラメーターとして SpringAnimation を StartAnimation に渡します。
   • 入力で使用する場合は、InertiaModifier の NaturalMotion プロパティを SpringAnimation に設定します。