入力駆動型アニメーションInput-driven animations

この記事では、InputAnimation API について簡単に説明し、UI でこれらの種類のアニメーションを使用するための推奨方法を紹介します。This article provides an introduction to the InputAnimation API, and recommends how to use these types of animations in your UI.

前提条件Prerequisites

ここでは、以下の記事で説明されている概念を理解していることを前提とします。Here, we assume that you're familiar with the concepts discussed in these articles:

ユーザーの操作で駆動するスムーズなモーションSmooth motion driven from user interactions

Fluent Design 言語では、エンド ユーザーとアプリの間で行われる操作は最も重要なことです。In the Fluent Design language, interaction between end users and apps is of the utmost importance. アプリは操作の一部に注目していればよいわけではありません。アプリを操作するユーザーに対して、自然で動的な反応をする必要があります。Apps not only have to look the part, but also respond naturally and dynamically to the users that interact with them. つまり、指が画面上に置かれた場合、UI は入力の変更の程度に応じて適切に対応する必要があります。スクロールはスムーズに実行し、画面をパンする指を追跡する必要があります。This means when a finger is placed on the screen, the UI should gracefully react to changing degrees of input; scrolling should feel smooth, and stick to a finger panning across the screen.

ユーザー入力に対して動的で滑らかな反応を構築することで、ユーザー エンゲージメントを向上させることができます。現代では、モーションは見栄えが良いだけでなく、ユーザーがさまざまな UI エクスペリエンスを操作する場合に、自然で適切な操作感を実現することが求められます。Building UI that dynamically and fluidly responds to user input results in higher user engagement - Motion now not only looks good, but feels good and natural when users interact with your different UI experiences. これにより、エンド ユーザーはアプリケーションを簡単に利用できるようになり、エクスペリエンスはより覚えやすく魅力的なものになります。This enables end users to more easily connect with your application, making the experience more memorable and delightful.

従来のタッチ操作からの拡張Expanding past just touch

タッチは、エンド ユーザーが UI コンテンツを操作する際に利用する一般的なインターフェイスの 1 つですが、マウスやペンなど他のさまざまな入力方式も使用されます。Although touch is one of the more common interfaces end users use to manipulate UI content, they will also use various other input modalities such mouse and pen. こうした状況では、使用される入力方式に関係なく、UI が入力に対して動的に反応することをエンド ユーザーが認識できるようにすることが重要となります。In these cases, it is important that end users perceive that your UI responds dynamically to their input, regardless of what input modality they choose to use. 入力駆動型のモーション エクスペリエンスを設計する場合は、さまざまな入力方式を理解している必要があります。You should be cognizant of the different input modalities when designing input-driven motion experiences.

さまざまな入力駆動型のモーション エクスペリエンスDifferent Input-Driven Motion Experiences

InputAnimation 領域によって、動的な反応を示すモーションを作成するためさまざまなエクスペリエンスが提供されます。The InputAnimation space provides several different experiences for you to create dynamically responding motion. 他の Windows UI アニメーション システムと同様に、これらの入力駆動型アニメーションは、動的なモーション エクスペリエンスの作成に役立つ独立したスレッド上で動作します。Like the rest of the Windows UI Animation system, these input-driven animations operate on an independent thread, which helps contribute to the dynamic motion experience. ただし、エクスペリエンスが既存の XAML コントロールとコンポーネントを利用する場合は、それらのエクスペリエンスの構成要素が UI スレッドによって制約を受けます。However, in some cases where the experience leverages existing XAML controls and components, parts of those experiences are still UI thread bound.

動的な入力駆動型のモーションを示すアニメーションを構築するときに作成する、3 つの主要なエクスペリエンスがあります。There are three core experiences that you create when building dynamic input-driven motion animations:

  1. 既存の ScrollView を強化したエクスペリエンス – XAML ScrollViewer の位置によって動的なアニメーション エクスペリエンスを駆動できるようにします。Enhancing Existing ScrollView Experiences – enable the position of a XAML ScrollViewer to drive dynamic animation experiences.
  2. ポインターの位置で駆動するエクスペリエンス – ヒット テストが行われた UIElement 上のカーソル位置を利用して、動的なアニメーション エクスペリエンスを駆動します。Pointer Position-driven Experiences – utilize the position of a cursor on a hit tested UIElement to drive dynamic animation experiences.
  3. InteractionTracker を使用したカスタム操作エクスペリエンス – InteractionTracker を使用して、完全にカスタマイズされた、オフスレッドの操作エクスペリエンスを作成します (スクロールやズームが可能なキャンバスなど)。Custom Manipulation experiences with InteractionTracker – create a fully customized, off-thread manipulation experiences with InteractionTracker (such as a scrolling/zooming canvas).

既存の ScrollViewer を強化したエクスペリエンスEnhancing Existing ScrollViewer Experiences

より動的なエクスペリエンスを作成するための一般的な方法の 1 つとして、既存の XAML ScrollViewer コントロールの最上位に構築する方法があります。One of the common ways to create more dynamic experiences is to build on top of an existing XAML ScrollViewer control. このような方法では、ScrollViewer のスクロール位置を利用して、単純なスクロール エクスペリエンスをより動的なものにする追加の UI コンポーネントを作成します。In these situations, you leverage the scroll position of a ScrollViewer to create additional UI components that make a simple scrolling experience more dynamic. これらのエクスペリエンスの例として、固定ヘッダー/シャイ ヘッダー、視差などがあります。Some examples include Sticky/Shy Headers and Parallax.

視差を利用したリスト ビュー

シャイ ヘッダー

このような種類のエクスペリエンスを作成するときは、以下の一般的な方法に従ってください。When creating these types of experiences, there is a general formula to follow:

  1. アニメーションを駆動する XAML ScrollViewer から ScrollManipulationPropertySet にアクセスします。Access the ScrollManipulationPropertySet off of the XAML ScrollViewer you wish to drive an animation.
    • ElementCompositionPreview.GetScrollViewerManipulationPropertySet(UIElement 要素) API を使用してアクセスしますDone via the ElementCompositionPreview.GetScrollViewerManipulationPropertySet(UIElement element) API
    • Translation と呼ばれるプロパティを含んでいる CompositionPropertySet が返されますReturns a CompositionPropertySet containing a property called Translation
  2. Translation プロパティを参照する式を使用して、Composition の ExpressionAnimation を作成します。Create a Composition ExpressionAnimation with an equation that references the Translation property.
  3. CompositionObject のプロパティでアニメーションを開始します。Start the animation on a CompositionObject’s property.

これらのエクスペリエンスの作成方法について詳しくは、「既存の ScrollViewer エクスペリエンスを強化する」をご覧ください。For more info on building these experiences, see Enhance existing ScrollViewer experiences.

ポインターの位置で駆動するエクスペリエンスPointer Position-driven experiences

よく利用される動的なエクスペリエンスの 1 つです。入力を使用し、マウス カーソルなどのポインターの位置に基づいてアニメーションを駆動します。Another common dynamic experience involving input is to drive an animation based on the position of a pointer such as a Mouse cursor. このようなエクスペリエンスでは、開発者は、スポットライト表示のようなエクスペリエンスの作成を可能にする XAML UIElement でヒット テストが行われたときのカーソルの位置を利用します。In these situations, developers leverage the location of a cursor when hit tested within a XAML UIElement that makes experiences like Spotlight Reveal possible to create.

ポインター スポットライトの例

ポインターに基づく回転の例

このような種類のエクスペリエンスを作成するときは、以下の一般的な方法に従ってください。When creating these types of experiences, there is a general formula to follow:

  1. ヒット テストが行われたときにカーソルの位置を把握するための XAML UIElement から PointerPositionPropertySet にアクセスします。Access the PointerPositionPropertySet off a XAML UIElement that you wish to know the cursor position when hit tested.
    • ElementCompositionPreview.GetPointerPositionPropertySet(UIElement 要素) API を使用してアクセスしますDone via the ElementCompositionPreview.GetPointerPositionPropertySet(UIElement element) API
    • Position と呼ばれるプロパティを含んでいる CompositionPropertySet が返されますReturns a CompositionPropertySet containing a property called Position
  2. Position プロパティを参照する式を使用して、CompositionExpressionAnimation を作成します。Create a CompositionExpressionAnimation with an equation that references the Position property.
  3. CompositionObject のプロパティでアニメーションを開始します。Start the animation on a CompositionObject’s property.

InteractionTracker を使用したカスタム操作エクスペリエンスCustom manipulation experiences with InteractionTracker

XAML ScrollViewer を利用する際の問題の 1 つは、UI スレッドによって制約を受けるということです。One of the challenges with utilizing a XAML ScrollViewer is that it is bound to the UI thread. そのため、UI スレッドがビジー状態になると、スクロールやズームのエクスペリエンスで遅延やジッターが発生する場合があり、その結果、ユーザーの興味を引かないエクスペリエンスとなってしまう可能性があります。As a result, the scrolling and zooming experience can often lag and jitter if the UI thread becomes busy and results in an unappealing experience. また、ScrollViewer エクスペリエンスの多くの側面はカスタマイズすることができません。In addition, it is not possible to customize many aspects of the ScrollViewer experience. InteractionTracker は、これらの問題を解決するために作成されました。そのために、独立したスレッド上で実行されるカスタム操作エクスペリエンスを作成するための構成要素のセットが提供されます。InteractionTracker was created to solve both issues by providing a set of building blocks to create custom manipulation experiences that are run on an independent thread.

3D 操作の例

引き出されるようなアニメーション化の例

InteractionTracker を使用してエクスペリエンスを作成するときは、以下の一般的な方法に従ってください。When creating experiences with InteractionTracker, there is a general formula to follow:

  1. InteractionTracker オブジェクトを作成し、そのプロパティを定義します。Create your InteractionTracker object and define its properties.
  2. InteractionTracker で使用される入力をキャプチャする CompositionVisual 用の VisualInteractionSources を作成します。Create VisualInteractionSources for any CompositionVisual that should capture input for InteractionTracker to consume.
  3. InteractionTracker の Position プロパティを参照する式を使用して、Composition の ExpressionAnimation を作成します。Create a Composition ExpressionAnimation with an equation that references the Position property of InteractionTracker.
  4. InteractionTracker で駆動される、Composition の Visual のプロパティでアニメーションを開始します。Start the animation on a Composition Visual’s property that you wish to be driven by InteractionTracker.