Widely available すべての主要ブラウザで対応済み。安心して使用可能。

requestAnimationFrame() in workers

cancelAnimationFrame() は DedicatedWorkerGlobalScope インターフェイスのメソッドで、requestAnimationFrame() の呼び出しによって以前にスケジュールされたアニメーションフレームのリクエストをキャンセルします。

cancelAnimationFrame() メソッドを呼び出すには、現在のワーカーに関連付けられた所有者 window が必要です。つまり、現在のワーカーが window によって作成されているか、または window を所有者とする専用ワーカーによって作成されている必要があります。

非同期・スケジューリング

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
cancelAnimationFrame
69
79
99
16.4
69
16.4
requestAnimationFrame

requestAnimationFrame() は DedicatedWorkerGlobalScope インターフェイスのメソッドで、アニメーションフレームを実行したいことをブラウザーに指示し、次回の再描画の前に、ユーザーが指定したコールバック関数を呼び出すよう要求します。
69
79
99
16.4
69
16.4
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
実装メモ
  • ネストされたWeb Workerではサポートされていません。バグ41483010を参照してください。
注釈 1件
実装メモ
  • ネストされたWeb Workerではサポートされていません。バグ41483010を参照してください。
注釈 1件
実装メモ
  • ネストされたWeb Workerではサポートされていません。バグ41483010を参照してください。

基本構文

JAVASCRIPT 
const worker = new Worker("worker.js");

// Transfer canvas control to the worker
const offscreenCanvas = document
  .querySelector("canvas")
  .transferControlToOffscreen();

// Start the animation
worker.postMessage(
  {
    type: "start",
    canvas: offscreenCanvas,
  },
  [offscreenCanvas],
);

// Stop the animation after 5 seconds
setTimeout(() => {
  worker.postMessage({
    type: "stop",
  });
}, 5000);

実務での使いどころ

  • requestAnimationFrame() in workers の活用

    cancelAnimationFrame() は DedicatedWorkerGlobalScope インターフェイスのメソッドで、requestAnimationFrame() の呼び出しによって以前にスケジュールされたアニメーションフレームのリクエストをキャンセルします。

注意点

  • 古いブラウザでは対応していない場合がある。

実装メモ

  • 一部の API はセキュアコンテキスト (HTTPS) やユーザー操作起点を必要とする。利用前に要件を確認すること。

参考リンク