本站已年久失修,技术交流可以移步到 https://blog.pyzy.net
  所在位置:杂记 >> javascript >> requestAnimationFrame 试水
requestAnimationFrame 试水
发表于 九年前(2011-12-2 20:17:35) | 阅读 (790) | 评论 (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):
称谓(必填):  网站(选填):
上一篇:使用requestAnimationFrame更好的实现javascript动画(kimhou 译)  下一篇:【转】HTML 5 Web SQL Database初探     <<返回杂记列表