Animaciones en el lienzo

Las animaciones son creadas por código Javascript convencional. No existen métodos que nos ayuden a animar figuras en el lienzo, y tp existe un procedimiento predeterminado para hacerlo. Básicamente debemos borrar el área del lienzo que queremos animar, dibujar las figuras y repetir el proceso una y otra vez.

Una vez las figuras son dibujadas no se pueden mover, tan sólo borrando el área y dibujando las figuras nuevamente podemos construir una animacion. Por este motivo en juegos o aplicaciones que requieren grandes cantidades de objetos a ser animados, es mejor usar imágenes en vez de figuras construidas con trazados complejos (por ejm juegos, normalmente utilizan imágenes PNG, que además son útiles por su capacidad de transparencia).

Existen múltiples técnicas para lograr animaciones en el mundo de la programación, algunas son simples y otras tan complejas como las aplicaciones para las que fueron creadas. Veamos un ejm simple utilizando el método clearRect() para limpiar el lienzo y dibujar nuevamente, generando una animación con sólo una función, pero siempre recordar que si nuestra intención es crear elaborados efectos, probablemente deberíamos adquirir un libro de programación avanzada en Javascript antes de intentarlo.

Ejm 7.27

function iniciar()
{
var elemento=document.getElementById('lienzo');
lienzo = elemento.getContext('2d');
window.addEventListener('mouseover',animacion,false);
}

function animacion(e)
{
lienzo.clearRect(0,0,300,500);
var xraton=e.clientX;
var yraton=e.clientY;
var xcentro=220;

lienzo.beginPath();
lienzo.arc(xcentro,ycentro,20,0,Math.PI*2,false);
lienzo.moveTo(xcentro+70,150);
lienzo.arc(xcentro+50,150,20,0,Math.PI*2,false);
lienzo.stroke();

lienzo.beginPath();
lienzo.moveTo(x+10,y);
lienzo.arc(x,y,10,0,Math.PI*2, false);
lienzo.moveTo(x+60,y);
lienzo.arc(x+50,y,10,0,Math.PI*2, false);
lienzo.fill();
}
window.addEventListener("load",iniciar,false);

El código del ejm 7.27 mostrará dos ojos en pantalla que miran al puntero del ratón todo el tiempo. Para mover los ojos debemos actualizar su posición cada vez que el ratón es movido. Por este motivo agregamos una escucha para el evento mousemove en la función iniciar(). Cada vez que el puntero del ratón cambia de posición, el evento es disparado y la función animacion() es llamada.

La función animacion() comienza limpiando el lienzo con la instrucción
clearRect(0,0,300,500). Luego, la posición del puntero del ratón es capturada
(usando las viejas propiedades clientX y clientY) y la posición del primer ojo es
grabada en las variables xcentro e ycentro.

Luego de que estas variables son inicializadas, es tiempo de comenzar con las matemáticas. Usando los valores de la posición del ratón y el centro del ojo  izquierdo, calculamos el ángulo de la línea invisible que va desde un punto al otro usando el método predefinido atan2. Este ángulo es usado en el siguiente paso para calcular el punto exacto del centro del iris del ojo izquierdo con la fórmula xcentro +
Math.round(Math.sin(angulo) × 10). El número 10 en la fórmula representa la distancia desde el centro del ojo al centro del iris (porque el iris no está en el centro del ojo, está siempre sobre el borde).

Con todos estos valores podemos finalmente comenzar a dibujar nuestros ojos en el lienzo. El primer trazado es para los dos círculos representando los ojos. El primer método arc() para el primer ojo es posicionado en los valores xcentro y ycentro, y el círculo para el segundo ojo es generado 50 pixeles hacia la derecha usando la instrucción arc(xcentro+50, 150, 20, 0, Math.PI*2, false).

La parte animada del gráfico es creada a continuación con el segundo trazado. Este trazado usa las variables x e y con la posición calculada previamente a partir del  ángulo. Ambos iris son dibujados como un círculo negro sólido usando fill().

El proceso será repetido y los valores recalculados cada vez que el evento  mousemove es disparado.