1 files changed, 123 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/window/requestanimationframe/index.html b/files/zh-cn/web/api/window/requestanimationframe/index.html
new file mode 100644
index 0000000000..b0e36717ab
--- /dev/null
+++ b/files/zh-cn/web/api/window/requestanimationframe/index.html
@@ -0,0 +1,123 @@
+---
+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>