window.requestAnimationFrame

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

修订内容

{{ SeeCompatTable() }}

概述

Tells the browser that you wish to perform an animation; this requests that the browser schedule a repaint of the window for the next animation frame.  The method takes as an argument a callback to be invoked before the repaint.

Note: 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
A parameter specifying a function to call when it's time to update your animation for the next repaint.
element {{ optional_inline() }}
A optional parameter (not used by Firefox or IE) specifying the element that visually bounds the entire animation. For canvas and WebGL, this should be the actual {{ HTMLElement("canvas") }} element. For other elements, you can leave out this parameter or provide it for a slightly more optimized experience.

返回值

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.

例子

requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                        window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

var start = window.mozAnimationStartTime || Date.now();  // 只有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>Tells the browser that you wish to perform an animation; this requests that the browser schedule a repaint of the window for the next animation frame.  The method takes as an argument a callback to be invoked before the repaint.</p>
<div class="note"><strong>Note:</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>A parameter specifying a function to call when it's time to update your animation for the next repaint.</dd> <dt><code>element</code> {{ optional_inline() }}</dt> <dd>A optional parameter (not used by Firefox or IE) specifying the element that visually bounds the entire animation. For canvas and WebGL, this should be the actual {{ HTMLElement("canvas") }} element. For other elements, you can leave out this parameter or provide it for a slightly more optimized experience.</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="brush: js">requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                        window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

var start = window.mozAnimationStartTime || Date.now();  // 只有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>
恢复到这个版本