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

Windows.UI.Composition API によって、統合された API レイヤーでコンポジター オブジェクトを作成、アニメーション化、変換、操作することができます。The Windows.UI.Composition APIs allows you to create, animate, transform and manipulate compositor objects in a unified API layer. コンポジションのアニメーションは、アプリケーションの UI でアニメーションを実行するための強力で効率的な手段を提供します。Composition animations provide a powerful and efficient way to run animations in your application UI. コンポジション アニメーションは、アニメーションが UI スレッドから独立して 60 FPS で実行され、時間だけでなく、入力やその他のプロパティを使ってアニメーションを駆動する驚くようなエクスペリエンスを柔軟に構築できるように、一から設計されています。They have been designed from the ground up to ensure that your animations run at 60 FPS independent of the UI thread and to give you the flexibility to build amazing experiences using not only time, but input and other properties, to drive animations.

Windows での動作Motion in Windows

モーションのデザインは映画のようなものと考えてください。Think of motion design like a movie. シームレスな切り替えによって、ユーザーをストーリーに注目させておき、優れたエクスペリエンスを実現することができます。Seamless transitions keep you focused on the story, and bring experiences to life. モーションのデザインにそのような感覚を取り込むことで、あるタスクから別のタスクへ映画のようにスムーズにユーザーを移行させることができます。We can invite that feeling into our designs, leading people from one task to the next with cinematic ease. 多くの場合、モーションはユーザーインターフェイスとユーザーエクスペリエンスの区別要因です。Motion is often the differentiating factor between a User Interface and a User Experience.

CompositionAnimations は、Windows UI プラットフォームの基本的な構成要素として、アプリケーションの UI にモーションエクスペリエンスを作成するための強力かつ効率的な方法を提供します。As a fundamental building block of the Windows UI Platform, CompositionAnimations provide a powerful and efficient way to create motion experiences in your application’s UI. アニメーションエンジンは、UI スレッドとは関係なく、モーションが 60 FPS で実行されるように、最初から設計されています。The animation engine has been designed from the ground up to ensure that your motion runs at 60 FPS, independent of the UI thread. これらのアニメーションは、時間、入力、およびその他のプロパティに基づいて革新的なモーションエクスペリエンスを構築するための柔軟性を提供するように設計されています。These animations are designed to provide the flexibility to build innovative motion experiences based on time, input, and other properties.

モーションの例Examples of motion

アプリでのモーションの例をいくつか紹介します。Here are some examples of motion in an app.

次の例では、アプリは接続型アニメーションを使用して項目の画像をアニメーション化し、その画像が "途切れることなく" 切り替わり、次のページにあるヘッダーの一部となります。Here, an app uses a connected animation to animate an item image as it “continues” to become part of the header of the next page. この効果を利用すると、画面の切り替えでユーザー コンテキストを維持することができます。The effect helps maintain user context across the transition.

接続されたアニメーションの例

次の例では、視覚的な視差効果を利用し、UI のスクロールやパンを行うときに、さまざまなオブジェクトをさまざまな速度で動かします。これにより、奥行き、遠近感、および動きといった感覚が引き起こされます。Here, a visual parallax effect moves different objects at different rates when the UI scrolls or pans to create a feeling of depth, perspective, and movement.

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

CompositionAnimations を使用したモーションの作成Using CompositionAnimations to create Motion

UI でモーションを生成するために、開発者は XAML またはビジュアルレイヤーのいずれかでアニメーションにアクセスできます。To generate motion in UI, developers can access animations in either XAML or the Visual Layer. ビジュアル層のアニメーションでは、開発者は一連の利点を得ることができます。Animations at the Visual Layer provide developers with a series of benefits:

  • パフォーマンス–従来の UI スレッドにバインドされたアニメーションではなく、Windows UI プラットフォームのアニメーションは 60 FPS の独立したスレッドで動作し、スムーズなモーションエクスペリエンスを実現します。Performance – instead of the traditional UI Thread-bound animation, animations on the Windows UI platform operate on an independent thread at 60 FPS, enabling smooth motion experiences.
  • テンプレートモデル– Windows UI レイヤーのアニメーションはテンプレートです。つまり、複数のオブジェクトに対して1つのアニメーションを使用し、obstructing の前の使用を気にせずに、プロパティやパラメーターを調整できます。Templating Model – animations in the Windows UI layer are templates, meaning can use a single animation on multiple objects and tweak properties or parameters without worrying of obstructing previous uses.
  • カスタマイズ– Windows UI レイヤーを使用すると、美しい UI を簡単に作成できるだけでなく、さまざまな種類のアニメーションを使用して、カスタマイズのグラデーションで新しいすばらしいエクスペリエンスを作成することができます。Customization – the Windows UI layer not only makes it easy to make beautiful UI, but with a full range of animation types, possible to create new and amazing experiences with a gradient of customizations

Windows UI レイヤーでエクスペリエンスを作成する開発者は、さまざまなアニメーションの概念にアクセスして、デザインを有効にすることができます。As a developer creating experiences at the Windows UI layer, you have access to a variety of animation concepts to bring your designs to life. これらの概念のいずれかを使用して、任意の CompositionObject のプロパティまたはサブチャネルコンポーネント (該当する場合) をアニメーション化することができます。You can use any of these concepts to animate a property or subchannel component (when applicable) of any CompositionObject.

注意

CompositionObject のすべてのプロパティが system.windows.media.animation.animatable> であるとは限りません。Not all properties of a CompositionObject are animatable. プロパティが system.windows.media.animation.animatable> かどうかを判断するには、個々の CompositionObject のドキュメントを参照してください。Refer to the documentation of the individual CompositionObject to determine whether a property is animatable.

注意

"サブ_チャネル_" という用語は、プロパティのコンポーネント形式を指します。The term subchannel refers to a component form of a property. たとえば、Vector3 Offset プロパティの X または XY サブチャネルです。For example, the X, or XY subchannel of a Vector3 Offset property.

アニメーションの概念Animation concept 説明Description
Keyフレームアニメーションを使用した時間ベースのモーションTime-based motion with KeyFrameAnimations Keyフレームアニメーションは、一定期間におけるモーションエクスペリエンスの全体を直接制御するために使用されます。KeyFrameAnimations are used to directly control the entirety of a motion experience over a period of time. モーションの開始、終了、間の補間、および継続時間を従来の keyframed 方式で記述する開発者。Developers describing a motion’s start, end, interpolation in between, and duration in a traditional keyframed fashion.
式アニメーションを使用した相対的な動きRelative motion with ExpressionAnimations 式のアニメーションを使用して、あるオブジェクトのプロパティのモーションを別のオブジェクトのプロパティに対して相対的にどのように使用するかを記述します。ExpressionAnimations are used to describe how a motion of one object’s property should be driven relative to another object’s property. 開発者は、参照ベースのリレーションシップを定義する数学的式を定義します。Developers define a mathematical equation that defines the reference-based relationship.
ImplicitAnimationsImplicitAnimations これらのアニメーションはトリガーベースであり、コアアプリロジックとは別に定義されています。These animations are trigger-based and are defined separately from core app logic. ImplicitAnimations は、プロパティの直接変更に対する応答としてアニメーションがどのように発生するかを説明するために使用されます。ImplicitAnimations are used to describe how and when animations occur as a response to direct property changes.
入力によるモーションと入力アニメーションInput-driven motion with Input Animations 入力アニメーションは、開発者がタッチやその他の入力感覚様相を使用して操作ベースのモーションを記述できるようにする一連のシナリオに対応します。Input Animations covers a set of scenarios that enable developers to describe manipulation-based motion via touch or other input modalities. これらのアニメーションは、アクティブなユーザーの入力またはジェスチャに基づいて決定されます。These animations are driven based on active user input or gestures.
NaturalMotionAnimations を使用した物理動作Physics-based motion with NaturalMotionAnimations NaturalMotionAnimations を使用して、現実世界での強制運動に基づいて、自然で使い慣れたモーションエクスペリエンスを説明します。NaturalMotionAnimations are used to describe natural and familiar motion experiences based on real-world force driven motion. 開発者は時間を定義するのではなく、モーションの特性 (たとえば、スプリングの減衰率) を定義します。Rather than defining time, developers define characteristics of the motion (for example, damping ratio for Springs)