概述
window.requestAnimationFrame()
这个方法是用来在页面重绘之前,通知浏览器调用一个指定的函数,以满足开发者操作动画的需求。这个方法接受一个函数为参,该函数会在重绘前调用。
注意: 如果想得到连贯的逐帧动画,函数中必须重新调用 requestAnimationFrame()。
如果你想做逐帧动画的时候,你应该用这个方法。这就要求你的动画函数执行会先于浏览器重绘动作。通常来说,被调用的频率是每秒60次,但是一般会遵循W3C标准规定的频率。如果是后台标签页面,重绘频率则会大大降低。
回调函数只会被传入一个DOMHighResTimeStamp
参数,这个参数指示当前被 requestAnimationFrame 序列化的函数队列被触发的时间。因为很多个函数在这一帧被执行,所以每个函数都将被传入一个相同的时间戳,尽管经过了之前很多的计算工作。这个数值是一个小数,单位毫秒,精确度在 10 µs。
语法
requestID = window.requestAnimationFrame(callback); // Firefox 23 / IE10 / Chrome / Safari 7 (incl. iOS)
requestID = window.mozRequestAnimationFrame(callback
); // Firefox < 23
requestID = window.webkitRequestAnimationFrame(callback); // Older versions Chrome/Webkit
参数
callback
- 在每次需要重新绘制动画时,会调用这个参数所指定的函数。这个回调函数会收到一个参数,这个
DOMHighResTimeStamp
类型的参数指示当前时间距离开始触发 requestAnimationFrame 的回调的时间。
返回值
requestID
是一个长整型非零值,作为一个唯一的标识符.你可以将该值作为参数传给 window.cancelAnimationFrame()
来取消这个回调函数。
例子
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; var start = null; var d = document.getElementById('SomeElementYouWantToAnimate'); function step(timestamp) { if (start === null) start = 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 24.0 |
4.0 moz [1] |
10.0 |
(Yes) -o 15.0 |
|
requestID return value |
23.0 webkit 24.0 |
11.0 (11.0) moz | 10.0 | (Yes) -o 15.0 |
? |
Feature | Android | BlackBerry Browser | Chrome for Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|
Basic support | ? | 10.0 webkit |
16.0 webkit |
? | ? | ? | ? |
requestID return value |
? | ? | 11.0 (11.0) moz | ? | ? | ? |
Gecko备注
在Gecko 11.0 (Firefox 11.0 / Thunderbird 11.0 / SeaMonkey 2.8)之前,调用mozRequestAnimationFrame()方法时可以不传入任何参数.目前,该方法的
callback参数是必须的.
规范
HTML 5.1-Web application APIs:Animation FramesPR
相关链接
window.mozAnimationStartTime
window.cancelAnimationFrame()
- mozRequestAnimationFrame - Blog post
- requestAnimationFrame for smart animating - Blog post
- Animating with javascript: from setInterval to requestAnimationFrame - Blog post
- Using PC Hardware more efficiently in HTML5: New Web Performance APIs, Part 1 - Blog post