From 95aca4b4d8fa62815d4bd412fff1a364f842814a Mon Sep 17 00:00:00 2001 From: Ryan Johnson Date: Thu, 29 Apr 2021 16:16:42 -0700 Subject: remove retired locales (#699) --- .../tutorial/advanced_animations/index.html | 381 --------------------- 1 file changed, 381 deletions(-) delete mode 100644 files/ca/web/api/canvas_api/tutorial/advanced_animations/index.html (limited to 'files/ca/web/api/canvas_api/tutorial/advanced_animations') diff --git a/files/ca/web/api/canvas_api/tutorial/advanced_animations/index.html b/files/ca/web/api/canvas_api/tutorial/advanced_animations/index.html deleted file mode 100644 index 5b70ecc32b..0000000000 --- a/files/ca/web/api/canvas_api/tutorial/advanced_animations/index.html +++ /dev/null @@ -1,381 +0,0 @@ ---- -title: Animacions avançades -slug: Web/API/Canvas_API/Tutorial/Advanced_animations -tags: - - Canvas - - Graphics - - Tutorial -translation_of: Web/API/Canvas_API/Tutorial/Advanced_animations -original_slug: Web/API/Canvas_API/Tutorial/Animacions_avançades ---- -
{{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