入力駆動型アニメーション

この記事では、WinUI アプリと Windows App SDK アプリの InputAnimation API の概要について説明し、UI でこれらの種類のアニメーションを使用する方法を推奨します。

前提条件

ここでは、これらの記事で説明されている概念を理解していることを前提としています。

• 関係ベースのアニメーション

ユーザーの操作から駆動されるスムーズなモーション

Fluent Design 言語では、エンド ユーザーとアプリ間の対話が最も重要です。 アプリは単に見た目が良いだけでなく、ユーザーとのインタラクションに対して自然かつ動的に応答する必要があります。 つまり、画面上に指を置くと、UI は入力の度合いの変化に適切に対応する必要があります。スクロールはスムーズに感じられ、画面上で指の動きにしっかりと追随するはずです。

ユーザー入力に動的かつ流動的に応答する UI を構築すると、ユーザーエンゲージメントが向上します。モーションは、見た目が良いだけでなく、ユーザーが異なる UI エクスペリエンスと対話するときに良く自然に感じられるようになりました。 これにより、エンド ユーザーはアプリケーションに簡単に接続でき、エクスペリエンスがより思い出深く楽しみやすくなっています。

タッチ操作を超えて拡張する

タッチは、エンド ユーザーが UI コンテンツを操作するために使用するより一般的なインターフェイスの 1 つですが、マウスやペンなどの他のさまざまな入力モダリティも使用します。 このような場合、エンド ユーザーは、使用する入力モダリティに関係なく、UI が入力に動的に応答することを認識することが重要です。 入力駆動モーション エクスペリエンスを設計するときは、さまざまな入力モダリティを認識する必要があります。

さまざまな入力駆動型モーションエクスペリエンス

InputAnimation 空間には、動的に応答するモーションを作成するためのさまざまなエクスペリエンスが用意されています。 Windows App SDK コンポジション アニメーション システムの他の部分と同様に、これらの入力駆動型アニメーションは独立したスレッドで動作し、動的なモーション エクスペリエンスに役立ちます。 ただし、エクスペリエンスで既存の XAML コントロールとコンポーネントを活用する場合、それらのエクスペリエンスの一部はまだ UI スレッドバインドされています。

動的な入力駆動型モーション アニメーションを構築するときに作成する 3 つの主要なエクスペリエンスがあります。

1. 既存の ScrollView エクスペリエンスの強化 – XAML ScrollViewer の位置を有効にして、動的アニメーション エクスペリエンスを促進します。
2. ポインター位置駆動エクスペリエンス – ヒット テスト済み UIElement 上のカーソルの位置を利用して、動的アニメーション エクスペリエンスを駆動します。
3. InteractionTracker を使用したカスタム操作エクスペリエンス – InteractionTracker (スクロール/ズーム キャンバスなど) を使用して、完全にカスタマイズされたオフスレッド操作エクスペリエンスを作成します。

既存の ScrollViewer エクスペリエンスの強化

より動的なエクスペリエンスを作成する一般的な方法の 1 つは、既存の XAML ScrollViewer コントロールを基に構築することです。 このような状況では、ScrollViewer のスクロール位置を利用して、単純なスクロール エクスペリエンスをより動的にする追加の UI コンポーネントを作成します。 その一例として、固定/控えめなヘッダーや視差効果があります。

これらの種類のエクスペリエンスを作成する場合は、次の一般的な数式を使用します。

1. アニメーションを実行する XAML ScrollViewer から ScrollManipulationPropertySet にアクセスします。
   • ElementCompositionPreview.GetScrollViewerManipulationPropertySet(UIElement 要素) API を使用して行います
   • Translation というプロパティを含む CompositionPropertySet を返します。
2. Translation プロパティを参照する数式を使用して、コンポジション エクスプレッション アニメーションを作成します。
3. CompositionObject のプロパティでアニメーションを開始します。

これらのエクスペリエンスの構築の詳細については、「 既存の ScrollViewer エクスペリエンスを強化する」を参照してください。

ポインターの位置駆動型エクスペリエンス

入力を伴うもう 1 つの一般的な動的エクスペリエンスは、マウス カーソルなどのポインターの位置に基づいてアニメーションを駆動することです。 このような状況では、開発者は XAML UIElement 内でヒット テスト時にカーソルの位置を活用し、Spotlight Reveal などのエクスペリエンスを作成できるようにします。

これらの種類のエクスペリエンスを作成する場合は、次の一般的な数式を使用します。

1. ヒット テスト時にカーソル位置を知りたい XAML UIElement から PointerPositionPropertySet にアクセスします。
   • ElementCompositionPreview.GetPointerPositionPropertySet(UIElement 要素) API を使用して行います
   • Position というプロパティを含む CompositionPropertySet を返します。
2. Position プロパティを参照する数式を使用して CompositionExpressionAnimation を作成します。
3. CompositionObject のプロパティでアニメーションを開始します。

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

XAML ScrollViewer を使用する場合の課題の 1 つは、UI スレッドにバインドされていることです。 その結果、UI スレッドがビジー状態になると、スクロールやズームの操作が遅くなり、ぎこちなくなり、魅力のないユーザー体験につながることがよくあります。 さらに、ScrollViewer エクスペリエンスの多くの側面をカスタマイズすることはできません。 InteractionTracker は、独立したスレッドで実行されるカスタム操作エクスペリエンスを作成するための一連の構成要素を提供することで、両方の問題を解決するために作成されました。

InteractionTracker を使用してエクスペリエンスを作成する場合は、次の一般的な数式を使用します。

1. InteractionTracker オブジェクトを作成し、そのプロパティを定義します。
2. 各 CompositionVisual に対して VisualInteractionSources を作成して、InteractionTracker が使用する入力をキャプチャします。
3. InteractionTracker の Position プロパティを参照する数式を使用して、Composition ExpressionAnimation を作成します。
4. InteractionTracker によって制御されるコンポジション ビジュアルのプロパティでアニメーションを開始します。