window.cancelAnimationFrame()

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。

もっと詳しく
完全な互換性情報を見る

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

構文

cancelAnimationFrame(requestID)

引数

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

返値

なし (undefined)。

例

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);