JavaScript 完全知识体系

JavaScript 完全知识体系

requestAnimationFrame

window.requestAnimationFrame() 方法告诉浏览器您希望执行动画并请求浏览器在下一次重绘之前调用指定的函数来更新动画。该方法使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用。

⚠️ 注意：若您想要在下一次重绘时产生另一个动画画面，您的回调例程必须调用 requestAnimationFrame()。

传统动画渲染的弊端

传统的动画渲染是通过 setTimeout 和 setInterval 进行实现，但是这两种定时器会有两个弊端：

  • 动画的时间间隔不好确定，设置时间过长会使得动画不够平滑流畅，设置过短会令浏览器的重绘频率容易达到瓶颈（推荐最佳循环间隔是 17ms，因为大多数电脑的显示器刷新频率是 60Hz，1000ms/60）。
  • 定时器的第二个时间参数只是指定了多久后将动画任务添加到浏览器的 UI 线程队列中，如果 UI 线程处于忙碌状态，那么动画不会立即执行。

语法

requestAnimationFrame

window.requestAnimationFrame(callback);
参数说明类型
callback下次重新绘制动画时调用的回调函数。该回调函数只有一个参数 DOMHighResTimeStamp，指示 requestAnimationFrame() 开始出发回调函数的当前时间。function
返回值类型
请求动画渲染的标识 ID。是个非零值，没有其他意义。可用作 window.cancelAnimationFrame() 以取消回调函数。number 整数

cancelAnimationFrame

window.cancelAnimationFrame(requestID);
参数说明类型
requestId指定动画渲染的标识符number

优点

  • requestAnimationFrame 会把每一帧中的所有 DOM 操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率
  • 在隐藏或不可见的元素中，或者浏览器标签页不可见时，requestAnimationFrame 将不会进行重绘或回流，这当然就意味着更少的 CPU、GPU 和内存使用量
  • requestAnimationFrame 是由浏览器专门为当年规划提供的 API，在运行时浏览器会自动优化方法的调用，并且如果页面不是激活状态下的话，动画会自动暂停，有效节省了 CPU 开销

兼容性

IEEdgeFirefoxChromeSafari
1117606611.1

Firefox、Chrome、IE10+ 对 requestAnimationFrame 支持很好，但不兼容 IE9- 浏览器，但是我们可以用定时器完成兼容性改造。

(function () {
  var lastTime = 0;
  var vendors = ['webkit', 'moz'];
  for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
    window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
    window.cancelAnimationFrame =
      window[vendors[x] + 'CancelAnimationFrame'] ||
      window[vendors[x] + 'CancelRequestAnimationFrame'];
  }


  if (!window.requestAnimationFrame)
    window.requestAnimationFrame = function (callback) {
      /*调整时间，让一次动画等待和执行时间在最佳循环时间间隔内完成*/
      var currTime = new Date().getTime();
      var timeToCall = Math.max(0, 17 - (currTime - lastTime));
      var id = window.setTimeout(function () {
        callback(currTime + timeToCall);
      }, timeToCall);
      lastTime = currTime + timeToCall;
      return id;
    };


  if (!window.cancelAnimationFrame)
    window.cancelAnimationFrame = function (id) {
      clearTimeout(id);
    };
})();

传递参数

function requestAnimation(a, b, c) {
  if () {


    window.requestAnimationFrame(function () {
      requestAnimation(a, b, c)
    })
  }
}

参考资料：

2022/9/6 14:42:53