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

有这样一个需求:

  • 3s 把宽度从 100px 变成 640px,即增加 540px
  • 60帧/s,3s 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()

标签: none

添加新评论