blob: 55aa85d292d3a0c8af877b0003c867ec934b3702 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
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 < 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>
|
