我们经常用setInterval来实现动画,其实这种做法不是太好,因为不同浏览器的刷新频率也不一样(一般认为设置16为最佳,按每秒60帧算,1000/60≈16.67)
var dis = 0,timer = 0; clearInterval(timer); timer = setInterval(function(){ div.style.left = ++dis; if(dis>=50) clearInterval(timer) },16)
实现js动画最好的是requestAnimationFrame:
requestAnimationFrame 比起 setTimeout、setInterval的优势主要有两点:
1、requestAnimationFrame 会把每一帧中的所有DOM操作集中起来,在一次重绘或回流中就完成,并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率,一般来说,这个频率为每秒60帧。
2、在隐藏或不可见的元素中,requestAnimationFrame将不会进行重绘或回流,这当然就意味着更少的的cpu,gpu和内存使用量。
var dis =0; function animation(){ requestAnimationFrame(function(){ div.style.left = ++dis; if(disx<50) animation(); }) } animation();