次の方法で共有

ばねアニメーション

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

前提条件

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

なぜスプリング?

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

スプリング アニメーションを使用したモーション キュービックベジエ アニメーションを使用したモーション

UI でのスプリングの使用

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

スプリング使用説明書 ビジュアルの例
モーションエクスペリエンスを「ポップ」にして、より活気に見える。 (スケールアニメーション) スプリング アニメーションを使用してモーションをスケーリングする
モーション エクスペリエンスをさりげなく活気があると感じるようにする (オフセット アニメーション) スプリング アニメーションを使用したオフセット モーション

これらのケースでは、スプリングモーションは、新しい値に移行してその周りで振動したり、初期速度を持って現在の値の周りで振動したりすることで開始されます。

スプリングアニメーション振動

スプリング動作の定義

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

  • DampingRatio – アニメーションで使用されるスプリング モーションの減衰レベルを表します。
減衰比の値 説明
DampingRatio = 0 無減衰 - スプリングは長い間振動します
0 < 減衰比 < 1 アンダーダンピング - バネは振動が少しから大きくなります。
DampingRatio = 1 臨界減衰状態 - ばねは振動しません。
DampingRatio > 1 過減衰 - 急激な減速と振動せず、スプリングは迅速に目的地に到達します
  • 期間 – 単一の振動を実行するためにスプリングにかかる時間。
  • 最終/開始値 – ばねモーションの開始位置と終了位置を定義します (定義されていない場合、開始値または最終値は現在の値になります)。
  • 初期速度 – モーションのプログラムによる初期速度。

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

  • ディレイタイム / ディレイ動作
  • StopBehavior

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

財産 標準スプリング 減衰されたスプリング 低減衰スプリング
オフセット 減衰比 = 0.8
期間 = 50 ミリ秒		 減衰比 = 0.85
期間 = 50 ミリ秒		 減衰比 = 0.65
期間 = 60 ミリ秒
スケール/サイズ ダンピング比 = 0.7
期間 = 50 ミリ秒		 減衰比 = 0.8
期間 = 50 ミリ秒		 減衰比 = 0.6
期間 = 60 ミリ秒

プロパティを定義したら、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 アニメーション

これを行うには、同じ Spring アニメーションを取得し、InteractionTracker を使用して InertiaModifier に渡すことができます。 InputAnimations と InteractionTracker の詳細については、「 InteractionTracker を使用したカスタム操作エクスペリエンス」を参照してください。 このコード例では、InteractionTracker と VisualInteractionSource が既にセットアップされていることを前提としています。 ここでは、NaturalMotionAnimation (この場合はスプリング) を使用する InertiaModifier を作成することに重点を置きます。

// InteractionTracker and the VisualInteractionSource were previously set up.
// The open and close ScalarSpringAnimations were defined earlier.
private void SetupInput()
{
    // Define the InertiaModifier to manage the open motion.
    var openMotionModifier = InteractionTrackerInertiaNaturalMotion.Create(_compositor);

    // Use the open animation if the pane is not expanded.
    openMotionModifier.Condition = _compositor.CreateExpressionAnimation(
        "propSet.expanded == false");
    openMotionModifier.Condition.SetReferenceParameter("propSet", _propSet);
    openMotionModifier.NaturalMotion = _openSpringAnimation;

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

    // Use the close animation if the pane is expanded.
    closeMotionModifier.Condition = _compositor.CreateExpressionAnimation(
        "propSet.expanded == true");
    closeMotionModifier.Condition.SetReferenceParameter("propSet", _propSet);
    closeMotionModifier.NaturalMotion = _closeSpringAnimation;

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

    // Take the InteractionTracker output and assign it 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 に設定します。
  • Last updated on