次の方法で共有

コンポジションのアニメーション

  • [アーティクル]

Windows.UI.Composition API を使用すると、統合 API レイヤー内のコンポジター オブジェクトを作成、アニメーション化、変換、および操作できます。 コンポジション アニメーションは、アプリケーション UI でアニメーションを実行するための強力で効率的な方法を提供します。 これらは、UI スレッドから独立して 60 FPS でアニメーションを実行し、アニメーションを駆動するために時間だけでなく入力やその他のプロパティを使用して優れたエクスペリエンスを構築する柔軟性を提供するために、ゼロから設計されています。

Windows でのモーション

映画のようなモーション デザインを考えてみましょう。 シームレスな移行により、ストーリーに集中し、エクスペリエンスを生き生きとさせることができます。 その気持ちをデザインに取り入れるので、映画的な楽さで、あるタスクから次のタスクに人々を導くことができます。 モーションは、多くの場合、ユーザー エクスペリエンスとユーザー インターフェイスを区別する要因です。

Windows UI プラットフォームの基本的な構成ブロックとしての CompositionAnimation では、アプリケーションの UI でモーション エクスペリエンスを作成するための強力で効率的な方法が提供されます。 アニメーション エンジンは、モーションが、UI スレッドから独立して、60 FPS で動作するように一から設計されています。 これらのアニメーションは、時間、入力、その他のプロパティに基づいて革新的なモーション エクスペリエンスを柔軟に構築するように設計されています。

モーションの例

アプリ内のモーションの例をいくつか次に示します。

ここでは、アプリは接続されたアニメーションを使用して、次のページのヘッダーの一部になるように "続行" する項目イメージをアニメーション化します。 この効果は、移行全体でユーザー コンテキストを維持するのに役立ちます。

接続アニメーションの例

ここでは、視覚的な視差効果は、UI がスクロールまたはパンしたときに異なる速度で異なるオブジェクトを移動し、奥行き、遠近感、動きを作成します。

リストと背景画像を使用した視差の例

CompositionAnimation を使用してモーションを作成する

UI でモーションを生成するため、開発者は XAML またはビジュアル レイヤーのいずれかでアニメーションにアクセスできます。 ビジュアル レイヤーのアニメーションは、開発者にとっていくつかの利点があります。

  • パフォーマンス – 従来の UI スレッドにバインドされたアニメーションとは異なり、Windows UI プラットフォーム上のアニメーションは 60 FPS の独立したスレッドで動作し、スムーズなモーション エクスペリエンスを実現します。
  • テンプレート モデル – Windows UI レイヤーのアニメーションはテンプレートです。つまり、複数のオブジェクトに対して 1 つのアニメーションを使用し、それ以前の使用を妨げることなくプロパティまたはパラメーターを調整できます。
  • カスタマイズ – Windows UI レイヤーを使用すると、美しい UI を簡単に作成できるだけでなく、あらゆる種類のアニメーションを使用して、さまざまなカスタマイズで新しいすばらしいエクスペリエンスを作成できます

Windows UI レイヤーでエクスペリエンスを作成する開発者は、さまざまなアニメーションの概念にアクセスして、設計を実現できます。 これらの概念を使用して、任意の CompositionObject のプロパティまたはサブチャネル コンポーネント (該当する場合) をアニメーション化できます。

Note

CompositionObject のすべてのプロパティをアニメーション化できるわけではありません。 プロパティをアニメーション化できるかについては、個々の CompositionObject のドキュメントを参照してください。

Note

"サブチャネル" という用語は、プロパティのコンポーネント形式を指します。 たとえば、Vector3 Offset プロパティの X サブチャネルや XY サブチャネルなどです。

アニメーションの概念 説明
KeyFrameAnimation を使用した時間ベースのモーション KeyFrameAnimation は、時間の経過に合わせてモーション エクスペリエンス全体を直接制御するために使用されます。 開発者は、従来のキーフレームによる形式で、モーションの開始、終了、途中の補間、および継続時間を記述します。
ExpressionAnimation を使用した相対モーション ExpressionAnimation は、あるオブジェクトのプロパティのモーションを、別のオブジェクトのプロパティを基準にして駆動する方法を記述するために使用されます。 開発者は、参照ベースのリレーションシップを定義する数式を定義します。
ImplicitAnimation これらのアニメーションはトリガー ベースであり、アプリのコア ロジックとは別に定義されます。 ImplicitAnimation は、直接プロパティの変更への応答として、アニメーションがいつ、どのように行われるかを記述するために使用されます。
入力アニメーションでの入力駆動のモーション 入力アニメーションでカバーされる一連のシナリオでは、開発者はタッチや他の入力モダリティによる操作ベースのモーションを記述できます。 これらのアニメーションは、アクティブなユーザー入力またはジェスチャに基づいて駆動されます。
NaturalMotionAnimation を使用した物理ベースのモーション NaturalMotionAnimation は、現実の力による動きに基づく、自然で親しみやすいモーション エクスペリエンスを記述するために使用されます。 開発者は、時間を定義するのではなく、モーションの特性を定義します (たとえば、バネの減衰比)