Animaciones en HTML5

Para crear animaciones en HTML5 tenemos varias opciones. Una es crearlas directamente en la hoja de estilos con las transiciones de CSS3, otra es con la programación de scripts y el uso de requestAnimationFrame

Transiciones

Las transiciones de CSS3 son más apropiadas para la creación de efectos visuales. Por ejemplo, podemos hacer que un elemento se mueva cuando el ratón esté dobre él, para eso tenemos que definir su posición en el estado normal y en su estado "hover". Definimos la transición, el tiempo de la duración, y el navagador se encargará de animar ese elemento por tí. Veamos un ejemplo simple.

	#elemeto {
		position: relative;
		left: 0;
		transition: left 500ms;
	}
	#elemento:hover {
		left: 10px;
	}

A una transición le podemos especificar la propiedad que queremos animar "transition-property: left;", la duración de la animación "transition-duration: 1s;", la función que realizará la animación "transition-timing-function: linear;" y el retardo a la hora de empezar "transition-delay: 2s;"

requestAnimationFrame

Para animaciones más complejas como presentaciones o videojuegos no nos llega con usar transiciones de CSS3, necesitamos controlar mejor lo que vamos a hacer. La idea es crear una función de dibujo que se ejecute cada cierto tiempo. Antes de la llegada de HTML5 usaríamos las funciones de javascript setTimeout o setInverval, pero ahora tenemos requestAnimationFrame que nos proporciona algunas ventajas. Estas ventajas son la creación de animaciones suaves y un mejor aprovechamiento de los recursos.

Los navegadores implementan esta función de manera que las animaciones se sincronicen con el refresco de pantalla, generalmente unos 60hz, lo que hace que las animaciones se vean más suaves. También hacen que, por ejemplo, al cambiar de pestaña en el navegador, la animación se pare, dejando de consumir recursos de CPU y de memoria.

Su uso es muy sencillo:

	var requestId = 0;
	var animationStartTime = 0;

	function animate(time) {
		document.getElementById("animated").style.left = (time - animationStartTime) % 2000 / 4 + "px";
		requestId = window.requestAnimationFrame(animate);
	}
	function start() {
		animationStartTime = Date.now();
		requestId = window.requestAnimationFrame(animate);
	}
	function stop() {
		if (requestId)
			window.cancelAnimationFrame(requestId);
		requestId = 0;
	}

Para terminar aquí dejo un polyfill para hacer que requestAnimationFrame funcione en cualquier navegador:

(function() {
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
        window.cancelAnimationFrame = 
          window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
    }
 
    if (!window.requestAnimationFrame)
        window.requestAnimationFrame = function(callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
            var id = window.setTimeout(function() { callback(currTime + timeToCall); }, 
              timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };
 
    if (!window.cancelAnimationFrame)
        window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
        };
}());