時間ベースのアニメーション

  • [アーティクル]

コンポーネントまたはユーザーエクスペリエンス全体が変化すると、エンドユーザーは多くの場合、時間の経過とともに変化するか、瞬間的に変化するかの2つの方法でそれを観察します。 Windows プラットフォームでは、前者の方法が後者の方法よりも優先されます。ユーザー エクスペリエンスが即座に変更された場合、エンド ユーザーは混乱し、予期しない動作であると感じてしまう可能性があります。これは、こうした変更にユーザーが対処できないためです。 エンドユーザーは、その体験を不快で不自然なものとして認識します。

代わりに、時間の経過とともに UI を変更して、エンド ユーザーをガイドしたり、エクスペリエンスの変更を通知したりできます。 Windows プラットフォームでは、これは時間ベースのアニメーション (KeyFrameAnimations とも呼ばれます) を使用して行われます。 KeyFrameAnimations を使用すると、時間の経過と共に UI を変更し、アニメーションの開始方法とタイミング、終了状態への到達方法など、アニメーションの各側面を制御できます。 たとえば、オブジェクトを 300 ミリ秒以上かけて新しい位置にアニメートする方が、即座にそこに「テレポート」するよりも快適です。 瞬間的な変更の代わりにアニメーションを使用すると、最終的な結果は、より快適で魅力的なエクスペリエンスになります。

時間ベースのアニメーションの種類

Windows で美しいユーザー エクスペリエンスを構築するために使用できる時間ベースのアニメーションには、次の 2 つのカテゴリがあります。

成人指定なアニメーション – 名前が示すように、アニメーションを明示的に開始して更新を行います。 暗黙的なアニメーション – これらのアニメーションは、条件が満たされると、ユーザーに代わってシステムによって開始されます。

この記事では、KeyFrameAnimations を使用して成人指定な時間ベースのアニメーションを作成および使用する方法について説明します。

成人指定および暗黙的な時間ベースのアニメーションには、アニメーション化できる CompositionObject のさまざまな種類のプロパティに対応するさまざまな種類があります。

  • ColorKeyFrameAnimation
  • QuaternionKeyFrameAnimation
  • ScalarKeyFrameAnimation
  • Vector2KeyFrameAnimation
  • Vector3KeyFrameAnimation
  • Vector4KeyFrameAnimation

KeyFrameAnimations を使用して時間ベースのアニメーションを作成する

KeyFrameAnimations を使用して成人指定な時間ベースのアニメーションを作成する方法を説明する前に、いくつかの概念を見てみましょう。

  • KeyFrames – アニメーションがアニメーション化される個々の "スナップショット" です。
    • キーと値のペアとして定義されます。 キーは 0 と 1 の間の進行状況、つまりアニメーションの有効期間のどこでこの「スナップショット」が行われるかを表します。 もう一方のパラメータは、このときのプロパティ値を表します。
  • KeyFrameAnimation プロパティ – UI のニーズを満たすために適用できるカスタマイズ オプション。
    • DelayTime – StartAnimation が呼び出された後、アニメーションが開始されるまでの時間。
    • DURATION – アニメーションの継続時間。
    • IterationBehavior – アニメーションのカウントまたは無限の繰り返し動作。
    • IterationCount – キーフレームアニメーションが繰り返される有限の回数。
    • KeyFrame Count – 特定のキーフレームアニメーションのキーフレーム数を読み取ります。
    • StopBehavior – StopAnimation が呼び出されたときのアニメーション化プロパティ値の動作を指定します。
    • 方向 – 再生するアニメーションの方向を指定します。
  • アニメーション グループ – 複数のアニメーションを同時に開始します。
    • 複数のプロパティを同時にアニメーション化する場合によく使用されます。

詳細については、「CompositionAnimationGroup」を参照してください。

これらの概念を念頭に置いて、KeyFrameAnimation を構築するための一般的な式について説明しましょう。

  1. アニメーション化する必要がある CompositionObject とそれぞれのプロパティを特定します。
  2. アニメーション化するプロパティのタイプに一致するコンポジターの KeyFrameAnimation Type テンプレートを作成します。
  3. アニメーション テンプレートを使用して、キーフレームの追加とアニメーションのプロパティの定義を開始します。
    • 少なくとも 1 つの KeyFrame が必要です (100% または 1f キーフレーム)。
    • 期間も定義することをお勧めします。
  4. このアニメーションを実行する準備ができたら、CompositionObject で StartAnimation(...) を呼び出し、アニメーション化するプロパティをターゲットにします。 具体的には:
    • visual.StartAnimation("targetProperty", CompositionAnimation animation);
    • visual.StartAnimationGroup(AnimationGroup animationGroup);
  5. 実行中のアニメーションがあり、アニメーションまたはアニメーション グループを停止する場合は、以下の API を使用できます。
    • visual.StopAnimation("targetProperty");
    • visual.StopAnimationGroup(AnimationGroup AnimationGroup);

このフォーミュラの動作を確認する例を見てみましょう。

例

この例では、<0,0,0> から <200,0,0> までのビジュアルのオフセットを 1 秒間アニメーション化します。 さらに、これらの位置の間でビジュアルがアニメーション化するのを 10 回確認する必要があります。

キー フレーム アニメーション

まず、アニメーション化する CompositionObject とプロパティを特定します。 この場合、赤い四角形は redVisual という名前のコンポジション ビジュアルで表されます。 このオブジェクトからアニメーションを開始します。

次に、Offset プロパティをアニメーション化するため、Vector3KeyFrameAnimation を作成する必要があります (Offset は Vector3 型です)。 また、KeyFrameAnimation の対応する KeyFrame も定義します。

    Vector3KeyFrameAnimation animation = compositor.CreateVector3KeyFrameAnimation();
    animation.InsertKeyFrame(1f, new Vector3(200f, 0f, 0f));

その後で、KeyFrameAnimation のプロパティを定義して、2 つの位置 (現在の位置と <200,0,0>) の間で 10 回アニメーション化される動作と共に継続時間を記述します。

    animation.Duration = TimeSpan.FromSeconds(2);
    animation.Direction = Windows.UI.Composition.AnimationDirection.Alternate;
    // Run animation for 10 times
    animation.IterationCount = 10;

最後に、アニメーションを実行するには、CompositionObject のプロパティでアニメーションを開始する必要があります。

redVisual.StartAnimation("Offset", animation);

完全なコードは次のようになります。

private void AnimateSquare(Compositor compositor, SpriteVisual redVisual)
{ 
    Vector3KeyFrameAnimation animation = compositor.CreateVector3KeyFrameAnimation();
    animation.InsertKeyFrame(1f, new Vector3(200f, 0f, 0f));
    animation.Duration = TimeSpan.FromSeconds(2);
    animation.Direction = Windows.UI.Composition.AnimationDirection.Alternate;
    // Run animation for 10 times
    animation.IterationCount = 10;
    redVisual.StartAnimation("Offset", animation);
}