为什么不要使用setInterval绘制动画

最新推荐文章于 2023-03-08 14:07:58 发布

不二博客

最新推荐文章于 2023-03-08 14:07:58 发布

阅读量280

点赞数

本文链接：https://blog.csdn.net/qq_39157944/article/details/125796357

版权

定时器 requestAnimationFrame 动画流畅性过度渲染浏览器事件循环

关键词由CSDN通过智能技术生成

在日常开发的过程中，动画是不可避免的应用，而实现动画效果的方法有很多，我们优先使用 CSS 来实现一些简单的动画，当然也会难免遇见一些复杂的动画效果，此时我们需要借助 JavaScript 来实现动画效果。

而通过 JavaScript 来绘制动画是大多数使用的是定时器实现，比如我们通过定时器使元素向右平移200px，即每10ms向右平移1px。

function starMoventEl1() {
  let x = 0;
  timer = setInterval(() => {
    x++;
    El1.style.transform = "translateX(" + x + "px)";
    if (x >= 200) {
      clearInterval(timer);
    }
  }, 10);
}

我们来计算一下，我们以每10ms的间隔使元素向右偏移了一个1px，那么元素的位置在1s内被我们修改100次。

大部分的计算机屏幕刷新率为60Hz，以60Hz为例在1s内最大可以渲染出60帧的图像。

而我们的通过定时器创建的动画每秒钟却创建了100帧的图像，那么在某一帧上存在多次的渲染，也就是说在某一帧中我们的元素可能移动了1px，在其他某一帧中移动了2px，而这就造成了页面的过度渲染，同时也会造成动画的卡顿。

那么让定时器1s内只执行60次，那么是不是页面的元素确保在执行动画的过程中每一帧都只移动1px呢？

答案当然是否定的，因为不同的浏览器，不用的设备和机器性能各不相同，而屏幕刷新频率也尽不相同。

其次因为我们的浏览器事件循环（Event Loop） 的机制，定时器将我们的任务放入到异步队列中执行，只有当主线程上的任务执行完成后才回去检查异步队列的任务是否需要执行。

异步队列中又分为宏任务和微任务，setInterval 的回调被放置宏任务队列之中，浏览器需要优先执行微任务队列中的任务后才能执行宏任务队列。

因此 setInterval 实际执行的时间是不可靠的，所在在执行动画的过程因为执行时间不精确的问题出现空帧和重复渲染的情况。

在以上问题的核心就是我们无法保证执行的时机，而这一问题浏览器也为我们提供 window.requestAnimationFrame() 来解决。

window.requestAnimationFrame() 告诉浏览器，你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画，该回调函数会在浏览器下一次重绘之前执行。

let start;
function starMoventEl2(timestamp) {
  if (start === undefined) start = timestamp;
  const elapsed = timestamp - start;
  El2.style.transform = "translateX(" + Math.min(0.1 * elapsed, 200) + "px)";
  if (elapsed < 2000) {
    window.requestAnimationFrame(starMoventEl2);
  }
}
window.requestAnimationFrame(starMoventEl2);