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