window.requestAnimationFrame

  • 版本网址缩略名: DOM/window.requestAnimationFrame
  • 版本标题: window.requestAnimationFrame
  • 版本 id: 239189
  • 创建于:
  • 创建者: ziyunfei
  • 是否是当前版本?
  • 评论 15 words added, 42 words removed

修订内容

{{ SeeCompatTable() }}

概述

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

备注: Your callback routine must itself call requestAnimationFrame() unless you want the animation to stop.

You should call this method whenever you're ready to update your animation onscreen, to request that your repaint be scheduled. The repaint may occur up to 60 times per second for foreground tabs, but may be throttled to a lower rate in background tabs.

The callback method is passed a single argument, which indicates the time at which the animation frame is scheduled to occur.

Note: This method, as well as Firefox's  {{ domxref("window.mozAnimationStartTime") }} property, is experimental and non-standard. It's intended for you to experiment with and offer feedback on. It may not be supported over the long term, although we hope that this API or one like it will become standard eventually.

语法

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

参数

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

返回值

requestID is a long integer value that uniquely identifies the entry in the callback list. This is a non-zero value, but you may not make any other assumptions about its value. You can pass this value to {{ domxref("window.cancelAnimationFrame()") }} to cancel the refresh callback request.

例子

(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);

浏览器兼容性

{{ CompatibilityTable() }}

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

10 {{ property_prefix("webkit") }} 

{{ CompatGeckoDesktop("2.0") }} {{ property_prefix("moz") }} 

10.0 (PP6/Release Preview)
10 PP2 {{ property_prefix("ms") }}

{{ CompatNo() }}

{{ CompatNightly("Safari") }} {{ property_prefix("webkit") }}

requestID return value {{ CompatUnknown() }} {{ CompatGeckoDesktop("11.0") }} {{ property_prefix("moz") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
Feature Android BlackBerry Browser Chrome for Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} PlayBook 2.1

0.16 {{ property_prefix("webkit") }} 

{{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
requestID return value {{ CompatUnknown() }}   {{ CompatUnknown() }} {{ CompatGeckoMobile("11.0") }} {{ property_prefix("moz") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

Gecko备注

在Gecko 11.0 {{ geckoRelease("11.0") }}之前,调用mozRequestAnimationFrame()方法时可以不传入任何参数.目前,该方法的callback参数是必须的.

规范

{{ spec("http://www.w3.org/TR/animation-timing/#requestAnimationFrame", "Timing control for script-based animations: requestAnimationFrame", "WD") }}

相关链接

{{ languages( {"en": "en/DOM/window.requestAnimationFrame" } ) }}

修订版来源

<p>{{ SeeCompatTable() }}</p>
<h2 name="Summary">概述</h2>
<p>告诉浏览器,你想要执行一个动画,<span class="long_text short_text" id="result_box" lang="zh-CN"><span>该请求要求浏览器</span><span>安排一下</span><span>下一</span><span>帧动画显示时需要进行的</span></span><span class="long_text short_text" id="result_box" lang="zh-CN"><span>浏览器</span><span>窗口的</span><span>重绘</span></span>.该方法接受一个回调函数作为参数,该回调函数会在窗口重绘之前被调用.</p>
<div class="note"><strong>备注:</strong> Your callback routine must itself call <code>requestAnimationFrame()</code> unless you want the animation to stop.</div>
<p>You should call this method whenever you're ready to update your animation onscreen, to request that your repaint be scheduled. The repaint may occur up to 60 times per second for foreground tabs, but may be throttled to a lower rate in background tabs.</p>
<p>The callback method is passed a single argument, which indicates the time at which the animation frame is scheduled to occur.</p>
<div class="note"><strong>Note:</strong> This method, as well as Firefox's  {{ domxref("window.mozAnimationStartTime") }} property, is experimental and non-standard. It's intended for you to experiment with and offer feedback on. It may not be supported over the long term, although we hope that this API or one like it will become standard eventually.</div><h2 name="Syntax">语法</h2>
<pre class="eval"><em>requestID</em> = window.mozRequestAnimationFrame(<em>callback</em>);               // Firefox
window.msRequestAnimationFrame(<em><code>callback</code></em>);                // IE 10 PP2+
window.webkitRequestAnimationFrame(callback<em>[, element]</em>); // Chrome/Webkit
</pre>
<h2><span>参数</span></h2>
<dl> <dt><code>callback</code></dt> <dd>在每次需要重新绘制动画时,会调用这个参数所指定的函数.</dd> <dt><code>element</code> {{ optional_inline() }}</dt> <dd>一个可选参数 (Firefox 和 IE 不支持), 指定一个包含了整个动画可见区域的元素.对于canvas和WebGL动画来说,该元素就是对应的{{ HTMLElement("canvas") }}元素.如果是其他类型的元素,则你可以省略这个参数,也可以提供一个参数,以便程序进行优化.</dd>
</dl><h2>返回值</h2>
<p><code>requestID</code> is a long integer value that uniquely identifies the entry in the callback list. This is a non-zero value, but you may not make any other assumptions about its value. You can pass this value to {{ domxref("window.cancelAnimationFrame()") }} to cancel the refresh callback request.</p>
<h2 name="Notes">例子</h2>
<pre class="deki-transform">(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 &lt; 2000) {
    requestAnimationFrame(step);
  }
}
requestAnimationFrame(step);
</pre>
<h2 name="Browser_Compatibility">浏览器兼容性</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari (WebKit)</th> </tr> <tr> <td>Basic support</td> <td> <p>10 {{ property_prefix("webkit") }} </p> </td> <td> <p>{{ CompatGeckoDesktop("2.0") }} {{ property_prefix("moz") }} </p> </td> <td> <p>10.0 (PP6/Release Preview)<br> 10 PP2 {{ property_prefix("ms") }}</p> </td> <td>{{ CompatNo() }}</td> <td> <p>{{ CompatNightly("Safari") }} {{ property_prefix("webkit") }}</p> </td> </tr> <tr> <td><code>requestID</code> return value</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatGeckoDesktop("11.0") }} {{ property_prefix("moz") }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> </tbody> </table>
</div>
<div id="compat-mobile"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Android</th> <th>BlackBerry Browser</th> <th>Chrome for Android</th> <th>Firefox Mobile (Gecko)</th> <th>IE Phone</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatUnknown() }}</td> <td>PlayBook 2.1</td> <td> <p>0.16 {{ property_prefix("webkit") }} </p> </td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> <tr> <td><code>requestID</code> return value</td> <td>{{ CompatUnknown() }}</td> <td> </td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatGeckoMobile("11.0") }} {{ property_prefix("moz") }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> </tbody> </table>
</div>
<h3 name="Specification">Gecko备注</h3>
<p>在Gecko 11.0 {{ geckoRelease("11.0") }}之前,调用<code>mozRequestAnimationFrame()方法时可以不传入任何参数.目前,该方法的</code><code>callback参数是必须的.</code></p><h2 name="Specification">规范</h2>
<p>{{ spec("http://www.w3.org/TR/animation-timing/#requestAnimationFrame", "Timing control for script-based animations: requestAnimationFrame", "WD") }}</p>
<h2>相关链接</h2>
<ul> <li>{{ domxref("window.mozAnimationStartTime") }}</li> <li>{{ domxref("window.cancelAnimationFrame()") }}</li> <li><a class="external" href="http://weblogs.mozillazine.org/roc/archives/2010/08/mozrequestanima.html">mozRequestAnimationFrame</a> - Blog post</li> <li><a class="external" href="http://paulirish.com/2011/requestanimationframe-for-smart-animating/">requestAnimationFrame for smart animating</a> - Blog post</li> <li><a class="external" href="http://hacks.mozilla.org/2011/08/animating-with-javascript-from-setinterval-to-requestanimationframe/">Animating with javascript: from setInterval to requestAnimationFrame</a> - Blog post</li> <li><a class="external" href="http://blogs.msdn.com/b/ie/archive/2011/07/05/using-pc-hardware-more-efficiently-in-html5-new-web-performance-apis-part-1.aspx">Using PC Hardware more efficiently in HTML5: New Web Performance APIs, Part 1</a> - Blog post</li>
</ul>
<p>{{ languages( {"en": "en/DOM/window.requestAnimationFrame" } ) }}</p>
恢复到这个版本