DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
24-08-2016

En esta entrada veremos cómo usar la librería de animaciones para JavaScript llamada anime.js; en general es una librería muy fácil de usar que nos recordará bastante a cómo trabajan las animaciones y transiciones en CSS.

La ventaja que tenemos es la posibilidad de crear animaciones dinámicas que pueden depender de muchos escenarios que podemos manejar fácilmente con JavaScript y sin la necesidad de agregar/remover clases cada cierto tiempo para variar el comportamiento de cualquier elemento animable; además de ser más extensible lo que nos trae más posibilidades de uso.

Descargando la librería de animaciones para JavaScript

Puedes descargar la librería de animación en el siguiente enlace: anime.js en Github; para usar la librería, simplemente agregamos el siguiente enlace:

<script src="anime.min.js"></script>

Para la versión comprimida o:

<script src="anime.js"></script>

Para la versión de desarrollo; si deseas ver más ejemplos o la documentación oficial puedes consultar el siguiente enlace: anime.js página oficial.

Realizando una animación de ejemplo

Hay muchos ejemplos los cuales puedes encontrar en el siguiente enlace: experimentos anime.js pero para inicar y ver la versatilidad de esta librería trabajaremos con un versión dodificada del siguiente experimento anime.js stress test la cual es bastante sencilla pero bastante atractiva a la vista como veremos a continuación.

Como indicamos anteriormente, el experimento es bastante sencillo a realizar, solo necesitamos un poco de CSS y JavaScript como lo podemos ver en las siguientes tres partes que lo componen:

CSS del experimento animado

Definir el CSS para el contenedor que contendrá (valga la redundancia) cada uno de los cuadros que definiremos anteriormente; para eso se creará un cuadro con las siguiente dimensiones:

section {
  width: 400px;
  height: 400px;
}

Y cada uno de los cuadros de colores que estarán contenido dentro del section definido anteriormente:

div {
  display: inline-block;
  width: 20px;
  height: 20px;
}

Generando el HTMl vía JavaScript

Ahora debemos crear la máxima cantidad de divs dentro del section; realizando una sencilla operación matemática, nos damos cuenta que:

(400*400)/(20*20) = 400

Necesitamos unos 400 cuadritos/div para llenar completamente nuestro section, cosa que obviamente no realizaremos a mano a menos que estes muy aburrido; para realizar esto empleamos el siguiente JavaScript:

var maxElements = 400;
var colors = ['#FF324A', '#31FFA6', '#206EFF', '#FFFF99'];

var createElements = (function() {
  var sectionEl = document.createElement('section');
  for (var i = 0; i 

Definiendo la animación con anime.js

Ahora llegó el momento de la magia; vamos a emplear la librería anime.js para crear una animación que está compuesta del siguiente código:

anime({
  targets: 'div',
  translateX: function() { return anime.random(-6, 6) + 'rem'; },
  translateY: function() { return anime.random(-6, 6) + 'rem'; },
  scale: function() { return anime.random(10, 20) / 10; },
  rotate: function() { return anime.random(-360, 360); },
  delay: function() { return 400 + anime.random(0, 500); },
  duration: function() { return anime.random(1000, 2000); },
  direction: 'alternate',
  loop: true
});

Como vemos definimos una serie de parámetros compuesto por números random o aleatorios en un rango que podemos personalizar como queramos; definimos la traslación en cada uno de los ejes 2D con translateX y translateY así como el escalado con scale, el retraso de la animación delay, rotación rotate, duración duration e indicamos que la animación se ejecute infinitamente loop y un parámetro muy importante que es el direction con el valor alternate que permite reconstruir la escena una vez finalizada la animación (algo así como realizar la animación pero a la inversa al llegar a su fin).

Con esto obtenemos:


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Animación Torus solo con HTML y CSS

Animación Torus solo con HTML y CSS

Árbol arcoíris creciente

Árbol arcoíris creciente

Unión de galaxias con JavaScript

Unión de galaxias con JavaScript

Algunos artículos que te pueden interesar

¿Cómo cambiar el color progresivamente según la hora con JavaScript?

¿Cómo cambiar el color progresivamente según la hora con JavaScript?

En esta entrada veremos como cambiar el color de algún elemento de una página web según la hora del día.

Andrés Cruz 25-08-2014

Cómo crear nuestro propio botón tipo hamburguesa animado con CSS y un par de divs

Cómo crear nuestro propio botón tipo hamburguesa animado con CSS y un par de divs

Se explica cómo crear un botones de tipo hamburguesa animado con CSS, HTML y una simple función de JavaScript, los botones se convierten una vez clickeados en flechas y/o X según sea el caso.

Andrés Cruz 09-08-2017

Animando los SVG con CSS

Animando los SVG con CSS

En esta entrada veremos cómo emplear las animaciones con los SVGs, específicamente emplearemos el logo de Android con el cual hemos trabajado desde entradas pasadas.

Andrés Cruz 15-06-2015