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

参见