js canvas图形(一)

2020-11-14  本文已影响0人  Viewwei

图形历史

早期的动画只要是通过定时器来触发动画效果。这种方式主要问题是因为浏览器对于时间间隔没办法做到统一,所以导致了每个浏览器的时间间隔不一致,

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)
            }

        })
上一篇 下一篇

猜你喜欢

热点阅读