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