Lepsze animacje za pomocą funkcji requestAnimationFrame w JavaScript

Stronę tą wyświetlono już: 193 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:

Listing 1
  1. var lastTime = 0; // ostatnio odnotowany czas
  2. var dt = 0; // przyrost czasu
  3. var canvas = document.getElementById("drawing");
  4. var ctx = canvas.getContext("2d");
  5. var mousex = 0; // współrzędna x myszki nad canvas-em
  6. var mousey = 0; // współrzędna y myszki nad canvas-em
  7. function Ball(_x, _y){ // deklaracja klasy
  8. var x = _x; // współrzędna x obiektu
  9. var y = _y; // współrzędna y obiektu
  10. var ray = 20; // promień kulki
  11. this.draw = function(_x, _y, dt){ // rysowanie z przemieszczaniem kulki po czasie
  12. x = (x - _x) * dt / 1000 * 3 + x; // obliczanie nowej współrzędnej x
  13. y = (y - _y) * dt / 1000 * 3 + y; // obliczanie nowej współrzędnej y
  14. ctx.beginPath();
  15. ctx.arc(x, y, ray, 0, Math.PI * 2);
  16. ctx.fillStyle="blue";
  17. ctx.fill();
  18. ctx.stroke();
  19. }
  20. }
  21. var ball = new Ball(200, 200); // tworzenie obiektu kulki
  22. function draw(time){ // funkcja uruchamiana podczas odświeżania okna
  23. requestAnimationFrame(draw); // rekurencyjnie daję do zrozumienia, że funkcja draw ma się wykonywać przy każdym odświeżeniu okna przeglądarki
  24. dt = lastTime - time; // obliczanie interwału czasowego
  25. lastTime = time; // zapamiętywanie czasu
  26. ctx.fillStyle = "RGBA(255, 255, 255, 0.1)"; // kolor zamalowywania obszaru z przezroczystością co spowoduje powstanie efektu zostawiania śladu podczas ruch
  27. ctx.fillRect(0, 0, canvas.width, canvas.height); // wypełnienie obszaru wcześniej wybranym kolorem
  28. ball.draw(mousex, mousey, dt);
  29. }
  30. draw(0); // rozpoczęcie animacji
  31. canvas.onmousemove = function(event){
  32. mousex = event.pageX - this.offsetLeft; // położenie kursora na osi x względem prawej krawędzi elementu
  33. mousey = event.pageY - this.offsetTop; // położenie kursora na osi y względem górnej krawędzi elementu
  34. }

Wynik działania powyższego skryptu widać poniżej (najedź kursorem myszki nad obszar canvas-u.

Komentarze