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

InteractionManager

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

アプリケーションは、次の方法でインタラクション後に実行するタスクをスケジュールできます。

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

他のスケジューリングの代替手段と比較してください

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

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

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

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 が指定された場合、(runAfterInteractions を介してより多くのタスクをスケジュールする非同期依存関係を含む) 完全に解決されてから、同期的に先にキューに入っていた可能性のある次のタスクに取り掛かります。

デフォルトでは、キューに入れられたタスクは 1 つの setImmediate バッチでループして一緒に実行されます。setDeadline が正の数で呼び出された場合、タスクは期限 (js イベントループ実行時間) が近づくまでのみ実行され、その時点で setTimeout を介して実行が中断され、タッチなどのイベントがインタラクションを開始し、キューに入れられたタスクの実行をブロックし、アプリの応答性を高めます。

例​

基本​

応用​

リファレンス

メソッド​

runAfterInteractions()​

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

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

createInteractionHandle()​

static createInteractionHandle(): Handle;

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

clearInteractionHandle()​

static clearInteractionHandle(handle: Handle);

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

setDeadline()​

static setDeadline(deadline: number);

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