DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
21-07-2015

Hemos visto una gran cantidad de recursos en CSS que involucran en común suaves transiciones entre los estado a otro a través de Animaciones y/o Transiciones en CSS.

En esta entrada veremos como crear animaciones con solo JavaScript lo cual puede convertirse en un gran recurso al momento de realizar nuestros desarrollos; crear animaciones con JavaScript es más simple de lo que parece y para ponerlo más interesante esta API está integrada con la API de Canvas lo que aumenta su versatilidad y sencillez en su uso.

Recordando las animaciones "clásicas" en JavaScript

Seguramente las funciones setInterval y setTimeout te suenan de algo; cuando se quería animar, mover o sencillamente ejecutar periódicamente algún script se empleaban estas funciones mencionadas anteriormente; por ejemplo:

function draw() {
    setTimeout(pintar, 100);
    // codigo para dibujar
}
pintar();

El problema con estas funciones es que no están optimizadas para realizar animaciones y seguramente en más de una ocasión se ha congelado el navegador por ejecutar algún script en donde tenía presencia estas funciones setInterval y/o setTimeout.

Animando un Canvas con Window.requestAnimationFrame()

La función que hablábamos en un inicio que permite animar objetos en el Canvas se llama Window.requestAnimationFrame() la cual toma como parámetro a la función que se encarga de pintar (y repintar) -en nuestro caso- el Canvas; por ejemplo, siguiendo el mismo esquema empleado en las "clásicas" animaciones tenemos que:

function draw() {
    requestAnimationFrame(draw);
    // Drawing code goes here
}
draw();
Con la función requestAnimationFrame() se obtienen transiciones o cambios suaves a través de una API que se encuentra optimizado para tal fin.

Animando un cuadrado en Canvas con requestAnimationFrame()

En este pequeño experimento veremos cómo animar un simple cuadrado; en específico haremos que el cuadrado se mueva de una diagonal a la otra; el siguiente código JavaScript hace lo especificado anteriormente:

 
            var canvas = document.getElementById('canvas');
            var ctx = canvas.getContext('2d');

            // obtenemos las dimensiones del canvas
            var width = canvas.width = window.innerWidth;
            var height = canvas.height = window.innerHeight;

            // posiciones
            var x = width;
            var y = 0;

            // velocidad
            var vx = 3;
            var vy = 2;

            // animation loop
            function animar() {
                // limpia canvas
                ctx.clearRect(0, 0, width, height);
                // dibuja un cuadrado de 10x10
                ctx.fillRect(x, y, 10, 10);

                // actualizamos la posicion
                x -= vx;
                y += vy;

                // animamos
                requestAnimationFrame(animar);

                // verificamos que no se salga de rango
                if (y > height || x 

Analicemos el código presentado anteriormente:

  1. Primero inicializamos los elementos básicos para poder trabajar con Canvas; si no entiendes algunos de los parámetros te invito a que revises el siguiente enlace: Tag Canvas.
    	var canvas = document.getElementById('canvas');
    	var ctx = canvas.getContext('2d');
    
    	// obtenemos las dimensiones del canvas
    	var width = canvas.width = window.innerWidth;
    	var height = canvas.height = window.innerHeight;
            
  2. Definimos la posición por defecto (o las coordenadas X y Y) en donde es dibujado inicialmente la figura; además es definido un par de variables para especificar la velocidad de la animación.
    	// posiciones
    	var x = width;
    	var y = 0;
    
    	// velocidad
    	var vx = 3;
    	var vy = 2;
            
  3. Una de las tareas que realiza la función animar() es la de actualizar las variables x y y con el fin de variar la posición del cuadrado.
    	  // actualizamos la posicion
    	  x -= vx;
    	  y += vy;
    
            
    Esta sección en fundamental debido a que es donde alteramos la posición del cuadrado lo cual es necesario para realizar la animación.
  4. Invocamos el método requestAnimationFrame(animar); recursivamente especificando como parámetro el nombre de la función (animar()).

Finalmente, la animación con JavaScript:

Con solo quitar el llamado a la función obtenemos el siguiente resultado:

Refresca para ver la animación.

Y si alteramos los valores de la "velocidad" para cambiarla entre positiva y negativa y validando que no se salga de rango:

	if(vx > 0){
		  if (x > width) 
			vx *=-1;
		  if (y > height) {
			vx = -8;
		 	vy = 2;
			x=width;
			y=0;
		  }
	}else
		if (x 

Obtenemos:

Valor devuelto por Window.requestAnimationFrame()

Al invocar la función requestAnimationFrame() la misma devuelve un código distinto de cero que debe ser empleado en caso de querer cancelar la animación:

id = requestAnimationFrame(callback); 
cancelAnimationFrame(id);

Algunos enlaces de interés:


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Multiple.js para fundir nuestros fondos en HTML

Multiple.js para fundir nuestros fondos en HTML

Corazón con CSS

Corazón con CSS

Metaballs con JavaScript

Metaballs con JavaScript

Algunos artículos que te pueden interesar

La API de archivos en JavaScript - accediendo al contenido

La API de archivos en JavaScript - accediendo al contenido

En esta entrada presentaremos una API para la lectura de los archivos cargados mediante input type="file" u otros métodos como el Drag and Drop con JavaScript.

Andrés Cruz 09-02-2016

El secreto de las animaciones en JavaScript (requestAnimationFrame())

El secreto de las animaciones en JavaScript (requestAnimationFrame())

En esta entrada veremos cómo realizar algunas simples animaciones en JavaScript mediante requestAnimationFrame() cuya API se encuentra integrada con Canvas.

Andrés Cruz 21-07-2015

Geolocalización con JavaScript y Google Maps

Geolocalización con JavaScript y Google Maps

Utilizando la API de Google Maps para mostrar la ubicación del usuario.

Andrés Cruz 30-09-2013