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 # animationframeprovider-cancelanimationframe |
ブラウザーの互換性
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
cancelAnimationFrame |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Requires a vendor prefix or different name for use.
- Has more compatibility info.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.