Animación y easing

facebook-svg gplus-svg twitter-svg

Podemos traducir easing como curva de velocidad, o como temporizador de la animación, y se trata de un movimiento cuya velocidad es proporcional con la distancia a recurrir.
En el siguiente ejemplo utilizamos la misma pelota de siempre:

function Pelota(r) {
  this.r = r;
  this.x = 2 * r;
  this.y = 2 * r;
  this.dx = cw - 2 * r; //destino x
  this.dy = ch - 2 * r; // destino y
  this.vx, this.vy;
  this.color = "#6ab150";
}

La pelota tiene un punto de partida.

pelota.x = 2 * r;
pelota.y = 2 * r;

y un punto de destino

pelota.dx = cw - 2 * r;
pelota.dy = ch - 2 * r;

La velocidad de la pelota es proporcional con la distancia a recurrir:

var easing = 1 / 20;
.....
pelota.vx = (pelota.dx - pelota.x) * easing;
pelota.vy = (pelota.dy - pelota.y) * easing;

Exactamente como en el ejemplo de Animación y fricción, la pelota nunca llegará a su destino. La podemos ayudar con un empujoncito: si la distancia entre la pelota y su destino, en valor absoluto, es mas pequeña que 1:

if (Math.abs(pelota.dx - pelota.x) < 1) {
      pelota.x = pelota.dx;
}

See the Pen easing* #1 by Gabi (@enxaneta) on CodePen.

Un movimiento aleatorio

Es fácil de ver que podemos crear un movimiento aleatorio si en lugar de parar la animación, le damos a la pelota un nuevo destino:

if (Math.abs(this.dx - this.x) < 1) {
   this.dx = randomIntFromInterval(this.r, cw - this.r);
   this.dy = randomIntFromInterval(this.r, ch - this.r);
}

donde randomIntFromInterval es un método que genera un valor aleatorio entre un minimo y un maximo dados.

function randomIntFromInterval(minimo, maximo) {
    return ~~(Math.random() * (maximo - minimo + 1) + minimo);
}

See the Pen easing* movimiento aleatorio #2 by Gabi (@enxaneta) on CodePen.

Siguiendo al ratón

También podemos utilizar el easing para crear un movimiento suave siguiendo el ratón. Para esto primero hemos de añadir una función que nos ayuda obtener la posición del ratón encima del canvas

function oMousePos(canvas, evt) {
    var ClientRect = canvas.getBoundingClientRect();
    return { 
      x: Math.round(evt.clientX - ClientRect.left),
      y: Math.round(evt.clientY - ClientRect.top)
	}
}

Queremos detectar la posición del ratón encima del canvas, cuando el ratón pase por encima (on "mousemove",):

canvas.addEventListener("mousemove", function(evt) {
   m = oMousePos(canvas, evt); 
},false);

También queremos que la pelota vuelva en el centro del canvas (cx,cy) cuando el ratón salga del canvas (on "mouseleave"):

canvas.addEventListener("mouseleave", function() {
   m = {x:cx,y:cy}; 
  },false);

Y aquí viene la parte importante: en el código de antes reemplazamos las coordenadas del punto de destino (this.dx, this.dy) con las coordenadas del ratón (m.x,m.y). Y ya está.

See the Pen easing + ratón* #3 by Gabi (@enxaneta) on CodePen.