Animations avancées

Cette traduction est incomplète. Aidez à traduire cet article depuis l'anglais.

Dans le dernier chapitre, nous avons réalisé des animations basiques et avons appris comment faire en sorte que les éléments se déplacent. Dans cette partie, nous allons regarder de prêt le mouvement lui-même et ajouter un peu de physique afin de réaliser nos animations avancées.

Dessinons une balle

Nous allons utiliser une balle pour étudier les animations. Ainsi, Commençons par dessiner notre balle au sein du canvas.

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

Comme d'habitude, nous avons tout d'abord besoin de dessiner le context. Pour dessiner la balle, nous allons créer un objet ball contenant des propriétés et une méthode draw() afin de la placer sur le canvas.

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();

Il n'y a rien de spécial ici, la balle est pour le moment un simple cercle qui est dessiné à l'aide de la méthode arc().

Ajoutons de la vitesse

Maintenant que nous avons une balle, nous sommes prêt à ajouter une animation simple comme nous avons pu le voir dans le dernier chapitre de ce tutoriel. Une fois encore, window.requestAnimationFrame() nous aide à contrôler l'animation. Il est possible de déplacer la balle en ajoutant un vecteur de vitesse à la position. Pour chaque frame, nous nettoyons (clear) les canvas pour supprimer les anciens cercles des frames précédentes.

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();

Boundaries

Si aucun test de collision n'est effectué notre balle sort hors du canvas rapidement. Nous avons ici besoin de vérifier si la position x et y de la balle est hors des dimensions du canvas et si c'est le cas, d'inverser la direction des vecteurs de vitesse. Pour faire ce là, nous ajoutons les vérifications suivantes à la méthode 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;
}

Première demo

Voyons voir ce que ce là donne. Déplacer votre souris dans le canvas pour commencer l'animation.

Acceleration

Afin d'obtenir un mouvement plus réel, vous pouvez jouer sur la vitesse, par exemple :

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

This slows down the vertical velocity each frame, so that the ball will just bounce on the floor in the end.

Trailing effect

Until now we have made use of the clearRect method when clearing prior frames. If you replace this method with a semi-transparent fillRect, you can easily create a trailing effect.

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

Adding mouse control

Afin d'obtenir quelques contrôle sur la balle, nous pouvons faire suivre notre souris en utilisant l'événement mousemove, par exemple. L'événement click relâche la balle et le laisse rebondir à nouveau.

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();

Déplacer la balle en utilisant votre souris et relâcher là avec un click.

Breakout

Ce petit chapitre explique seulement quelques techniques pour créer des animations avancées. Il en existe bien davantage ! How about adding a paddle, some bricks, and turn this demo into a Breakout game? Check out our Game development area for more gaming related articles.

Voir aussi

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : lumiru, SphinxKnight, vanz
 Dernière mise à jour par : lumiru,