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

Un waffle con CSS

Un waffle con CSS

Partículas con Canvas en JavaScript

Partículas con Canvas en JavaScript

Multiple.js para fundir nuestros fondos en HTML

Multiple.js para fundir nuestros fondos en HTML

Algunos artículos que te pueden interesar

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

Triángulo con fondo animado con CSS

Triángulo con fondo animado con CSS

Se explica cómo crear un triángulo con un fondo animado con un poco de CSS, HTML vectorial y una imagen.

Andrés Cruz 19-12-2016

Uso básico del Canvas en HTML

Uso básico del Canvas en HTML

El elemento canvas nos permite especificar un área de la página en donde se puede dibujar crear todo tipo de gráficos simples o complejos a partir de primitivas básicas como círculos, óvalos, rectángulos líneas, polígonos, texto, etc.

Andrés Cruz 25-01-2016