コンポジションのアニメーション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.

Windows UI プラットフォームの基本的なビルディング ブロックとして CompositionAnimations は、アプリケーションの 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 つのアニメーションを使用して、複数のオブジェクトとプロパティを調整または障害前の悩むことがなくパラメーターを使用します。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 のすべてのプロパティはアニメーション化可能です。Not all properties of a CompositionObject are 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. たとえば、X、またはお客様 xy のところ、Vector3 オフセット プロパティのサブチャネルします。For example, the X, or XY subchannel of a Vector3 Offset property.

アニメーションの概念Animation concept 説明Description
KeyFrameAnimations でのモーションの時間ベースTime-based motion with KeyFrameAnimations KeyFrameAnimations は、時間の期間にわたってモーション エクスペリエンス全体を直接制御に使用されます。KeyFrameAnimations are used to directly control the entirety of a motion experience over a period of time. 開発者は、モーションの開始、終了、補間で、および従来のキーフレームの形で期間を記述します。Developers describing a motion’s start, end, interpolation in between, and duration in a traditional keyframed fashion.
ExpressionAnimations 相対移動中Relative motion with ExpressionAnimations ExpressionAnimations を使用して、別のオブジェクトのプロパティの基準とした 1 つのオブジェクトのプロパティの動作を動作させる方法を記述します。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. 開発者が (Springs は、比率を抑制など) の動きの特性を定義する時刻を定義するのではなくRather than defining time, developers define characteristics of the motion (e.g. damping ratio for Springs)