js中的requestAnimationFrame与cancelAnimationFrame

js中的requestAnimationFrame与cancelAnimationFrame

使用setTimout()或者setInterval()这两个定时器函数实现动画是最为原始简单的方式,但是缺点也很大,最重要的一个缺点就是有可能出现丢帧现象。

requestAnimationFrame

requestAnimationFrame会把每一帧中的所有DOM操作集中起来,在一次重绘或回流中就完成,并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率,一般来说,这个频率为每秒60帧。

cancelAnimationFrame

cancelAnimationFrame与clearInterval用法一样,用来清除动画

效果如图:在这里插入图片描述
在这里插入图片描述

代码实例如下:





Document



    
0%

你可能感兴趣的:(javascript,js)