介绍一下 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()