Lepsze animacje za pomocą funkcji requestAnimationFrame w JavaScript
Stronę tą wyświetlono już: 3507 razy
Wstęp
Omawiane wcześniej metody setTimer i setInterval mają swoje wady, które przy programowaniu gier są szczególnie dotkliwe. Głównym problemem jest synchronizacja zdarzeń. Jeżeli podpięte zdarzenie np. onkeydown, które wykonuje się niezależnie od animacji a jest związane z przemieszczaniem jakiegoś obiektu w to problemem jest synchronizacja tego zdarzenia z animacją. I tu z odsieczą biegnie na ratunek funkcja requestAnimationFrame, którą obsługują jedynie najnowsze przeglądarki. Funkcja ta umożliwia podanie na jej wejście innej funkcji, która zostanie wywołana w odpowiedzi na odświeżenie okna przeglądarki. I tu trzeba powiedzieć sobie, że przeglądarki internetowe odświeżają swoje okna (odrysowują je) z częstotliwością 60 [Hz] (60 razy na sekundę). Dzięki tej funkcji można więc zsynchronizować animację wraz z zdarzeniami, które mają na nie wpływ.
Przykład praktycznego zastosowania funkcji requestAnimationFrame
Teoria teorią, ale czas zakasać rękawy i pokazać jak funkcja requestAnimationFrame działa. Oto przykładowy kod:
Wynik działania powyższego skryptu widać poniżej (najedź kursorem myszki nad obszar canvas-u.
Tytuł:
JavaScript i jQuery. Interaktywne strony WWW dla każdego. Podręcznik Front-End Developera
Autor:
Jon Duckett
Tytuł:
JavaScript od pierwszej linii kodu. Błyskawiczna nauka pisania gier, stron WWW i aplikacji internetowych
Autor:
Laurence Lars Svekis, Maaike van Putten, Rob Percival
Tytuł:
JavaScript funkcyjnie. Zrównoważone, pragmatyczne programowanie funkcyjne w JavaScript
Autor:
Kyle Simpson
Tytuł:
JavaScript dla dzieci dla bystrzaków
Autor:
Chris Minnick, Eva Holland
Tytuł:
Modularny JavaScript dla zaawansowanych
Autor:
Nicolas Bevacqua
Tytuł:
JavaScript w praktyce. Stwórz twitterowego bota, system sygnalizacyjny LED i inne projekty z użyciem Node.js i Raspberry Pi
Autor:
Lynn Beighley
Tytuł:
Matematyka dla programistów JavaScript
Autor:
Jacek Piechota
Tytuł:
JavaScript i jQuery. Interaktywne strony WWW dla każdego. Podręcznik Front-End Developera
Autor:
Jon Duckett
Tytuł:
ECMAScript 6. Przewodnik po nowym standardzie języka JavaScript
Autor:
Nicholas C. Zakas
Tytuł:
JavaScript i wzorce projektowe. Programowanie dla zaawansowanych. Wydanie II
Autor:
Simon Timms