阅读(9.5k) 书签赞(0) 我要纠错

window方法：requestAnimationFrame()

2021-08-23 09:59 更新

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

以上内容是否对您有帮助：

← window方法：releaseEvents()

window方法：requestFileSystem() →

写笔记

我要补充