深度解读如何使用requestAnimationFrame 高效精准地重绘平滑的动画-群英

上一篇：在ElementUI中因为关联对象给模型层没有给value-key赋值，导致下拉框点选后看不到值下一篇：三种安装方式搭建react typeScript项目

这篇文章主要介绍了“深度解读如何使用requestAnimationFrame 高效精准地重绘平滑的动画”相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇深度解读如何使用requestAnimationFrame 高效精准地重绘平滑的动画文章都会有所收获，下面我们一起来看看吧。

前言

很长时间以来，计时器和定时执行都是 JavaScript 动画最先进的工具。虽然 CSS 过渡和动画方便了开发者实现某些动画，但 JavaScript 动画领域多年来进展甚微。requestAnimationFrame() 方法应运而生，这个方法会告诉浏览器要执行动画了，于是浏览器可以通过最优方式确定重绘的时序。

早期定时动画

以前，在 JavaScript 中创建动画基本上就是使用 setInterval() 来控制动画的执行：

(function () {
  function updateAnimations() {
    doAnimation1();
    doAnimation2();
    // ...
  }
  setInterval(updateAnimations, 100);
})();

这种定时动画的问题在于，无法准确知晓循环之间的延时。

无论是 setInterval() 还是 setTimeout()，都是不能保证时间精度的。作为第二个参数的延时只能保证何时会把代码添加到浏览器的任务队列，并不能保证添加到队列就会立即执行。如果队列前面还有其他任务，那么就要等这些任务执行完再执行。

简单来讲，这里的毫秒延时不是指何时这些代码会执行，而是指到时候会把回调添加到任务队列。如果添加到队列后，主线程还被其他任务占用，那么回调就不会立即执行。

知道何时绘制下一帧是创造平滑动画的关键，所以 setInterval() 和 setTimeout() 的不精确是个大问题。

浏览器自身计时器的精度让这个问题雪上加霜。浏览器计时器的精度不足毫秒，最厉害的 Chrome 计时器精度为 4ms。更麻烦的是，浏览器又开始对切换到后台或不活跃的标签页中的计时器执行限流，因此即使将时间间隔设为最优，也免不了只能得到近似的结果。

屏幕刷新率

一般计算机显示器的屏幕刷新率都是 60HZ，基本上意味着每秒需要重绘 60 次。大多数浏览器会限制重绘频率，使其不超过屏幕的刷新率，因为超过屏幕刷新率用户也感知不到。

所以，实现平滑动画最佳的重绘时间间隔为 1000ms/60，大约 17 ms。以这个速度重绘可以实现最平滑的动画，因为这已经是浏览器的极限了。

requestAnimationFrame

requestAnimationFrame() 这个方法可以通知浏览器某些 JavaScript 代码要执行动画了，这样浏览器就可以在运行某些代码后进行适当的优化。

requestAnimationFrame() 这个方法接收一个参数，该参数是一个要在重绘屏幕前调用的函数。这个函数就是修改 DOM 样式以反映下一次重绘有什么变化的地方。为了实现动画循环，可以把多个 requestAnimationFrame() 调用串联起来，就像以前使用 setTimeout() 一样：

function updateProgress() {
  var div = document.getElementById("status");
  div.style.width = parseInt(div.style.width, 10) + 5 + "%";
  if (div.style.left != "100%") {
    requestAnimationFrame(updateProgress);
  }
}
requestAnimationFrame(updateProgress);

因为 requestAnimationFrame() 只会调用一次传入的函数，所以每次更新用户界面时需要再手动调用它一次。同时，也需要控制动画何时停止。结果就会得到非常平滑的动画。

requestAnimationFrame() 已经解决了浏览器不知道 JavaScript 动画何时开始的问题，以及最佳间隔时间是多少的问题。但是，如果我们想知道自己的代码实际的执行时间呢？同样有解决方案。

传给 requestAnimationFrame() 的函数实际上可以接收一个参数，该参数表示下次重绘的时间。这一点非常重要：requestAnimationFrame() 实际上把重绘任务安排在了未来一个已知的时间点上，而且通过这个参数告诉了开发者，那么基于这个参数，就可以更好地决定如何调优动画了：

function foo(t) {
  console.log(t);
  requestAnimationFrame(foo);
}
requestAnimationFrame(foo);

cancelAnimationFrame

const requestID = window.requestAnimationFrame((t) => {
  console.log(t);
});
window.cancelAnimationFrame(requestID);

通过 requestAnimationFrame 节流

支持这个方法的浏览器实际上会暴露出作为钩子的回调队列。所谓钩子，就是浏览器在执行下一次重绘之前的一个点。这个回调队列是一个可修改的函数列表，包含应该在重绘之前调用的函数。每次调用 requestAnimationFrame() 都会在队列上推入一个回调函数，队列的长度没有限制。

这个回调队列的行为不一定跟动画有关。通过 requestAnimationFrame() 递归地向队列中加入回调函数，可以保证每次重绘最多只调用一次回调函数，这是一个非常好的节流工具。在频繁执行影响页面外观的代码时（比如滚动事件监听器），可以利用这个回调队列进行节流。

先看一个原生实现，其中的滚动事件监听器每次触发都会调用名为 expensiveOperation()（耗时操作）的函数。当向下滚动网页时，这个事件很快就会被触发并执行成百上千次：

function expensiveOperation() {
  console.log("Invoked at", Date.now());
}
window.addEventListener("scroll", () => {
  expensiveOperation();
});

如果想把事件处理程序的调用限制在每次重绘之前，那么就可以把它封装到 requestAnimationFrame() 调用中：

function expensiveOperation() {
  console.log("Invoked at", Date.now());
}
window.addEventListener("scroll", () => {
  window.requestAnimationFrame(expensiveOperation);
});

这样会把所有回调的执行集中在重绘钩子，但不会过滤掉每次重绘的多余调用。我们可以定义一个标志变量，在回调中设置其状态，就能将多余的调用屏蔽：

let enqueued = false;
function expensiveOperation() {
  console.log("Invoked at", Date.now());
  enqueued = false;
}
window.addEventListener("scroll", () => {
  if (!enqueued) {
    enqueued = true;
    window.requestAnimationFrame(expensiveOperation);
  }
});

因为重绘是非常频繁的操作，所以这算不上是真正的节流。更好的方法是配合使用一个计时器来限制操作执行的频率。这样，计时器可以限制实际的操作执行间隔，而 requestAnimationFrame() 控制在浏览器的哪个渲染周期中执行：

let enabled = true;
function expensiveOperation() {
  console.log("Invoked at", Date.now());
}
window.addEventListener("scroll", () => {
  if (enabled) {
    enqueued = false;
    window.requestAnimationFrame(expensiveOperation);
    window.setTimeout(() => (enabled = true), 50);
  }
});

上面的例子将回调限制为大约 50ms 执行一次。

以上就是关于“深度解读如何使用requestAnimationFrame 高效精准地重绘平滑的动画”的介绍了，感谢各位的阅读，如果大家想要了解更多相关的内容，欢迎关注群英网络，小编每天都会为大家更新不同的知识。