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 对象
