1 files changed, 94 insertions, 0 deletions
diff --git a/files/zh-tw/web/api/window/requestanimationframe/index.html b/files/zh-tw/web/api/window/requestanimationframe/index.html
new file mode 100644
index 0000000000..55aa85d292
--- /dev/null
+++ b/files/zh-tw/web/api/window/requestanimationframe/index.html
@@ -0,0 +1,94 @@
+---
+title: Window.requestAnimationFrame()
+slug: Web/API/Window.requestAnimationFrame
+translation_of: Web/API/window/requestAnimationFrame
+---
+<div>{{APIRef}}</div>
+
+<p><strong><code>window.requestAnimationFrame()</code></strong>方法通知瀏覽器我們想要產生動畫，並且要求瀏覽器在下次重繪畫面前呼叫特定函數更新動畫。這個方法接受一個引數作為下次重繪前調用的回呼函數。</p>
+
+<div class="note"><strong>Note:</strong> 若是想要在下次重繪時產生另一個動畫，這個回呼函數內必須自行呼叫 requestAnimationFrame()。</div>
+
+<p>當準備好更新頁面上的動畫時應當呼叫這個方法。這表示向瀏覽器請求在下次重繪前呼叫這個動畫函數。回呼的次數通常落在每秒 60 次，但通常會根據 W3C 的建議符合多數瀏覽器重新整理的頻率。當頁面處於背景或隱藏狀態時 {{ HTMLElement("iframe") }} ，多數的瀏覽器會暫停 <code>requestAnimationFrame()</code> 的呼叫，從而改善效能表現及電池壽命。</p>
+
+<p>回呼方法會得到一個 {{domxref("DOMHighResTimeStamp")}} 的引數，作為指示目前的時間（基於 <a href="/en-US/docs/Web/API/DOMHighResTimeStamp#The_time_origin">time origin</a> 之後經過的毫秒數）。當 <code>requestAnimationFrame()</code> 佇列了數個回呼並且在同一幀開始觸發多個回呼時，儘管每一個之前的回呼在運作時會消耗一定的時間，但它們都會取得同樣的時間戳記。時間戳記是由十進位數字表示的毫秒且最小的精準度為 1 毫秒（1000 µs）。</p>
+
+<h2 id="Syntax" name="Syntax">語法</h2>
+
+<pre class="syntaxbox">window.requestAnimationFrame(callback);
+</pre>
+
+<h3 id="Parameters" name="Parameters">參數</h3>
+
+<dl>
+ <dt><code>回呼</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">var start = null;
+var element = document.getElementById('SomeElementYouWantToAnimate');
+
+function step(timestamp) {
+  if (!start) start = timestamp;
+  var progress = timestamp - start;
+  element.style.transform = 'translateX(' + Math.min(progress / 10, 200) + 'px)';
+  if (progress &lt; 2000) {
+    window.requestAnimationFrame(step);
+  }
+}
+
+window.requestAnimationFrame(step);
+</pre>
+
+<h2 id="備註">備註</h2>
+
+<p>Edge 低於 17 的版本和 Internet Explorer 無法保證在繪製循環前觸發 <code>requestAnimationFrame</code>。</p>
+
+<h2 id="Specification" name="Specification">規格</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#animation-frames', 'requestAnimationFrame')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change, supersedes the previous one.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('RequestAnimationFrame', '#dom-windowanimationtiming-requestanimationframe', 'requestAnimationFrame')}}</td>
+   <td>{{Spec2('RequestAnimationFrame')}}</td>
+   <td>Initial definition</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>