介绍一下 RAF（requestAnimationFrame）

requestAnimationFrame

想要动画流畅，更新频率要 60帧/s，即 16.67ms 更新一次视图
setTimeout 要手动控制频率，而 RAF 浏览器会自动控制
后台标签或隐藏 iframe 中，RAF 会暂停，而 setTimeout 依然执行

有这样一个需求：

3s 把宽度从 100px 变成 640px，即增加 540px
60帧/s，3s 180 帧，每帧变化 540/180=3px

<style>
   #div{
       width: 100px;
       height: 100px;
       background-color: red;
   }
</style>
<div id="div"></div>

使用 setTimeout 和 RAF 的实现方式

const div = document.getElementById('div');
let curWidth = 100;
const maxWidth = 640;
// setTimeout
function animate() {
  curWidth = curWidth + 3;
  div.style.width = curWidth + 'px';
  if (curWidth < maxWidth) {
    // 手动控制时间，如果每次增加 1px，则需要时间 16.7/3
    setTimeout(animate, 16.7);
  }
}
animate();
// RAF
function animateRAF() {
  curWidth = curWidth + 3;
  div.style.width = curWidth + 'px';
  if (curWidth < maxWidth) {
    // 浏览器自动控制
    window.requestAnimationFrame(animateRAF);
  }
}
animateRAF();

介绍一下 RAF（requestAnimationFrame） ​

介绍一下 RAF（requestAnimationFrame）