Probando las transformaciones 3d con anime.js

Las animaciones son un elemento fundamental en cualquier tipo de aplicación hoy en día; ver animaciones en las aplicaciones creadas en Android, iOS es bastante común hoy en día, y por supuesto la reina, los desarrollos web no se pueden quedar atrás y en esta entrada veremos como generar animaciones con anime.js en la cual se aplican varias transformaciones 3D; anteriormente vimos como crear la siguiente animación:

Anime.js cuenta con un control completo sobre la secuencia y orden en el que se va a realizar cada animación y esta librería es soportada en navegadores modernos como puedes consultar en la web oficial de la potente pero ligera librería.

Descargar anime.js: La API de animación con JavaScript

Puedes descargar la librería y colocarla en el atributo src como se hace con cualquier recurso:

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

O instalarlo vía node o bower:

npm install animejs 
bower install animejs

Definiendo las animaciones de las cuadrículas con anime.js

Ahora veremos cómo crear una animación como la mostraba con imagen promocional de esta entrada; este experimento también fue tomado de la página oficial: CodePen; ahora se procede a explicar su composición y ver lo sencillo que resulta emplear la librería anime.js para realizar animaciones:

Definiendo el HTML y CSS

En este ejemplo que veremos a continuación lo primero que tenemos que hacer es especificar el HTML base que tenemos a continuación; como verás es un simple elemento sección en el cual vamos a popular todos esos cuadrículas animadas con anime.js que vimos anteriormente:

<section class="wrapper"></section>

Y con el CSS indicamos el tamaño total del contenedor anteriormente mostrado como HTML base; como vemos ocupará todo el tamaño de la pantalla, de esta forma las cuadrículas animadas podrás mostrarse en toda su magnitud, y por si las redimensiones o alguna cuadrícula que se salga de línea ocultamos cualquier cosa que no entre dentro del cuerpo de nuestra web; indicamos que será de posición absoluta ubicada encima de todo y le damos una perspectiva 3D, y esto es para que se vean esos movimientos 3D de transformaciones soportados por CSS3:

  .wrapper {
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    perspective: 800px;
    transform-style: preserve-3d;
    width: 100%;
    height: 100%;
  }

El CSS para cada uno de los rectángulos o cuadrículas es realmente sencillo, solamente definir su tamaño, que al ser un cuadrado el ancho y el ancho es el mismo; estas cuadrículas son las que van contenidos dentro del tag anterior:

  div {
    width: 10vw;
    height: 10vh;
  }

Usando la librería anime.js - definiendo el JavaScript

En esta sección vamos a entrar de lleno con el JavaScript y vamos a crear los elementos que vamos a animar con anime.js y luego procedemos a realizar la animación con la librería que nos ofrece un gran abanico de opciones como veremos a continuación:

Creando la cuadrícula a animar con JavaScript

Como en el ejemplo anterior, se emplea el JavaScript para construir los distintos componentes del contenedor; vea que creamos el elemento con JavaScript básico, no tienes porqué emplear jQuery, con JavaScript básico es más que suficiente, le agregamos una clase y finalmente agregamos el cuadrado que vamos a animar un poco más adelante al elemento padre, esto lo hacemos unas 60 veces como puedes ver en el siguiente código:

    function createEl(className) {
      var el = document.createElement('div');
      el.classList.add(className);
      wrapperEl.appendChild(el);
    }

    for (var i = 0; i < numberOfThings; i++) {
      createEl('red');
      createEl('blue');
      createEl('green');
      createEl('yellow');
    }

Animando la cuadrícula con anime.js

Y la función encargada de realizar la animación, lo cual viene siendo la sección en donde empleamos la librería anime.js:

    anime({
      targets: 'div',
      translateZ: 720,
      rotateX: 180,
      rotateY: 180,
      delay: function(el, i) {
        return i * 5;
      },
      loop: true,
      direction: 'alternate',
      easing: 'easeOutQuad',
    });

Como punto interesante tenemos el valor de la propiedad translateZ el cual traslada en el eje de las Z todos los recuadros anteriores dando como resultado la sensación de que "aumentan" de tamaño dichos contenedores, esto en conjunto con las rotaciones dan un resultado interesante que puede ser empleado en aplicaciones web como proceso de selección de un elemento.

El resto de las propiedades son de fácil entendimiento, tenemos las rotaciones de 180 grados en el eje de las X y Y, translaciones en el eje de las 7 el tipo de animación que puedes profundizar más en la web de la API y que es un loop, es decir que cuando termine la animación debe iniciar nuevamente.

Conclusiones

Estas son animaciones básicas que puedes emplear en tus webs, son efectos que puedes lograr muy vistosos y en esta entrada pudiste apreciar en detalle mediante un ejemplo cómo crear una animación que parece compleja muy fácilmente; esta es una gran librería JavaScript que contiene efectos importantes que puedes emplear en multitud de cosas, en elementos como imágenes, textos, secciones, puedes acoplarlo o trabajarlo con otros recursos, APIs, framework o lo que encuentres por allí en internet como bootstrap, jQuery, CSS básico etc y crear tus propios trucos para que tu web se vea como nunca.

Con anime.js podemos animar muchas otras propiedades CSS como el ancho, alto y color y hacer aquellas animaciones que con CSS se nos complicaría mucho la vida, sobre todo cuando debemos realizar una animación o efecto bajo demanda; con anime.js esto es muy fácil de realizar.