window.cancelAnimationFrame()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

構文

js
cancelAnimationFrame(requestID)

引数

requestID

コールバックをリクエストした window.requestAnimationFrame() の呼び出しによって返された ID 値。

返値

なし (undefined)。

例

js
const requestAnimationFrame =
  window.requestAnimationFrame ||
  window.mozRequestAnimationFrame ||
  window.webkitRequestAnimationFrame ||
  window.msRequestAnimationFrame;

const cancelAnimationFrame =
  window.cancelAnimationFrame || window.mozCancelAnimationFrame;

const start = Date.now();

let myReq;

function step(timestamp) {
  const progress = timestamp - start;
  d.style.left = `${Math.min(progress / 10, 200)}px`;
  if (progress < 2000) {
    // requestAnimationFrame を呼び出すたびに requestId を更新することが重要です
    myReq = requestAnimationFrame(step);
  }
}
myReq = requestAnimationFrame(step);
// キャンセル処理は、最後の requestId を使用します
cancelAnimationFrame(myReq);

仕様書

Specification
HTML Standard
# animationframeprovider-cancelanimationframe

ブラウザーの互換性

BCD tables only load in the browser

関連情報