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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
|
---
title: Window.requestAnimationFrame()
slug: Web/API/Window/requestAnimationFrame
tags:
- API
- DOM
- Metodă
translation_of: Web/API/window/requestAnimationFrame
---
<p>{{APIRef}}<br>
Metoda <strong><code>Window.requestAnimationFrame()</code></strong> informuje przeglądarkę o zamiarze wykonania animacji i żąda od przeglądarki wywołania określonej funkcji w celu odświeżenia animacji przed następnym odmalowaniem. Argumentem metody jest funkcja (<em>callback</em>) do wywołania przed następnym odmalowaniem (odświeżeniem kanwy).</p>
<div class="note"><strong>Uwaga:</strong> Twoja funkcja musi samodzielnie wywołać <code>requestAnimationFrame(),</code> jeżeli chcesz odmalować kolejną ramkę animacji.</div>
<p>Należy wywołać tą metodą za każdym razem, gdy jesteś gotowy do odświeżenia swojej animacji na ekranie. Spowoduje to żądanie od przeglądarki wykonania twojej funkcji przed następnym odmalowaniem. Częstotliwość wykonywania funkcji wynosi zazwyczaj 60 razy na sekundę, jednakże według rekomendacji W3C w większości przeglądarek odpowiada częstotliwości odświeżania ekranu. Ta częstotliwość może zostać zredukowana do niższej wartości, gdy kod wykonywany jest w zakładce pozostającej w tle lub w ukrytej {{ HTMLElement("iframe") }} w celu poprawienia wydajności lub przedłużenia żywotności baterii.</p>
<p>Wywoływanej funkcji przekazywany jest pojedynczy argument {{domxref("DOMHighResTimeStamp")}}, który zawiera aktualny czas rozpoczęcia wykonywania tej funkcji, wstawionej do kolejki przez wywołanie <code>requestAnimationFrame</code>. Wiele różnych funkcji wywołanych w jednej ramce otrzyma jednakże tę samą wartość znacznika czasu, niezależnie od czasu spędzonego wykonaniu obliczeń w poprzedzającej funkcji. Znacznik czasu jest liczbą dziesiętną wyrażoną w milisekundach z maksymalną dokładnością 1ms (1000 µs).</p>
<h2 id="Syntax" name="Syntax">Składnia</h2>
<pre class="syntaxbox">window.requestAnimationFrame(callback);
</pre>
<h3 id="Parameters" name="Parameters">Parametry</h3>
<dl>
<dt><code>callback</code></dt>
<dd>Parametr określający funkcję do wywołania, gdy nadchodzi czas odświeżenia animacji przed następnym odmalowaniem. Przekazywana funkcja przyjmuje pojedynczy argument {{domxref("DOMHighResTimeStamp")}}, który określa aktualny czas (zwrócony przez {{domxref('Performance.now()')}} ) w momencie rozpoczęcia przez <code>requestAnimationFrame</code> uruchamiania skolejkowanych wcześniej funkcji.</dd>
</dl>
<h3 id="Wartość_zwracana">Wartość zwracana</h3>
<p>Wartość typu <code>long</code> integer będącą identyfikatorem żądania, który unikalnie określa pozycję na liście funkcji do wykonania. Jest to niezerowa wartość, jednakże nie wolno przyjmować żadnych innych założeń dotyczących wartości tego identyfikatora. Możesz przekazać tę wartość do {{domxref("Window.cancelAnimationFrame()")}} aby anulować żądanie wywołania funkcji do odświeżenia.</p>
<h2 id="Notes" name="Notes">Przykład</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.left = Math.min(progress/10, 200) + "px";
if (progress < 2000) {
window.requestAnimationFrame(step);
}
}
window.requestAnimationFrame(step);
</pre>
<h2 id="Specification" name="Specification">Specyfikacja</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specyfikacja</th>
<th scope="col">Status</th>
<th scope="col">Komentarz</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', '#animation-frames', 'requestAnimationFrame')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td>Brak zmian, zastępuje poprzednią.</td>
</tr>
<tr>
<td>{{SpecName('RequestAnimationFrame', '#dom-windowanimationtiming-requestanimationframe', 'requestAnimationFrame')}}</td>
<td>{{Spec2('RequestAnimationFrame')}}</td>
<td>Wstępna definicja</td>
</tr>
</tbody>
</table>
<h2 id="Zgodność_przeglądarek">Zgodność przeglądarek</h2>
<div>{{CompatibilityTable}}</div>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Basic support</td>
<td>10.0 {{property_prefix("webkit")}}<br>
24.0 <sup>3</sup></td>
<td>4.0 {{property_prefix("moz")}} <sup>1 4</sup><br>
23 <sup>2</sup></td>
<td>10.0</td>
<td>{{compatversionunknown}} {{property_prefix("-o")}}<br>
15.0</td>
<td>6.0 {{property_prefix("webkit")}}<br>
6.1</td>
</tr>
<tr>
<td>return value</td>
<td>23.0</td>
<td>{{CompatGeckoDesktop("11.0")}}</td>
<td>10.0</td>
<td>{{compatversionunknown}}</td>
<td>{{compatversionunknown}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Chrome for Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>4.4</td>
<td>16.0 {{property_prefix("webkit")}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>14.0</td>
<td>7.0<br>
6.0 {{property_prefix("webkit")}}</td>
</tr>
<tr>
<td><code>requestID</code> return value</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatGeckoMobile("11.0")}} {{property_prefix("moz")}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<p><sup>1</sup> Przed Gecko 11.0 {{geckoRelease("11.0")}}, <code>mozRequestAnimationFrame()</code> mogłobyć wywołane bez parametru. To nie jest dalej wspierane, gdyż raczej nie stanie się częścią standardu.</p>
<p><sup>2</sup> Parametrem wywoływanej funkcji jest {{domxref("DOMTimeStamp")}} zamiast {{domxref("DOMHighResTimeStamp")}} gdy stosuje się metodę z prefiksem. <code>DOMTimeStamp</code> ma dokładność tylko do milisekundy, podczas gdy <code>DOMHighResTimeStamp</code> ma minimalną dokładność dziesięciu mikrosekund. Co więcej, czas zerowy jest inny: <code>DOMHighResTimeStamp</code> ma taki sam czas zerowy jak <code>performance.now()</code>, lecz <code>DOMTimeStamp</code> ma czas zerowy jak <code>Date.now().</code></p>
<p><sup>3</sup> Poprawnym wywołaniem anulowania żądania w Chrome jest aktualnie <code>window.cancelAnimationFrame()</code>. W starszych wersjach <code>window.webkitCancelAnimationFrame()</code> & <code>window.webkitCancelRequestAnimationFrame()</code>, które są przestarzałe, ale ciągle wspierane.</p>
<p><sup>4</sup> Wsparcie dla wersji z prefiksem zostało usunięte z Firefox 42.</p>
<h2 id="Specification" name="Specification">Zobacz również</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">TestUFO: Test your web browser for requestAnimationFrame() Timing Deviations</a></li>
<li>Paul Irish: <a class="external external-icon" href="http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/">requestAnimationFrame for Smart Animating</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>
|
