diff options
Diffstat (limited to 'files/zh-tw/web/api/window.requestanimationframe')
| -rw-r--r-- | files/zh-tw/web/api/window.requestanimationframe/index.html | 94 |
1 files changed, 0 insertions, 94 deletions
diff --git a/files/zh-tw/web/api/window.requestanimationframe/index.html b/files/zh-tw/web/api/window.requestanimationframe/index.html deleted file mode 100644 index 55aa85d292..0000000000 --- a/files/zh-tw/web/api/window.requestanimationframe/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -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 < 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> |
