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

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 のプロパティまたはサブチャネル コンポーネント (該当する場合) をアニメーション化できます。

注意

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

注意

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

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