From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../api/window/requestanimationframe/index.html | 170 +++++++++++++++++++++ 1 file changed, 170 insertions(+) create mode 100644 files/pl/web/api/window/requestanimationframe/index.html (limited to 'files/pl/web/api/window/requestanimationframe') diff --git a/files/pl/web/api/window/requestanimationframe/index.html b/files/pl/web/api/window/requestanimationframe/index.html new file mode 100644 index 0000000000..703a908e8d --- /dev/null +++ b/files/pl/web/api/window/requestanimationframe/index.html @@ -0,0 +1,170 @@ +--- +title: Window.requestAnimationFrame() +slug: Web/API/Window/requestAnimationFrame +tags: + - API + - DOM + - Metodă +translation_of: Web/API/window/requestAnimationFrame +--- +

{{APIRef}}
+ 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 (odświeżeniem kanwy).

+ +
Uwaga: Twoja funkcja musi samodzielnie wywołać 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 {{ HTMLElement("iframe") }} w celu poprawienia wydajności lub przedłużenia żywotności baterii.

+ +

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 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 poprzedzającej funkcji. Znacznik czasu jest liczbą 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 {{domxref("DOMHighResTimeStamp")}}, który określa aktualny czas (zwrócony przez {{domxref('Performance.now()')}} ) w momencie rozpoczęcia przez requestAnimationFrame 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 {{domxref("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

+ + + + + + + + + + + + + + + + + + + + + +
SpecyfikacjaStatusKomentarz
{{SpecName('HTML WHATWG', '#animation-frames', 'requestAnimationFrame')}}{{Spec2('HTML WHATWG')}}Brak zmian, zastępuje poprzednią.
{{SpecName('RequestAnimationFrame', '#dom-windowanimationtiming-requestanimationframe', 'requestAnimationFrame')}}{{Spec2('RequestAnimationFrame')}}Wstępna definicja
+ +

Zgodność przeglądarek

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support10.0 {{property_prefix("webkit")}}
+ 24.0 3		4.0 {{property_prefix("moz")}} 1 4
+ 23 2		10.0{{compatversionunknown}} {{property_prefix("-o")}}
+ 15.0		6.0 {{property_prefix("webkit")}}
+ 6.1
return value23.0{{CompatGeckoDesktop("11.0")}}10.0{{compatversionunknown}}{{compatversionunknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support4.416.0 {{property_prefix("webkit")}}{{CompatUnknown}}{{CompatUnknown}}14.07.0
+ 6.0 {{property_prefix("webkit")}}
requestID return value{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("11.0")}} {{property_prefix("moz")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

1 Przed Gecko 11.0 {{geckoRelease("11.0")}}, 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 {{domxref("DOMTimeStamp")}} zamiast {{domxref("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ż

+ + -- cgit v1.2.3-54-g00ecf