requestAnimationFrame 试水

发表于 十二年前(2011-12-2 20:17:35) | 阅读 (3197) | 评论 (0)

小测试了下：

webkit:
lastTime=0,newTime=0,frameCount=0,f=function(){ newTime=new Date()*1;lastTime=lastTime||newTime; frameCount++;document.body.innerHTML=[frameCount,newTime,newTime-lastTime].join(' | '); for(var i=0,e=2;i<999999;i++)e=e*i+i-e/2; lastTime=newTime;webkitRequestAnimationFrame(f)};lastTime=new Date()*1;webkitRequestAnimationFrame(f)

firefox:
lastTime=new Date()*1,newTime=0,frameCount=0,f=function(){ newTime=new Date()*1;lastTime=lastTime||newTime; for(var i=0,e=2;i<999999;i++)e=e*i+i-e/2+e-5*4/1.2;frameCount++;document.body.innerHTML=[frameCount,newTime,newTime-lastTime].join(' | ');  lastTime=newTime;mozRequestAnimationFrame(f)};mozRequestAnimationFrame(f)

浏览器会根据当前窗体状态决定该动画是否执行或是否减缓，比如最小化了、不是焦点窗口了、CPU负载过大了……

不用设置延迟时间，比较符合丢帧保时的思路，回调方法中只能用本帧与上一帧或开始时候的时差去计算应该到哪一帧了，和以往的setTimeout、setInterval比较起来，需要用不同的思路去理解；如果还想沿用以前的setXXX的用法不管浏览器窗体状态什么样都不停的执行，那么这个就不适用了。

杂记评论(0):