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

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

Windows でのモーション

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

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

モーションの例

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

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

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

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

UI でモーションを生成するために、開発者は XAML またはビジュアル レイヤーのアニメーションにアクセスできます。 Visual Layer のアニメーションは、開発者に一連の利点を提供します。

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

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

注

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

注

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

アニメーションの概念	説明
KeyFrameAnimations を使用した時間ベースのモーション	KeyFrameAnimations は、一定期間のモーション エクスペリエンス全体を直接制御するために使用されます。 従来のキーフレーム化された方法で、モーションの開始、終了、間の補間、および継続時間を記述する開発者。
ExpressionAnimation を使用した相対モーション	ExpressionAnimation は、あるオブジェクトのプロパティのモーションを別のオブジェクトのプロパティに対して相対的に駆動する方法を記述するために使用されます。 開発者は、参照ベースのリレーションシップを定義する数式を定義します。
暗黙的アニメーション	これらのアニメーションはトリガー ベースであり、コア アプリ ロジックとは別に定義されます。 ImplicitAnimations は、プロパティの直接変更に対する応答としてアニメーションが発生する方法とタイミングを記述するために使用されます。
入力アニメーションを使用した入力駆動モーション	入力アニメーションでは、開発者がタッチやその他の入力モダリティを使用して操作ベースのモーションを記述できるようにする一連のシナリオについて説明します。 これらのアニメーションは、アクティブなユーザー入力またはジェスチャに基づいて駆動されます。
NaturalMotionAnimations を使用した物理ベースのモーション	NaturalMotionAnimations は、実際のフォース 駆動モーションに基づいて自然で使い慣れたモーション エクスペリエンスを記述するために使用されます。 開発者は、時間を定義するのではなく、モーションの特性を定義します (たとえば、スプリングの減衰率)。