Animaciones
El <canvas> introducido por las especificaciones HTML 5 es la base para los juegos web online que sustituyen a los juegos Flash, en vias de esxtinción. También sustituyen perfectamente a los desaperecidos applets, aplicaciones java para web muy utilizados en demos y aplicaciones educativas como simulaciones en física o matemática.
Tienes algunos ejemplos en esta sección:
- Sistema solar animado , un sistema de planetas alrededor de un sol en órbitas circulares
- Sistema solar de Kepler En este caso se aplican las leyes de Kepler para obtener un movimiento algo más realista
- Juego de artillería Nuevamente la física, esta vez el lanzamiento de proyectiles.
- Cronómetro Analógico Esta vez sin física y casi sin matemáticas.
En las animaciones se necesitan cálculos y operaciones que no se pueden hacer directamtne con html ni con CSS, se necesita usar un lenguaje de programación.
Si queires aprender a usar el lenguajde de scripts de las páginas web puedes consultar en este tutorial de Javascript desde cero donde tienes una explicaicón de como crear scripts y aplicarlos a tus páginas. Si te gusta recomiéndalo.
La animación exige un conocimiento básico de Javascript, pues este es el lenguaje que habitualmente se utiliza en las páginas web interactivas. Básicamente una animación es tan solo una sucesión de imágenes que se muestran una tras otra cada cierto intervalo de tiempo. Así de fácil. Trasladado a lo que sabes del canvas sería como redibujar un canvas cada cierto intervalo de tiempo.
En Javascript se venía usando la función setInterval() que permite ejecutar un código cada cierto tiempo. Este código se encarga de redibujar el canvas para ir mostrando los diferentes fotogramas de la animación.
Pero existe otro método más eficiente y con resultados de más calidad, pues deja al explorador gestionar los tiempos de procesador dedicados a ejecutar la animación, entre otras cosas. Se trata del método requestAnimationFrame(), este método del objeto window, que lanza al explorador una petición para redibujar la ventana y el explorador lo hará cuando sea posible (este refresco de pantalla puede ser hasta 60 veces por segundo). Solo lleva un argumento: el nombre de la función que deba ejecutarse para actualizar la animación.
Cuando se ejecuta window.requestAnimationFrame(funcionLlamada) se devuelve un identificador para identificar la llamada, o sea, la animación. Cada vez que el explorador refresca la pantalla (unas 60 veces por segundo) se ejecuta la funcionLlamada con un argumento: el instante en que se ejecuta (una medida de tiempo en milisegundos). Dentro de esa función se modifica el canvas (se cambia de fotograma) y se muestra, volviendo a ejecutar la llamada a requestAnimationFrame() si quieres seguir la animación o a window.cancelAnimationFrame(idAnim) si deseas finalizar la animación.
Un ejemplo te lo dejará totalmente claro:veras que se va dibujando un circulo relleno mediante un arco que en cada paso va aumentando hasta completar los 360º del círculo. He puesto un botón para iniciar la animación a mano.
<script>
var idAnim, grados=0, lapiz;
function animar(time)
{
lapiz.moveTo( 200, 200);
lapiz.arc(200, 200, 50, 0, grados*Math.PI/180);
lapiz.fill()
grados +=4; //cada llamada aumento el ángulo del arco en 4º
if (grados<= 360)
idAnim = window.requestAnimationFrame(animar); //Vuelvo a pedir refrescar canvas
else
window.cancelAnimationFrame(idAnim); //Finaliza la animación
}
function iniciar()
{
lapiz = document.getElementById("mipapel").getContext("2d");
idAnim = window.requestAnimationFrame(animar);
}
</script>
<canvas id="mipapel" width="400" height="500"></canvas>
<input type="button" value=" Iniciar " onclick ="iniciar()">
Lo he puesto todo elo el cuerpo de la página, pero normalmente los scripts los pondrás en la sección HEAD y la animación puedes iniciarla con un botón o con un evento, por ejemplo <body onlad="iniciar()"> iniciaría la animación al cargar la página.
Como ves la función que es llamada en la animación (animar() en este ejemplo) no admite parámetros, por lo que se necesitan variables globales o trabajar con objetos. En este otro ejemplo uso el parámetro tiempo para mostar un conteo de 1 a 100, equivalente en este ejemplo a 100 segundos.
<script>
var idAnim, log, lapiz, iniAnim;
function animar(time)
{
var dt = Math.round((time - iniAnim)/1000);
lapiz.clearRect(0, 0,100,100)
lapiz.font = "italic 60px Arial";
lapiz.fillText( dt, 10,50);
if (dt < 100)
idAnim = window.requestAnimationFrame(animar); //Vuelvo a pedir refrescar canvas
else
window.cancelAnimationFrame(idAnim); //Finaliza la animación
}
function iniciar()
{
lapiz = document.getElementById("mipapel").getContext("2d");
iniAnim = window.performance.now(); //instante de inicio de la animación
idAnim = window.requestAnimationFrame(animar);
}
</script>
<canvas id="mipapel" width="400" height="200"></canvas>
<p></p>
<input type="button" value=" Iniciar " onclick ="iniciar()">
Aquí tienes ejemplos más completos
- Sistema solar animado , un sistema de planetas alrededor de un sol en órbitas circulares
- Sistema solar de Kepler En este caso se aplican las leyes de Kepler para obtener un movimiento algo más realista
- Juego de artillería Nuevamente la física, esta vez el lanzamiento de proyectiles.
- Cronómetro Analógico Esta vez sin física y casi sin matemáticas.