Ten artykuł wymaga przeglądu redakcyjnego. Dowiedz się jak możesz pomóc.
To tłumaczenie jest niekompletne. Pomóż przetłumaczyć ten artykuł z języka angielskiego.
Metoda
Window.requestAnimationFrame()
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 (callback) do wywołania przed następnym odmalowaniem (oświeżeniem kanwy).
requestAnimationFrame()
jeżeli chcesz odmalować kolejną ramkę animacji.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 <iframe>
w celu poprawienia wydajności lub przedłużenia żywotności baterii.
Wywoływanej funkcji przekazywany jest pojedynczy argumenmt DOMHighResTimeStamp
, który zawiera aktualny czas rozpoczęcia wykonywania tej funkcji, wstawionej do kolejki przez wywołanie requestAnimationFrame
. 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 poprzedającej funkcji. Znacznik czasu jest liczną dziesiętną wyrażoną w milisekundach z maksymalną dokładnością 1ms (1000 µs).
Składnia
window.requestAnimationFrame(callback);
Parametry
callback
- Parametr określający funkcję do wywołania, gdy nadchodzi czas odświeżenia animacji przed następnym odmalowaniem. Przekazywana funkcja przyjmuje pojedynczy argument
DOMHighResTimeStamp
, który określa aktualny czas (zwrócony przezPerformance.now()
) w momencie rozpoczęcia przezrequestAnimationFrame
uruchamiania skolejkowanych wcześniej funkcji.
Wartość zwracana
Wartość typu long
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 Window.cancelAnimationFrame()
aby anulować żądanie wywołania funkcji do odświeżenia.
Przykład
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);
Specyfikacja
Specyfikacja | Status | Komentarz |
---|---|---|
WHATWG HTML Living Standard The definition of 'requestAnimationFrame' in that specification. |
Living Standard | Brak zmian, zastępuje poprzednią. |
Timing control for script-based animations The definition of 'requestAnimationFrame' in that specification. |
Candidate Recommendation | Wstępna definicja |
Zgodność przeglądarek
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 10.0 webkit 24.0 3 |
4.0 moz 1 4 23 2 |
10.0 | (Yes) -o 15.0 |
6.0 webkit 6.1 |
return value | 23.0 | 11.0 (11.0) | 10.0 | (Yes) | (Yes) |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | 4.4 | 16.0 webkit | ? | ? | 14.0 | 7.0 6.0 webkit |
requestID return value |
? | ? | 11.0 (11.0) moz | ? | ? | ? |
1 Przed Gecko 11.0 (Firefox 11.0 / Thunderbird 11.0 / SeaMonkey 2.8), mozRequestAnimationFrame()
mogłobyć wywołane bez parametru. To nie jest dalej wspierane, gdyż raczej nie stanie się częścią standardu.
2 Parametrem wywoływanej funkcji jest DOMTimeStamp
zamiast DOMHighResTimeStamp
gdy stosuje się metodę z prefiksem. DOMTimeStamp
ma dokładność tylko do milisekundy, podczas gdy DOMHighResTimeStamp
ma minimalną dokładność dziesięciu mikrosekund. Co więcej, czas zerowy jest inny: DOMHighResTimeStamp
ma taki sam czas zerowy jak performance.now()
, lecz DOMTimeStamp
ma czas zerowy jak Date.now().
3 Poprawnym wywołaniem anulowania żądania w Chrome jest aktualnie window.cancelAnimationFrame()
. W starszych wersjach window.webkitCancelAnimationFrame()
& window.webkitCancelRequestAnimationFrame()
, które są przestarzałe, ale ciągle wspierane.
4 Wsparcie dla wersji z prefiksem zostało usunięte z Firefox 42.
Zobacz również
Window.mozAnimationStartTime
Window.cancelAnimationFrame()
- mozRequestAnimationFrame - Blog post
- requestAnimationFrame for smart animating - Blog post
- Animating with javascript: from setInterval to requestAnimationFrame - Blog post
- Using PC Hardware more efficiently in HTML5: New Web Performance APIs, Part 1 - Blog post
- TestUFO: Test your web browser for requestAnimationFrame() Timing Deviations
- Paul Irish: requestAnimationFrame for Smart Animating
- Paul Irish: requestAnimationFrame API: now with sub-millisecond precision