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.
- primeros pasos con las animaciones en css
- efectos con hover y transition en css (parte 1)
- efectos con hover y transition en css (parte 2) -filtros-
- animando cosas con css
- animando los svg con css
- botones con fondo corredizo 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 con librerías
También existe la forma más "fácil" que es emplear librerías o plugins en donde nos automatizan el trabajo bastante:
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 < 0) {
x = width;
y = 0;
}
}
animar();Analicemos el código presentado anteriormente:
- 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;
- 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;
- Una de las tareas que realiza la función
animar()es la de actualizar las variablesxyycon 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.
- 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 ctx.clearRect() y de esta forma no limpiarel Canvas 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 < 0)
vx *=-1;
}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:
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter