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

この記事では、InteractionTracker を使用してカスタム操作エクスペリエンスを作成する方法について説明します。

前提条件

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

• 入力駆動型アニメーション
• 関係ベース アニメーション

なぜカスタム操作エクスペリエンスを作るのか？

ほとんどの場合、事前に構築された操作コントロールを使用すると、UI エクスペリエンスを作成するのに十分です。 しかし、一般的なコントロールと区別したい場合はどうでしょうか。 入力によって駆動される特定のエクスペリエンスを作成したい場合や、従来の操作モーションでは不十分な UI がある場合はどうすればよいでしょうか。 ここでは、カスタム エクスペリエンスを作成します。 アプリ開発者やデザイナーがよりクリエイティブになり、ブランド化とカスタムデザイン言語をより良く例示するモーションエクスペリエンスを実現できます。 一から、画面のオンとオフの指で動きがどのように反応するかから、スナップポイントや入力チェーンまで、操作エクスペリエンスを完全にカスタマイズするための構成要素の適切なセットへのアクセス権が与えられます。

カスタム操作エクスペリエンスを作成する場合の一般的な例を次に示します。

• カスタムスワイプ、削除/閉じる動作の追加
• 入力ドリブン効果 (パンするとコンテンツがぼかします)
• 調整された操作モーションを持つカスタム コントロール (カスタム ListView、ScrollViewer など)

なぜInteractionTrackerを使うのか？

InteractionTracker は、10586 SDK バージョンで Windows.UI.Composition.Interactions 名前空間に導入されました。 InteractionTracker を使用可能になります。

• 完全な柔軟性 – 操作エクスペリエンスのあらゆる側面、具体的には、入力中または入力に応じて発生する正確なモーションをカスタマイズして調整できるようにしたいと考えています。 InteractionTracker を使用してカスタム操作エクスペリエンスを構築する場合は、必要なすべてのノブを自由に使用できます。
• Smooth Performance – 操作エクスペリエンスの課題の 1 つは、そのパフォーマンスが UI スレッドに依存することです。 これは、UI がビジー状態のときに、操作エクスペリエンスに悪影響を与える可能性があります。 InteractionTracker は、60 FPS で独立したスレッドで動作する新しいアニメーション エンジンを利用するように構築され、スムーズなモーションを実現しました。

概要: InteractionTracker

カスタム操作エクスペリエンスを作成するときは、2 つの主要なコンポーネントを操作します。 最初に、次の内容について説明します。

• InteractionTracker – コア オブジェクトメインアクティブなユーザー入力または直接の更新とアニメーションによってプロパティが駆動されるステート マシンを保持します。 その後、CompositionAnimation に関連付けてカスタム操作モーションを作成することを目的としています。
• VisualInteractionSource – InteractionTracker に入力が送信されるタイミングと条件を定義する補数オブジェクトです。 ヒット テストに使用される CompositionVisual と、その他の入力構成プロパティの両方を定義します。

ステート マシンとして、InteractionTracker のプロパティは次のいずれかによって駆動できます。

• 直接ユーザー操作 – エンド ユーザーが VisualInteractionSource ヒット テスト領域内で直接操作している
• 慣性 – プログラム速度またはユーザー ジェスチャのいずれかから、InteractionTracker のプロパティは慣性曲線の下でアニメーション化されます
• CustomAnimation – InteractionTracker のプロパティを直接ターゲットとするカスタム アニメーション

InteractionTracker ステート マシン

既にメンションしたように、InteractionTracker は 4 つの状態を持つステート マシンであり、それぞれが他の 4 つの状態のいずれかに移行できます。 (InteractionTracker がこれらの状態間でどのように遷移するかの詳細については、次を参照してください。 InteractionTracker クラスの ドキュメント。

InteractionTracker の状態が変化する各ケースでは、リッスンできるイベント (またはコールバック) が生成されます。 これらのイベントをリッスンするには、 IInteractionTrackerOwner インターフェイスを実装し、CreateWithOwnerメソッドを使用して InteractionTracker オブジェクトを作成する必要があります。 次の図では、さまざまなイベントがトリガーされるタイミングについても説明します。

VisualInteractionSource の使用

InteractionTracker を入力によって駆動するには、VisualInteractionSource (VIS) を接続する必要があります。 VIS は、CompositionVisual を使用して次を定義する補数オブジェクトとして作成されます。

1. 入力が追跡され、座標空間ジェスチャが検出されるヒット テスト領域
2. 検出されてルーティングされる入力の構成には、次のようなものがあります。
   • 検出可能なジェスチャ: 位置 X と Y (水平方向と垂直方向のパン)、スケール (ピンチ)
   • 慣性
   • レールとチェーン
   • リダイレクト モード: InteractionTracker に自動的にリダイレクトされる入力データ

VisualInteractionSource は、さまざまなモダリティ (タッチ、PTP、ペン) からの入力データが InteractionTracker にルーティングされる場合の管理も担当します。 この動作は、ManipulationRedirectionMode プロパティによって定義されます。 既定では、すべてのポインター入力が UI スレッドに送信され、精度タッチパッド入力は VisualInteractionSource と InteractionTracker に送信されます。

したがって、VisualInteractionSource と InteractionTracker を使用して操作を実行するためにタッチとペン (Creators Update) を使用する場合は、VisualInteractionSource.TryRedirectForManipulation メソッドを呼び出す必要があります。 XAML アプリの次の短いスニペットでは、タッチが押されたイベントが最も多くの UIElement Grid で発生したときにメソッドが呼び出されます。

private void root_PointerPressed(object sender, PointerRoutedEventArgs e)
{
    if (e.Pointer.PointerDeviceType == Windows.Devices.Input.PointerDeviceType.Touch)
    {
        _source.TryRedirectForManipulation(e.GetCurrentPoint(root));
    }
}

ExpressionAnimations とのタイイン

InteractionTracker を使用して操作エクスペリエンスを推進する場合は、主に Scale プロパティと Position プロパティを操作します。 他の CompositionObject プロパティと同様に、これらのプロパティはターゲットと CompositionAnimation (最も一般的な ExpressionAnimation) の両方で参照できます。

式内で InteractionTracker を使用するには、次の例のようにトラッカーの Position (または Scale) プロパティを参照します。 前に説明した条件のいずれかが原因で InteractionTracker のプロパティが変更されると、式の出力も変更されます。

// With Strings
var opacityExp = _compositor.CreateExpressionAnimation("-tracker.Position");
opacityExp.SetReferenceParameter("tracker", _tracker);

// With ExpressionBuilder
var opacityExp = -_tracker.GetReference().Position;

作業を開始する

InteractionTracker を使用してカスタム操作エクスペリエンスを作成する方法を説明します。

1. InteractionTracker.Create または InteractionTracker.CreateWithOwner を使用して InteractionTracker オブジェクトを作成します。
   • (CreateWithOwner を使用する場合は、IInteractionTrackerOwner インターフェイスを実装してください)。
2. 新しく作成した InteractionTracker の最小位置と最大位置を設定します。
3. CompositionVisual を使用して VisualInteractionSource を作成します。
   • 渡すビジュアルのサイズが 0 以外であることを確認します。 そうしないと、ヒット テストが正しく行われません。
4. VisualInteractionSource のプロパティを設定します。
   • VisualInteractionSourceRedirectionMode
   • PositionXSourceMode、PositionYSourceMode、ScaleSourceMode
   • レールとチェーン
5. InteractionTracker.InteractionSources.Add を使用して、VisualInteractionSource を InteractionTracker に追加します。
6. タッチ入力とペン入力が検出されたときに TryRedirectForManipulation をセットアップします。
   • XAML の場合、これは通常、UIElement の PointerPressed イベントで行われます。
7. InteractionTracker の Position プロパティを参照する式を使用して、Composition の ExpressionAnimation を作成します。

動作中の #1 ~ 5 を示す短いコード スニペットを次に示します。

private void InteractionTrackerSetup(Compositor compositor, Visual hitTestRoot)
{ 
    // #1 Create InteractionTracker object
    var tracker = InteractionTracker.Create(compositor);

    // #2 Set Min and Max positions
    tracker.MinPosition = new Vector3(-1000f);
    tracker.MaxPosition = new Vector3(1000f);

    // #3 Setup the VisualInteractionSource
    var source = VisualInteractionSource.Create(hitTestRoot);

    // #4 Set the properties for the VisualInteractionSource
    source.ManipulationRedirectionMode =
        VisualInteractionSourceRedirectionMode.CapableTouchpadOnly;
    source.PositionXSourceMode = InteractionSourceMode.EnabledWithInertia;
    source.PositionYSourceMode = InteractionSourceMode.EnabledWithInertia;

    // #5 Add the VisualInteractionSource to InteractionTracker
    tracker.InteractionSources.Add(source);
}

InteractionTracker のより高度な使用方法については、次の記事を参照してください。

• 慣性修飾子を使用したスナップ位置の作成
• ソース修飾子を使用した引っ張って更新