Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. JavaScript

Cómo agregar animaciones de Adobe After Effects a una página web

by
Difficulty:BeginnerLength:ShortLanguages:

Spanish (Español) translation by Ana Paulina Figueroa Vazquez (you can also view the original English article)

Las animaciones complejas están siendo implementadas en aplicaciones y páginas web con una creciente frecuencia, y existen excelentes bibliotecas para ayudarnos a hacerlo, como GSAPAnime.js. Sin embargo, en ocasiones ni siquiera estas herramientas son suficientes. Queremos tener una manera más elegante y sencilla de transferir movimiento de los programas de efectos visuales directamente a nuestras páginas web.

Hoy explicaré los pasos necesarios para incorporar animaciones de Adobe After Effects en una página.

Cómo funciona esto

A continuación puedes ver el proceso típico para convertir gráficos en movimiento de Adobe After Effects a un formato aceptado por las páginas web:

  1. Un diseñador gráfico/de movimiento crea las animaciones en Adobe After Effects.
  2. El diseñador exporta los datos de la animación como archivos JSON. Esto puede lograrse gracias a Bodymovin, una extensión de After Effects de código abierto creada por Hernan Torrisi.
  3. Un desarrollador instala el JavaScript necesario para renderizar las animaciones en la web. Esto se hace con Lottie, una brillante biblioteca de código abierto.
  4. Finalmente, este crea instancias para cada animación deseada.

¡¿Suena bastante complicado?!

Lo que vamos a construir

Como siempre, examinemos lo que vamos a construir durante este tutorial:

Animación de alta calidad con Lottie

Para renderizar animaciones de After Effects en tiempo real sin tener que volver a escribirlas, vamos a aprovechar una biblioteca llamada Lottie.

Lottie

A continuación puedes ver su definición exacta, la cual fue tomada de su sitio web:

"Lottie es una biblioteca para Android, iOS, web y Windows que analiza animaciones de Adobe After Effects exportadas como json con Bodymovin ¡y las renderiza de forma nativa en dispositivos móviles y en la web!"

Si deseas profundizar (u obtener inspiración) de las animaciones con Lottie, explora LottieFiles.

Lottie para la web

Dependiendo de la plataforma con la que quieras trabajar, existen diferentes repositorios de GitHub con distintas normas. En nuestro caso, nos interesan las animaciones web.

Ya es suficiente preámbulo, ¡vamos a centrarnos en nuestro proyecto!

1. Consigue algunos gráficos en movimiento

Para esta demostración necesitaremos un conjunto de gráficos en movimiento.

Elegí algunos íconos animados de Envato Elements que están disponibles en el formato de Adobe After Effects.

The animated icons were going to use from Envato Elements
Los íconos animados de Envato Elements que vamos a usar.

Vamos a usar siete íconos de este paquete.

El siguiente paso es exportar cada uno de ellos como un archivo JSON. Como discutimos anteriormente, este proceso requiere la extensión Bodymovin. La mayoría de las veces este trabajo será llevado a cabo por un diseñador de movimiento, proporcionándonos los recursos necesarios para la implementación en una página web.

Dado que este tutorial sigue la perspectiva de un desarrollador, no veremos el proceso de exportación. En este punto, vamos a suponer que tenemos a nuestra disposición los siguientes siete archivos JSON:

  • award.json
  • support.json
  • coffee.json
  • forum.json
  • bulb.json
  • clock.json
  • contact.json

Como miembro Pro de CodePen, cargaré esos archivos al Administrador de recursos. Todos compartirán la misma ruta.

2. Incluye el script en JavaScript de Lottie

A continuación usaremos cdnjs, un popular servicio CDN para incluir el archivo JavaScript de Lottie en nuestro proyecto:

The required Lottie file that we include on our project

3. Define el marcado de página

Vamos a suponer que estamos creando un sitio web corporativo y que vamos a usar seis de esos íconos para resaltar algunas estadísticas clave sobre la empresa. El séptimo ícono será pegajoso y funcionará como una llamada a la acción.

Aquí puedes ver el marcado requerido:

Observa que algunos elementos contienen la clase animated. Dentro de cada uno de ellos colocaremos uno de los íconos de After Effects exportados. Esta acción será llevada a cabo de forma dinámica a través de JavaScript durante el proceso de inicialización de nuestras animaciones.

Para asociar elementos con un ícono también les daremos un id, cuyo valor coincidirá con el nombre del ícono de destino, de esta forma:

<div id="award" class="animated"></div>

4. Especifica algunos estilos básicos

Para esta demostración, los estilos no jugarán un papel importante.

Solo para hacer que la página sea un poco más atractiva, usaremos una fuente de Google personalizada y crearemos un diseño de tarjeta basado en una cuadrícula.

Estos son todos los estilos que necesitaremos:

5. Carga los íconos

Para cargar los íconos animados recorreremos los elementos .animated, y por cada uno, crearemos una animación usando el método loadAnimation() de Lottie.

En el interior de este método enviaremos un objeto de configuración que controla la animación. Veamos más de cerca los parámetros del objeto:

  • container: el elemento DOM que incluirá la animación.
  • renderer: la manera en la que se renderizará la animación en la página web. Los valores posibles son svg, html y canvas. En nuestro caso, los íconos aparecerán como SVGs.
  • loop: define la cantidad de iteraciones de la animación. Los valores posibles son true, false y un número. En nuestro caso, se ejecutará indefinidamente. 
  • autoplay: define si la animación debe comenzar automáticamente o no. En nuestro caso, debe comenzar automáticamente.
  • path: la ruta del archivo JSON correspondiente. En nuestro caso, vamos a enviar una ruta absoluta. En tus proyectos probablemente tengas una ruta relativa, y todos los archivos JSON estarán almacenados en el interior de una carpeta en común.

Con todo esto en mente, aquí puedes ver el código JavaScript requerido:

Dependiendo de tu proyecto quizá quieras realizar algunas acciones más complejas. Solo para darte una idea simple, pausemos la animación de forma predeterminada y hagamos que se ejecute cuando pases el ratón sobre el ícono.

El código para esta operación:

Otro requisito común es ejecutar las animaciones solo cuando sean visibles para el usuario.

Conclusión

Volver a crear animaciones complejas desde cero es un proceso difícil, lento y, a menudo, inexacto. Gracias a Lottie, los desarrolladores pueden capturar las animaciones de los diseñadores de manera precisa en la web o en una aplicación.

Aquí analizamos el proceso para mover algunos gráficos de After Effects de Envato Elements a una página web. Este tutorial está dirigido principalmente a los desarrolladores, por lo que omitimos los pasos para exportar los gráficos como JSON. Esto es algo que es ciertamente útil y que vale la pena explorar en un tutorial futuro (mantente atento a eso).

Aquí tienes un recordatorio de lo que construimos:

Para comprender de verdad las posibilidades de esta biblioteca y de qué manera puede ayudarte, te animo a leer la documentación en GitHub. Además, inspírate en las animaciones que puedes ver en LottieFiles.

Como siempre, ¡muchas gracias por leer!

Aprende After Effects (megacurso gratuito)

Si eres diseñador o desarrollador web, pero te gustaría intentar crear animaciones para tus proyectos, prueba nuestro completo curso de Adobe After Effects para principiantes ¡gratuitamente!

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.