diff options
author | Ryan Johnson <rjohnson@mozilla.com> | 2021-04-29 16:16:42 -0700 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-04-29 16:16:42 -0700 |
commit | 95aca4b4d8fa62815d4bd412fff1a364f842814a (patch) | |
tree | 5e57661720fe9058d5c7db637e764800b50f9060 /files/ca/web/api/canvas_api/tutorial/advanced_animations | |
parent | ee3b1c87e3c8e72ca130943eed260ad642246581 (diff) | |
download | translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.gz translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.bz2 translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.zip |
remove retired locales (#699)
Diffstat (limited to 'files/ca/web/api/canvas_api/tutorial/advanced_animations')
-rw-r--r-- | files/ca/web/api/canvas_api/tutorial/advanced_animations/index.html | 381 |
1 files changed, 0 insertions, 381 deletions
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 ---- -<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}</div> - -<div class="summary"> -<p>En l'últim capítol vam fer algunes <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations">animacions bàsiques</a> 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.</p> -</div> - -<h2 id="Dibuixar_una_bola">Dibuixar una bola</h2> - -<p>Usarem una bola per als nostres estudis d'animació, així que primer dibuixarem aquesta bola sobre el llenç. El següent codi ens configurarà.</p> - -<pre class="brush: html"><canvas id="canvas" width="600" height="300"></canvas> -</pre> - -<p>Com és habitual, primer necessitem un context de dibuix. Per dibuixar la bola, hem crear un objecte <code>ball</code> que contingui propietats i un mètode <code>draw()</code> per pintar-la sobre el llenç.</p> - -<pre class="brush: js">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();</pre> - -<p>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()")}}.</p> - -<h2 id="Afegir_velocitat">Afegir velocitat</h2> - -<p>Ara que tenim la bola, estem preparats per afegir una animació bàsica tal com hem après en l'<a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations">últim capítol</a> 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.</p> - -<pre class="brush: js; highlight:[8,9,24,25]">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(); -</pre> - -<h2 id="Límits">Límits</h2> - -<p>Sense cap prova de col·lisió de límits, la nostra bola surt ràpidament del llenç. Hem de comprovar si la posició <code>x</code> i <code>y</code> 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 <code>draw</code>:</p> - -<pre class="brush: js">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; -}</pre> - -<h3 id="Primera_demostració">Primera demostració</h3> - -<p>Vegem com es veu en acció fins ara. Movem el ratolí en el llenç per iniciar l'animació.</p> - -<div class="hidden"> -<pre class="brush: html"><canvas id="canvas" style="border: 1px solid" width="600" height="300"></canvas></pre> - -<pre class="brush: js">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; - - 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('mouseover', function(e) { - raf = window.requestAnimationFrame(draw); -}); - -canvas.addEventListener('mouseout', function(e) { - window.cancelAnimationFrame(raf); -}); - -ball.draw();</pre> -</div> - -<p>{{EmbedLiveSample("First_demo", "610", "310")}}</p> - -<h2 id="Acceleració"><span id="result_box" lang="ca"><span>Acceleració</span></span></h2> - -<p>Per fer el moviment més real, es pots jugar amb la velocitat d'aquesta manera, per exemple:</p> - -<pre class="brush: js">ball.vy *= .99; -ball.vy += .25;</pre> - -<p>Això retarda la velocitat vertical de cada fotograma, de manera que la bola només rebotarà en el sòl al final.</p> - -<div class="hidden"> -<h6 id="Second_demo">Second demo</h6> - -<pre class="brush: html"><canvas id="canvas" style="border: 1px solid" width="600" height="300"></canvas></pre> - -<pre class="brush: js">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; - ball.vy *= .99; - ball.vy += .25; - - 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('mouseover', function(e) { - raf = window.requestAnimationFrame(draw); -}); - -canvas.addEventListener('mouseout', function(e) { - window.cancelAnimationFrame(raf); -}); - -ball.draw();</pre> -</div> - -<p>{{EmbedLiveSample("Second_demo", "610", "310")}}</p> - -<h2 id="Efecte_cua">Efecte cua</h2> - -<p>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.</p> - -<pre class="brush: js">ctx.fillStyle = 'rgba(255, 255, 255, 0.3)'; -ctx.fillRect(0, 0, canvas.width, canvas.height);</pre> - -<div class="hidden"> -<h6 id="Third_demo">Third demo</h6> - -<pre class="brush: html"><canvas id="canvas" style="border: 1px solid" width="600" height="300"></canvas></pre> - -<pre class="brush: js">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.fillStyle = 'rgba(255, 255, 255, 0.3)'; - ctx.fillRect(0, 0, canvas.width, canvas.height); - ball.draw(); - ball.x += ball.vx; - ball.y += ball.vy; - ball.vy *= .99; - ball.vy += .25; - - 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('mouseover', function(e) { - raf = window.requestAnimationFrame(draw); -}); - -canvas.addEventListener('mouseout', function(e) { - window.cancelAnimationFrame(raf); -}); - -ball.draw();</pre> -</div> - -<p>{{EmbedLiveSample("Third_demo", "610", "310")}}</p> - -<h2 id="Afegir_control_al_ratolí">Afegir control al ratolí</h2> - -<p>Per tenir una mica de control sobre la bola, podem fer que segueixi al ratolí usant l'esdeveniment <code><a href="/en-US/docs/Web/Reference/Events/mousemove">mousemove</a></code>, per exemple. L'esdeveniment <code><a href="/en-US/docs/Web/Events/click">click</a></code> allibera la bola i la deixa rebotar de nou.</p> - -<div class="hidden"> -<pre class="brush: html"><canvas id="canvas" style="border: 1px solid" width="600" height="300"></canvas></pre> -</div> - -<pre class="brush: js">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(); -</pre> - -<p><span id="result_box" lang="ca"><span>Moure la bola amb el ratolí i allibera-la amb un clic.</span></span></p> - -<p>{{EmbedLiveSample("Adding_mouse_control", "610", "310")}}</p> - -<h2 id="Escapada">Escapada</h2> - -<p>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 <a href="http://en.wikipedia.org/wiki/Breakout_%28video_game%29">Escapada</a>? Consulta la nostra àrea de <a href="https://developer.mozilla.org/en-US/docs/Games">desenvolupament de jocs</a> per veure més articles relacionats amb els jocs.</p> - -<h2 id="Vegeu_també">Vegeu també</h2> - -<ul> - <li>{{domxref("window.requestAnimationFrame()")}}</li> - <li><a href="/en-US/docs/Games/Techniques/Efficient_animation_for_web_games">Animació eficient per a jocs web</a></li> -</ul> - -<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}</p> |