---
title: window.requestAnimationFrame
slug: Web/API/Window/requestAnimationFrame
tags:
  - API
  - DOM
  - DOM Reference
  - Intermediate
  - JavaScript timers
  - Method
  - NeedsBrowserCompatibility
translation_of: Web/API/window/requestAnimationFrame
---
<div>{{APIRef}}</div>

<p><strong><code>window.requestAnimationFrame()</code></strong> 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行</p>

<div class="note"><strong>注意：若你想在浏览器下次重绘之前继续更新下一帧动画，那么回调函数自身必须再次调用<code>window.requestAnimationFrame()</code></strong></div>

<p>当你准备更新动画时你应该调用此方法。这将使浏览器在下一次重绘之前调用你传入给该方法的动画函数(即你的回调函数)。回调函数执行次数通常是每秒60次，但在大多数遵循W3C建议的浏览器中，回调函数执行次数通常与浏览器屏幕刷新次数相匹配。为了提高性能和电池寿命，因此在大多数浏览器里，当<code>requestAnimationFrame()</code> 运行在后台标签页或者隐藏的{{ HTMLElement("iframe") }} 里时，<code>requestAnimationFrame()</code> 会被暂停调用以提升性能和电池寿命。</p>

<p>回调函数会被传入{{domxref("DOMHighResTimeStamp")}}参数，{{domxref("DOMHighResTimeStamp")}}指示当前被 <code>requestAnimationFrame()</code> 排序的回调函数被触发的时间。在同一个帧中的多个回调函数，它们每一个都会接受到一个相同的时间戳，即使在计算上一个回调函数的工作负载期间已经消耗了一些时间。该时间戳是一个十进制数，单位毫秒，最小精度为1ms(1000μs)。</p>

<div class="blockIndicator warning">
<p>请确保总是使用第一个参数(或其它获得当前时间的方法)计算每次调用之间的时间间隔，否则动画在高刷新率的屏幕中会运行得更快。请参考下面例子的做法。</p>
</div>

<h2 id="Syntax" name="Syntax">语法</h2>

<pre class="syntaxbox notranslate">window.requestAnimationFrame(callback);
</pre>

<h3 id="Parameters" name="Parameters">参数</h3>

<dl>
 <dt><code>callback</code></dt>
 <dd>下一次重绘之前更新动画帧所调用的函数(即上面所说的回调函数)。该回调函数会被传入{{domxref("DOMHighResTimeStamp")}}参数，该参数与{{domxref('performance.now()')}}的返回值相同，它表示<code>requestAnimationFrame()</code> 开始去执行回调函数的时刻。</dd>
</dl>

<h3 id="返回值">返回值</h3>

<p>一个 <code>long</code> 整数，请求 ID ，是回调列表中唯一的标识。是个非零值，没别的意义。你可以传这个值给 {{domxref("window.cancelAnimationFrame()")}} 以取消回调函数。</p>

<h2 id="Notes" name="Notes">范例</h2>

<pre class="brush: js notranslate">const element = document.getElementById('some-element-you-want-to-animate');
let start;

function step(timestamp) {
  if (start === undefined)
    start = timestamp;
  const elapsed = timestamp - start;

  //这里使用`Math.min()`确保元素刚好停在200px的位置。
  element.style.transform = 'translateX(' + Math.min(0.1 * elapsed, 200) + 'px)';

  if (elapsed &lt; 2000) { // 在两秒后停止动画
    window.requestAnimationFrame(step);
  }
}

window.requestAnimationFrame(step);</pre>

<h2 id="Specification" name="Specification">规范</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col"><strong>规范</strong></th>
   <th scope="col"><strong>状态</strong></th>
   <th scope="col">注解</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', '#animation-frames', 'requestAnimationFrame')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>无改变，取代旧版</td>
  </tr>
  <tr>
   <td>{{SpecName('RequestAnimationFrame', '#dom-windowanimationtiming-requestanimationframe', 'requestAnimationFrame')}}</td>
   <td>{{Spec2('RequestAnimationFrame')}}</td>
   <td>初步定义</td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>

<div>


<p>{{Compat("api.Window.requestAnimationFrame")}}</p>
</div>

<h2 id="See_also" name="See_also">参阅</h2>

<ul>
 <li>{{domxref("Window.mozAnimationStartTime")}}</li>
 <li>{{domxref("Window.cancelAnimationFrame()")}}</li>
 <li><a href="http://weblogs.mozillazine.org/roc/archives/2010/08/mozrequestanima.html">mozRequestAnimationFrame</a> - Blog post</li>
 <li><a href="http://paulirish.com/2011/requestanimationframe-for-smart-animating/">requestAnimationFrame for smart animating</a> - Blog post</li>
 <li><a 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 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>
 <li><a href="http://www.testufo.com/#test=animation-time-graph" title="http://www.testufo.com/#test=animation-time-graph">TestUFO: Test your web browser for requestAnimationFrame() Timing Deviations</a></li>
 <li>Paul Irish: <a class="external external-icon" href="http://updates.html5rocks.com/2012/05/requestAnimationFrame-API-now-with-sub-millisecond-precision">requestAnimationFrame API: now with sub-millisecond precision</a></li>
</ul>

<div id="gtx-anchor" style="position: absolute; left: 233px; top: 1643px; width: 325.969px; height: 20px;"></div>

<div class="jfk-bubble gtx-bubble">
<div class="jfk-bubble-content-id" id="bubble-3">
<div id="gtx-host" style="max-width: 400px;"></div>
</div>

<div class="jfk-bubble-closebtn-id jfk-bubble-closebtn"></div>

<div class="jfk-bubble-arrow-id jfk-bubble-arrow jfk-bubble-arrowdown" style="left: 143px;">
<div class="jfk-bubble-arrowimplbefore"></div>

<div class="jfk-bubble-arrowimplafter"></div>
</div>
</div>