window.cancelAnimationFrame()
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