window.requestAnimationFrame

这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀.由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变.

概述

告诉浏览器,你想要执行一个动画,该请求要求浏览器提前安排一下下一帧动画显示时需要进行的浏览器窗口的重绘.该方法接受一个回调函数作为参数,该回调函数会在窗口重绘之前被调用.

注意: 你的回调函数中必须再次调用 requestAnimationFrame() 方法,除非你想让动画停止.

你应该在你已经准备好更新屏幕上的动画的时候调用这个方法, 来请求安排你的动画的重绘.如果是前台标签页,则重绘频率可能高达每秒60次,如果是后台标签页,则重绘频率会大大降低.

回调函数只会被传入一个参数,该参数表明了下一次的动画帧将在何时显示.

注意: 该方法,以及Firefox私有的 window.mozAnimationStartTime 属性, 目前是试验性质的. 它的目的就是让用户试验性的进行使用,并提供反馈.它们可能会无法保持长期性的支持,虽然我们很希望这些API最终会成为事实上的标准.

语法

requestID = window.mozRequestAnimationFrame(callback);               // Firefox
window.msRequestAnimationFrame(callback);                // IE 10 PP2+
window.webkitRequestAnimationFrame(callback[, element]); // Chrome/Webkit

参数

callback
在每次需要重新绘制动画时,会调用这个参数所指定的函数.
element 可选
一个可选参数 (Firefox 和 IE 不支持), 指定一个包含了整个动画可见区域的元素.对于canvas和WebGL动画来说,该元素就是对应的<canvas>元素.如果是其他类型的元素,则你可以省略这个参数,也可以提供一个参数,以便程序进行优化.

返回值

requestID 是一个长整型的值,作为一个唯一的标识符.你可以将该值作为参数传给 window.cancelAnimationFrame() 来取消所请求的下一次执行的回调函数,除此之外,该值没有什么其他用处了.

例子

(function() {
  var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                              window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
  window.requestAnimationFrame = requestAnimationFrame;
})();

var start = window.mozAnimationStartTime;  // 只有Firefox支持mozAnimationStartTime属性,其他浏览器可以使用Date.now()来替代.

function step(timestamp) {
  var progress = timestamp - start;
  d.style.left = Math.min(progress/10, 200) + "px";
  if (progress < 2000) {
    requestAnimationFrame(step);
  }
}
requestAnimationFrame(step);

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support

10 webkit 

4.0 (2.0) moz 

23 脱前缀

10.0 (PP6/Release Preview)
10 PP2 ms

Not supported

Nightly build webkit

requestID return value ? 11.0 (11.0) moz ? ? ?
Feature Android BlackBerry Browser Chrome for Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? PlayBook 2.1

0.16 webkit 

? ? ? ?
requestID return value ?   ? 11.0 (11.0) moz ? ? ?

Gecko备注

在Gecko 11.0 (Firefox 11.0 / Thunderbird 11.0 / SeaMonkey 2.8)之前,调用mozRequestAnimationFrame()方法时可以不传入任何参数.目前,该方法的callback参数是必须的.

规范

Timing control for script-based animations: requestAnimationFrameWD

相关链接

Document Tags and Contributors

Contributors to this page: ziyunfei
最后编辑者: ziyunfei,