次の方法で共有

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

コンポーネントまたはユーザー エクスペリエンス全体が変わると、エンド ユーザーは時間の経過と瞬時の 2 つの方法で観察することがよくあります。 Windows プラットフォームでは、後者よりも前者が優先されます。ユーザー エクスペリエンスは、エンド ユーザーが何が起こったかに従うことができないため、しばしば混乱し、驚かされます。 その結果、エンドユーザーは体験を不自然でぎこちないと認識します。

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

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

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

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

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

明示的なアニメーションと暗黙的な時間ベースのアニメーションの両方で、アニメーション化できる CompositionObjects のプロパティの種類に対応するさまざまな種類があります。

  • カラーキーフレームアニメーション
  • クォータニオンキーフレームアニメーション
  • スカラーキー フレームアニメーション (ScalarKeyFrameAnimation)
  • ベクトル2キーフレームアニメーション
  • ベクトル3キー フレームアニメーション
  • Vector4キーフレームアニメーション

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

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

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

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

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

  1. アニメーション化する必要がある CompositionObject とそのそれぞれのプロパティを特定します。
  2. アニメーション化するプロパティの型と一致するコンポジターの KeyFrameAnimation 型テンプレートを作成します。
  3. アニメーション テンプレートを使用して、KeyFrame の追加とアニメーションのプロパティの定義を開始します。
    • 少なくとも 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);
} 
  • Last updated on