window方法：requestAnimationFrame()
requestAnimationFrame()方法
该window.requestAnimationFrame()方法告诉浏览器您希望执行动画，并请求浏览器调用指定的函数以在下次重绘之前更新动画。该方法将回调作为在重绘之前调用的参数。
注意：如果要在下次重绘时为另一帧设置动画，则回调例程必须自己调用requestAnimationFrame()。
只要您准备好在屏幕上更新动画，就应该调用此方法。这将请求在浏览器执行下一次重绘之前调用您的动画函数。回调次数通常为每秒60次，但根据W3C建议，通常会与大多数Web浏览器中的显示刷新率相匹配。当在后台选项卡或隐藏的<iframe>中运行时，大多数浏览器都会暂停调用requestAnimationFrame()，以提高性能和延长电池寿命。
回调方法传递一个参数，一个DOMHighResTimeStamp，它指示由requestAnimationFrame()start开始排队的回调的当前时间。该参数指示requestAnimationFrame()排队的回调开始触发时的当前时间。因此，在一个框架中有多个回调，每个回调都接收相同的时间戳，即使在计算每个先前的回调的工作负载期间已经过了时间。此时间戳是十进制数，以毫秒为单位，但最小精度为1ms（1000μs）。
requestAnimationFrame()方法语法
window.requestAnimationFrame(callback);参数
- callback
- 一个参数，指定在更新动画以进行下一次重绘时要调用的函数。回调有一个参数DOMHighResTimeStamp，它指示了requestAnimationFrame()开始触发回调时的当前时间(从performance.now()返回的时间)。
返回值
返回一个long整数值，即请求ID，用于唯一标识回调列表中的条目。这是一个非零值，但您可能不会对其值做任何其他假设。您可以向window.cancelAnimationFrame()传递此值以取消刷新回调请求。
示例
<html>
<head>
<title>w3cschool(w3cschool.cn)</title>
</head>
<body>
<div id='e' style='border:1px solid;width:100px;height:100px;position:relative;'></div>
<button id='b'>取消执行动画</button>
<button id='c'>执行动画</button>
<script>
//用来兼容不同浏览器
window.requestAnimat = (function () {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame || function (callback) {
setTimeout(callback, 1000 / 60);
}
})();
let e = document.getElementById('e'), b = document.getElementById('b'), c = document.getElementById('c');
//便宜量
let left = 0;
//正反向
let flag = true;
let ret = 0;
//渲染方法
function render() {
if (flag) {
e.style.left = `${left++}`;
if (left == 100) flag = false;
} else {
e.style.left = `${left--}`;
if (left == 0) flag = true;
}
}
function loopAnim() {
render();
ret = requestAnimat(loopAnim);
};
//在点了多次c之后，动画速度比较快的情况下点b，则动画效果一点点减慢直到停止
b.onclick = function () {
window.cancelAnimationFrame(ret);
};
//如果一直点c，动画会越来越快
c.onclick = function () {
loopAnim();
};
(loopAnim())();
</script>
</body>
</html>
规范
| 规范 | 状态 | 注释 |
|---|---|---|
HTML Living Standard 该规范中“requestAnimationFrame”的定义。 |
Living Standard
|
没有变化，取代前一个。 |
基于脚本的动画的时序控制 该规范中“requestAnimationFrame”的定义。 |
Obsolete
|
初步定义 |
浏览器兼容性
| 电脑端 | 移动端 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome
|
Edge
|
Firefox
|
Internet Explorer
|
Opera
|
Safari
|
Android webview | Chrome for Android
|
Edge Mobile | Firefox for Android
|
Opera for Android
|
iOS Safari | |
| 基本支持 | 支持：24 | 支持 | 支持：23 | 支持：10 | 支持：15 | 支持：6.1 | 支持 | 支持：25 | 支持 | 支持：23 | 支持：15 | 支持：7.1 |
| 返回值 | 支持：23 | 支持 | 支持：11 | 支持：10 | 支持：15 | 支持：6.1 | 支持 | 支持：25 | 支持 | 支持：14 | 支持：15 | 支持：6.1 |