メインコンテンツへスキップ

InteractionManager

InteractionManagerは、インタラクションやアニメーションが完了した後に、時間のかかる処理をスケジュールすることができます。特に、これによりJavaScriptのアニメーションをスムーズに実行できます。

アプリケーションは、以下のようにインタラクション後に実行されるタスクをスケジュールできます。

tsx
InteractionManager.runAfterInteractions(() => {
  // ...long-running synchronous task...
});

他のスケジューリング方法と比較してみましょう。

  • requestAnimationFrame() は、時間をかけてビューをアニメーションさせるコードに使用します。
  • setImmediate/setTimeout() は、後でコードを実行しますが、アニメーションを遅延させる可能性があることに注意してください。
  • runAfterInteractions() は、アクティブなアニメーションを遅延させることなく、後でコードを実行します。

タッチ処理システムは、1つ以上のアクティブなタッチを「インタラクション」とみなし、すべてのタッチが終了またはキャンセルされるまで runAfterInteractions() のコールバックを遅延させます。

InteractionManagerでは、アプリケーションがアニメーションを登録することもできます。アニメーション開始時にインタラクションの「ハンドル」を作成し、完了時にそれをクリアします。

tsx
const handle = InteractionManager.createInteractionHandle();
// run animation... (`runAfterInteractions` tasks are queued)
// later, on animation completion:
InteractionManager.clearInteractionHandle(handle);
// queued tasks run if all handles were cleared

runAfterInteractions は、プレーンなコールバック関数か、Promise を返す gen メソッドを持つ PromiseTask オブジェクトのいずれかを受け取ります。PromiseTask が指定された場合、先に同期的にキューに入れられた可能性のある次のタスクを開始する前に、その PromiseTask が完全に解決されます（runAfterInteractions を介してさらにタスクをスケジュールする非同期の依存関係も含まれます）。

デフォルトでは、キューに入れられたタスクは1つの setImmediate バッチ内でループでまとめて実行されます。setDeadline が正の数で呼び出された場合、タスクはデッドライン（JSイベントループの実行時間で）に近づくまでしか実行されません。その時点で実行はsetTimeoutを介して中断され、タッチなどのイベントがインタラクションを開始し、キューに入れられたタスクの実行をブロックできるようになり、アプリの応答性が向上します。

使用例​

基本​

高度な使用法​

リファレンス

メソッド​

runAfterInteractions()​

tsx
static runAfterInteractions(task?: (() => any) | SimpleTask | PromiseTask);

すべてのインタラクションが完了した後に実行される関数をスケジュールします。キャンセル可能な "promise" を返します。

createInteractionHandle()​

tsx
static createInteractionHandle(): Handle;

インタラクションが開始したことをマネージャーに通知します。

clearInteractionHandle()​

tsx
static clearInteractionHandle(handle: Handle);

インタラクションが完了したことをマネージャーに通知します。

setDeadline()​

tsx
static setDeadline(deadline: number);

正の数を指定すると、eventLoopRunningTimeがデッドライン値に達した後にsetTimeoutを使用してタスクをスケジュールします。それ以外の場合、すべてのタスクは1つのsetImmediateバッチで実行されます（デフォルト）。