From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- .../animacions_avan\303\247ades/index.html" | 380 +++++++++++++++++++++ 1 file changed, 380 insertions(+) create mode 100644 "files/ca/web/api/canvas_api/tutorial/animacions_avan\303\247ades/index.html" (limited to 'files/ca/web/api/canvas_api/tutorial/animacions_avançades') diff --git "a/files/ca/web/api/canvas_api/tutorial/animacions_avan\303\247ades/index.html" "b/files/ca/web/api/canvas_api/tutorial/animacions_avan\303\247ades/index.html" new file mode 100644 index 0000000000..4aebb46529 --- /dev/null +++ "b/files/ca/web/api/canvas_api/tutorial/animacions_avan\303\247ades/index.html" @@ -0,0 +1,380 @@ +--- +title: Animacions avançades +slug: Web/API/Canvas_API/Tutorial/Animacions_avançades +tags: + - Canvas + - Graphics + - Tutorial +translation_of: Web/API/Canvas_API/Tutorial/Advanced_animations +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}
+ +
+

En l'últim capítol vam fer algunes animacions bàsiques i vam conèixer maneres de fer moure les coses. En aquesta part veurem més d'a prop el moviment en si i afegirem una mica de física per fer que les nostres animacions siguin més avançades.

+
+ +

Dibuixar una bola

+ +

Usarem una bola per als nostres estudis d'animació, així que primer dibuixarem aquesta bola sobre el llenç. El següent codi ens configurarà.

+ +
<canvas id="canvas" width="600" height="300"></canvas>
+
+ +

Com és habitual, primer necessitem un context de dibuix. Per dibuixar la bola, hem crear un objecte ball que contingui propietats i un mètode draw() per pintar-la sobre el llenç.

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+var ball = {
+  x: 100,
+  y: 100,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+ball.draw();
+ +

Aquí no hi ha res especial, la bola és en realitat un cercle senzill i es dibuixa amb l'ajuda del mètode {{domxref("CanvasRenderingContext2D.arc()", "arc()")}}.

+ +

Afegir velocitat

+ +

Ara que tenim la bola, estem preparats per afegir una animació bàsica tal com hem après en l'últim capítol d'aquest tutorial. Novament, {{domxref("window.requestAnimationFrame()")}} ens ajuda a controlar l'animació. La bola es mou en afegir un vector de velocitat a la posició. Per a cada fotograma, també {{domxref("CanvasRenderingContext2D.clearRect", "clear", "", 1)}} el llenç per eliminar cercles antics de fotogrames anteriors.

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var raf;
+
+var ball = {
+  x: 100,
+  y: 100,
+  vx: 5,
+  vy: 2,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+function draw() {
+  ctx.clearRect(0,0, canvas.width, canvas.height);
+  ball.draw();
+  ball.x += ball.vx;
+  ball.y += ball.vy;
+  raf = window.requestAnimationFrame(draw);
+}
+
+canvas.addEventListener('mouseover', function(e) {
+  raf = window.requestAnimationFrame(draw);
+});
+
+canvas.addEventListener('mouseout', function(e) {
+  window.cancelAnimationFrame(raf);
+});
+
+ball.draw();
+
+ +

Límits

+ +

Sense cap prova de col·lisió de límits, la nostra bola surt ràpidament del llenç. Hem de comprovar si la posició x i y de la bola està fora de les dimensions del llenç i invertir la direcció dels vectors de velocitat. Per fer-ho, afegim les següents comprovacions al mètode draw:

+ +
if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
+  ball.vy = -ball.vy;
+}
+if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
+  ball.vx = -ball.vx;
+}
+ +

Primera demostració

+ +

Vegem com es veu en acció fins ara. Movem el ratolí en el llenç per iniciar l'animació.

+ + + +

{{EmbedLiveSample("First_demo", "610", "310")}}

+ +

Acceleració

+ +

Per fer el moviment més real, es pots jugar amb la velocitat d'aquesta manera, per exemple:

+ +
ball.vy *= .99;
+ball.vy += .25;
+ +

Això retarda la velocitat vertical de cada fotograma, de manera que la bola només rebotarà en el sòl al final.

+ + + +

{{EmbedLiveSample("Second_demo", "610", "310")}}

+ +

Efecte cua

+ +

Fins ara, hem utilitzat el mètode {{domxref("CanvasRenderingContext2D.clearRect", "clearRect")}} per esborrar fotogrames anteriors. Si reemplacem aquest mètode per un semi-transparent {{domxref("CanvasRenderingContext2D.fillRect", "fillRect")}}, es pot crear fàcilment un efecte cua.

+ +
ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
+ctx.fillRect(0, 0, canvas.width, canvas.height);
+ + + +

{{EmbedLiveSample("Third_demo", "610", "310")}}

+ +

Afegir control al ratolí

+ +

Per tenir una mica de control sobre la bola, podem fer que segueixi al ratolí usant l'esdeveniment mousemove, per exemple. L'esdeveniment click allibera la bola i la deixa rebotar de nou.

+ + + +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var raf;
+var running = false;
+
+var ball = {
+  x: 100,
+  y: 100,
+  vx: 5,
+  vy: 1,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+function clear() {
+  ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
+  ctx.fillRect(0,0,canvas.width,canvas.height);
+}
+
+function draw() {
+  clear();
+  ball.draw();
+  ball.x += ball.vx;
+  ball.y += ball.vy;
+
+  if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
+    ball.vy = -ball.vy;
+  }
+  if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
+    ball.vx = -ball.vx;
+  }
+
+  raf = window.requestAnimationFrame(draw);
+}
+
+canvas.addEventListener('mousemove', function(e) {
+  if (!running) {
+    clear();
+    ball.x = e.clientX;
+    ball.y = e.clientY;
+    ball.draw();
+  }
+});
+
+canvas.addEventListener('click', function(e) {
+  if (!running) {
+    raf = window.requestAnimationFrame(draw);
+    running = true;
+  }
+});
+
+canvas.addEventListener('mouseout', function(e) {
+  window.cancelAnimationFrame(raf);
+  running = false;
+});
+
+ball.draw();
+
+ +

Moure la bola amb el ratolí i allibera-la amb un clic.

+ +

{{EmbedLiveSample("Adding_mouse_control", "610", "310")}}

+ +

Escapada

+ +

Aquest breu capítol només explica algunes tècniques per crear animacions més avançades. Hi ha molts més! Què tal afegir una paleta, alguns maons, i convertir aquesta demostració en un joc Escapada? Consulta la nostra àrea de desenvolupament de jocs per veure més articles relacionats amb els jocs.

+ +

Vegeu també

+ + + +

{{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}

-- cgit v1.2.3-54-g00ecf