Ruby's Louvre

每天学习一点点算法

导航

公告

requestAnimationFrame 动画接口

传统的 javascript 动画无非就是用setInterval函数来实现,这对于简单或对流畅性要求不高时不会有什么问题,但现在随着对用户体验的关注度不断提高,对动画的复杂程度和流畅性都有了更高的要求,传统动画显得捉襟见肘了。 为解决此问题浏览器提供了一个统一帧管理、提供监听帧的API,即requestAnimationFrame

优势:

  • 对于一个侦中对DOM的所有操作,只进行一次Layout和Paint。
  • 如果发生动画的元素被隐藏了,那么就不再去Paint。

使用方法:

  1. 调用requestAnimationFrame函数,传递一个callback参数,则在下一个动画帧时,会调用callback。
  2. 不传递参数地直接调用该函数,启动动画帧,下一个帧触发时,会同时触发window.onmozbeforepaint事件,可以通过注册该事件来进行动画。

第2种方法由于依赖于Firefox自己的事件,且beforepaint事件还没进入到标准中,所以不推荐使用,还是使用第1种方式比较好。此时,我们的动画逻辑可以变成这样:

  1. 记录当前时间startTime,作为动画开始的时间。
  2. 请求下一帧,带上回调函数。
  3. 下一帧触发时,回调函数的第一个参数为当前的时间,再与startTime进行比较,确定时间间隔ellapseTime。
  4. 判断ellapseTime是否已经超过事先设定的动画时间time,如果超过,则结束动画。
  5. 计算动画属性变化的差值differ = to – from,再确定在ellapseTime的时候应该变化多少step = differ / time * ellapseTime。
  6. 计算出现在应该变化到的位置Math.round(from + step),并重新对样式赋值。
  7. 继续请求下一帧。

DEMO:

浏览器的支持

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 10 webkitRequestAnimationFrame 4.0 (2.0) mozRequestAnimationFrame

目前分别基于WebKit (Chrome,Safari)和MineField (Firefox)架构的浏览器都开始支持requestAnimationFrame, 但其调用的接口还有差异: WebKit :webkitRequestAnimationFrame (chrome 10+) Firefox:mozRequestAnimationFrame (firefox 4.0(Gecko2.0)+) 对opera和IE现在还不支持,但以后应该是会支持的 opera:oRequestAnimationFrame IE: msRequestAnimationFrame

兼容处理:

每个浏览器对requestAnimationFrame函数的调用方法都有差别,所以再做一个简单的修正。 根据Firefox的特性来看,其mozRequestAnimationFrame提供的最高FPS为60,并且会根据每一帧的计算的耗时来进行调整,比如每一帧计算用了1s,那他只会提供1FPS的动画效果。 而Chrome的高版本同样也实现了这个函数,叫webkitRequestAnimationFrame,可以预见未来还会有Opera的oRequestAnimationFrame和IE的msRequestAnimationFrame,所以这里一并做一个简单的兼容处理:

 

requestAnimationFrame = window.requestAnimationFrame
|| window.mozRequestAnimationFrame
|| window.webkitRequestAnimationFrame
|| window.msRequestAnimationFrame
|| window.oRequestAnimationFrame
|| function(callback) {
setTimeout(callback, 1000 / 60);
};

posted on 2011-08-22 17:24 司徒正美 阅读(...) 评论(...) 编辑 收藏