图形历史
早期的动画只要是通过定时器来触发动画效果。这种方式主要问题是因为浏览器对于时间间隔没办法做到统一,所以导致了每个浏览器的时间间隔不一致,
requestAnimationFrame
requestAnimationFrame()方法接受一个参数,此参数是一个要在重绘前调用的函数。(重绘:就是当元素的颜色之类发生变化浏览器就会重绘,回流:当元素的位置发生变化,浏览器就会发生回流)。使用cancelAnimationFrame方法可以取消requestAnimationFrame
requestAnimationFrame实现节流
在调用requestAnimationFrame重绘的过程中,会导致他触发多次,因此需要进行节流,所谓的节流就是减少他的触发次数,从而让他平稳的运行。节流的实例如下
let enqueued = false
window.addEventListener("scroll", () => {
if (!enqueued) {
enqueued = false
requestAnimationFrame(() => {
console.log("11111111111111111111")
})
window.setTimeout(() => enqueued=true,50)
}
})
网友评论