Window requestAnimationFrame() 方法
示例
requestAnimationFrame() 方法的使用
const adiv = document.getElementById('mydiv');
let leftpos = 0;
function movediv(timestamp){
leftpos += 5;
adiv.style.left = leftpos + 'px';
requestAnimationFrame(movediv);
}
requestAnimationFrame(movediv);
自己动手试一试 »
描述
requestAnimationFrame() 方法告知浏览器您希望执行动画，并请求浏览器在下一次重绘之前调用一个指定的函数来更新动画。
注意： 如果您想在下一次重绘时动画另一帧，您的回调例程必须自己调用 requestAnimationFrame()。
提示： 每当您准备好在屏幕上更新动画时，都应该调用此方法，因为
- 浏览器可以优化它，使动画更流畅
- 非活动标签页中的动画将停止，使 CPU 可以休息
- 更省电
浏览器支持
| 方法 | |||||
|---|---|---|---|---|---|
| requestAnimationFrame() | 24.0 | 10.0 | 23.0 | 6.1 | 15.0 |
语法
requestAnimationFrame(callback)
参数值
| 参数 | 类型 | 描述 |
|---|---|---|
| callback | 字符串 | 必需。一个将在准备好更新动画以进行下次重绘时调用的函数。该回调函数有一个参数，一个 DOMHighResTimeStamp，表示 requestAnimationFrame() 开始触发回调的时间（performance.now() 返回的时间）。 |
技术详情
| 返回值 | 一个长整型。请求 ID，唯一标识回调列表中的条目。您可以将此值传递给 window.cancelAnimationFrame() 来取消刷新回调请求。 |
|---|
相关页面
Window 对象: cancelAnimationFrame() 方法
❮ Window 对象
