Animación sencilla

Movimiento lineal

El objeto que queremos animar es una pelota cuyo radio r = 25. Al inicio de la animación la pelota se encuentra a la izquierda y fuera del canvas: x = -r; y = ch/2; ( ch representa la altura del canvas ). El color de la pelota es: color = #6ab150;

Para animarla, en un movimiento lineal de izquierda a derecha, solo necesitamos incrementar con cada fotograma el valor de x ( x++ por ejemplo ), y borrar la fotograma anterior. Pero si queremos animar varios objetos a la vez necesitamos trabajar con objetos.

Trabajar con objetos

Para crear el objeto pelota podemos escribir:

var pelota = {r:25,  x:-25, y:ch/2, vx:3, color:"#6ab150"}

Pero es mucho más útil escribir una función ( de hecho un constructor ) que genere la pelota de manera dinámica. En este caso ya no hablamos de variables sino de propiedades del objeto.

function Pelota(r){
         this.r = r;// el radio de la pelota
         this.x = -r;
         this.y = ch/2;
         this.vx = 3;// la velocidad en x
         this.color = "#6ab150";
}

Ahora podemos instanciar el objeto:

var pelota = new Pelota(25);

Esto crea una nueva pelota que hereda las propiedades del constructor, y podemos comprobarlo en la consola del navegador.

console.log(pelota);

Para dibujar la pelota utilizamos el método arc() de esta manera:

ctx.fillStyle = pelota.color;
ctx.beginPath();
ctx.arc(pelota.x, pelota.y, pelota.r,0,2*Math.PI);
ctx.fill();

Pero lo podemos hacer mucho mejor: podemos ampliar la funcionalidad del objeto utilizando la propiedad prototype del constructor, y podemos escribir una función, ( de hecho lo llamamos método ), que dibuja la pelota.

Pelota.prototype.dibujar = function(){
  ctx.fillStyle = this.color;
  ctx.beginPath();
  ctx.arc(this.x, this.y, this.r,0,2*Math.PI);
  ctx.fill();
  }

Una vez creado el objeto ( var pelota = new Pelota(25); ) podemos modificar sus propiedades. Por ejemplo si queremos modificar la coordenada en x de la pelota podemos escribir:

pelota.x = cw/2;// justo en el medio del canvas

Para dibujar la pelota sencillamente llamamos el método dibujar():

pelota.dibujar();

Animar la pelota

Ahora animar la pelota es muy sencillo: Cuando animamos un objeto con cada reiteración borramos la fotograma anterior y dibujamos una nueva fotograma. Si de una fotograma a otra cambiamos el valor de la coordenada en x del objeto la pelota tendrá un movimiento lineal.

function Animacion(){
    elId = window.requestAnimationFrame(Animacion);
    ctx.clearRect(0,0,cw,ch);//borra la fotograma anterior
    pelota.x += pelota.vx;
    pelota.dibujar();
}
elId = window.requestAnimationFrame(Animacion);

Lea más acerca de clearRect y requestAnimationFrame

Recuperar la pelota

Para no quedarnos con el canvas vacío podemos recuperar la pelota una vez fuera del canvas. Para esto podemos añadir esta condición:

function Animacion(){
    elId = window.requestAnimationFrame(Animacion);
    ctx.clearRect(0,0,cw,ch);
    pelota.x += pelota.vx;// pelota.vx representala velocidad en x de la pelota
    if(pelota.x < cw + pelota.r){// si la pelota se ha salido del canvas por la derecha
    pelota.x = -pelota.r;}//volvemos a colocarla a la izquierda del canvas
    pelota.dibujar();
 }
elId = window.requestAnimationFrame(Animacion)


var canvas = document.querySelector("canvas");
var ctx = canvas.getContext("2d");
var cw = canvas.width = 300;
var ch = canvas.height = 300;
var fotogramas = 0;
ctx.fillStyle = "#fff";

var r = 25;

function Pelota(r){
	this.r = r;
	this.x = -r;
	this.y = ch/2;
	this.vx = 3;
	this.color = "#6ab150";
}

Pelota.prototype.dibujar = function(){
  ctx.save();
  ctx.fillStyle = this.color;
  ctx.beginPath();
  ctx.arc(this.x,this.y,this.r,0,2*Math.PI);
  ctx.fill();
  ctx.restore();
}
var pelota = new Pelota(r);
//pelota.x = cw/2;
//pelota.dibujar();

function Animacion(){
  elId = window.requestAnimationFrame(Animacion);
  ctx.clearRect(0,0,cw,ch);
  pelota.x += pelota.vx;
  if(pelota.x > cw + pelota.r){pelota.x = -pelota.r;}
  pelota.dibujar();
}

elId = window.requestAnimationFrame(Animacion);

Vea esta demonstración en codepen.io

A continuación animación de ida y vuelta

w3.unpo<code>todo