aNvKnmBxJ8fZumvCfveQw6 1024 80  Exportar las animaciones de After Effects a HTML5

Exportar las animaciones de After Effects a HTML5

Deje atrás los archivos GIF de gran tamaño poniendo a prueba la utilidad Bodymovin. Las animaciones nativas para la WWW se han hecho presentes para quedarse. Son omnipresentes en muchas aplicaciones y sitios web. Empezando por los movimientos sutiles que ayudan a dar vida a diseños de interfaz de usuario (UI), pasando por las experiencias de Canvas completamente animadas hasta los experimentos de WebGL que están cambiando completamente lo que se pensaba era imposible de realizar en un navegador.

aNvKnmBxJ8fZumvCfveQw6 1024 80  Exportar las animaciones de After Effects a HTML5

Si bien el nivel creativo de los desarrolladores y las capacidades procesamiento de los navegadores han ido en aumentando, los trabajos de animación en la web han sido durante mucho tiempo de pobre nivel en comparación con el vídeo (algo a lo que la comunidad de desarrolladores de gráficos en movimiento se ha acercado con mucha reserva durante años).

Los desarrolladores han preferido depender de bibliotecas como GreenSock y Snap.svg para referir el trabajo pesado de reproducir la animación haciendo uso de JavaScript. A pesar de que estas herramientas brindan cierto grado de flexibilidad, no se igualan a la precisión y sutileza que se puede conseguir en una animación al hacer uso de su propia línea de tiempo y los gráficos facilitados por After Effects CC. Desde el punto de vista de un desarrollador web, After Effects es muy correcto para cambiar y evaluar el movimiento antes de asignarlo al código.

b5MGbbWn3sodnSdHuuYYv6 970 80  Exportar las animaciones de After Effects a HTML5
Bodymovin: la mágica función ‘render for web’ que Adobe olvidó [Créditos: Hungry Sandwich Club]
Le presentamos a Bodymovin, una innovadora extensión para Adobe After Effects que exporta la animación directamente desde After Effects a JavaScript para que se muestre y manipule en el navegador. Creada por Hernán Torrisi, Bodymovin elimina muchas de las barreras entre el animador y el desarrollador. En su nivel base, el plugin actúa como la mágica función de ‘renderizado para web’ que Adobe dejó de lado. En su nivel más avanzado abre nuevas posibilidades para la animación interactiva.

Bodymovin es un eslabón en la cadena de herramientas, plugins y sistemas que se elevan para cumplir con algunas de estas nuevas posibilidades. Tanto Lottie de Airbnb como los Keyframes de Facebook se construyen sobre estos cimientos, y finalmente están trayendo la herramienta de animación más poderosa a la web.

¿Por qué usar Bodymovin?

SVG se apoderó de Internet y ha traído consigo la expectativa de que todo sea de alta definición, rápido y escalable. Bodymovin renderiza todo en su composición a un SVG bellamente nítido que mantiene su calidad vectorial sin importar el tamaño. Olvídese de la obligación de bajar el peso de los GIF’s o de obligar a los usuarios a subir ficheros de vídeo de gran tamaño.

Además de simplificar el proceso de exportación de sus animaciones, Bodymovin abre un mayor potencial para que los desarrolladores puedan ser creativos con nuevas experiencias interactivas. Echa un vistazo a CodePen para ver algunas de las fantásticas formas en que se ha utilizado la extensión, desde los equipos de IK interactivos hasta la animación de texto interactivo a medida que se escribe.

Pn95aH84puquQCYr6NDLx6 970 80  Exportar las animaciones de After Effects a HTML5
Todo se renderiza a un SVG amigable para la web que es a la vez nítido y ligero

La animación exportada puede ser manipulada en el navegador como cualquier otro elemento, permitiéndonos pensar en la animación como una herramienta interactiva y experimental dentro del diseño web. Y ahora gracias a Bodymovin, llevar sus animaciones a la web nunca ha sido tan fácil. En este tutorial aprenderá a exportar una animación desde After Effects y a crear una sencilla animación en bucle que responda al clic del usuario.

Cómo preparar los archivos de After Effects

La compatibilidad con las funciones de After Effects ha mejorado mucho y puedes esperar obtener resultados bastante buenos nada más empezar a utilizarla. Dicho esto, las capas 3D de tu juego no serán agradables, así que ten en cuenta los límites antes de empezar. Antes de comenzar un proyecto, siempre descarga la última versión de Bodymovin y comprueba la página de GitHub para ver qué características están actualmente soportadas.

No se apresure a pasar a la parte divertida… los archivos ordenados hacen una mente ordenada. En este caso también ayudarán a quitarle algo de trabajo extra al navegador y a ofrecerte una reproducción suave como la seda. En primer lugar, asegúrese de que su contenido se encuentra en capas de forma de After Effects para obtener toda la potencia de los vectores. Para convertir cualquier archivo de Illustrator en capas de forma, sólo tienes que hacer clic con el botón derecho del ratón y elegir Crear formas a partir de una capa vectorial. Las capas que no sean de forma se convertirán en imágenes y no se renderizarán como vectores en esta fase.

A continuación, compruebe las capas y subcapas; es muy probable que pueda simplificar el contenido de la forma sin sacrificar nada. Intente reducir el número de grupos, rutas y rellene sólo lo esencial.

Tenga cuidado con las máscaras

Las máscaras son una forma fácil de deslizarse en esta etapa. Tenga en cuenta que las máscaras alfa funcionarán con el renderizador SVG, pero no se mostrarán si decide cambiar a Canvas. Las máscaras pueden ser costosas en cuanto a rendimiento, así que utilícelas de manera eficiente.

Renderizado

Bodymovin funciona en dos partes: una extensión de After Effects que convierte los datos de la animación en un archivo JSON y un reproductor Bodymovin.js para incluir en su página web que puede interpretar este archivo y renderizarlo en el navegador.

¿Crees que tus archivos están listos para ser utilizados? Abra la extensión Bodymovin a través de Ventana > Extensiones y luego Bodymovin.

Una vez que pulse refrescar, verá una lista de todas las composiciones en este proyecto de After Effects. Seleccione la composición elegida y, a continuación, elija una carpeta de destino dentro de su proyecto web. Cuando esté satisfecho, haga clic en renderizar y vea cómo sucede la magia. Cuando haya terminado, recibirá un mensaje de «terminado». Enhorabuena! Acabas de exportar un archivo JSON con toda la información que el reproductor necesita para recrear la animación.

t5vYiC7oJhEZc5o3qdSzv6 970 80  Exportar las animaciones de After Effects a HTML5
Compruebe sus capas: podría tratarse de una característica no admitida o de una expresión utilizada en After Effects

Para probar su animación recién exportada, haga clic en Previsualización > Renderizaciones actuales y recuerde que debe recorrer la línea de tiempo ya que podría detectar algo que se ve un poco diferente a lo que usted esperaría. Si detecta algún problema, retroceda y compruebe las capas; puede tratarse de una función no admitida o de una expresión utilizada en After Effects.

Algunos plugins de After Effects, como Rubberhose, son ahora compatibles con Bodymovin. Rubberhose utiliza capas de guía y capas ocultas. Para activarlas, sólo tiene que hacer clic en el engranaje de configuración que se encuentra junto a la composición elegida y marcar las características que necesite.

Si todo se ve bien, sólo hay una cosa más que debe hacer antes de dejar atrás After Effects. En esta fase deberías tener un archivo data.json nuevo que describa tu animación, pero no un reproductor Bodymovin para interpretarla. En la extensión, haz clic en el botón ‘Get the player’ en la parte superior derecha y guárdalo con tu archivo JSON.

Cargar la animación

Ahora que tienes todo lo que necesitas, vamos a saltar directamente al código y establecer los fundamentos para que tu animación se muestre en la página.

Primero haz un nuevo contenedor #anim_container para guardar tu animación. También necesitas incluir el archivo bodymovin.js antes de la etiqueta de cierre de body. Después dile a Bodymovin todo acerca de tu animación y cárgalo en el nuevo contenedor.

Vamos a repasar la configuración paso a paso:

     var container = document.getElementById('anim_container');
      // Configurar nuestra animación 

      var animData = {
          container: container,
          renderer: 'svg',
          autoplay: true,
          loop: true,
          path : 'data.json'
      };
      var anim = bodymovin.loadAnimation(animData);

Es necesario definir todos los parámetros de la animación. Dígale a Bodymovin el contenedor en el que quiere que se cargue la animación y luego dígale que renderice la animación como elementos SVG. A continuación, dígale a la animación que se reproduzca tan pronto como se cargue y que desea que se reproduzca en bucle de vuelta al principio cuando haya terminado.

La propiedad path le dice al reproductor Bodymovin dónde encontrar el archivo de datos JSON para la animación. Debido a la política de uso compartido de recursos de origen cruzado (CORS), la técnica que utilizarás para acceder al archivo JSON sólo funcionará si estás en un servidor o en un servidor local. Para trabajar localmente, puedes convertir ese data.json en un archivo JavaScript que asigne el objeto a una variable. En ese caso tu configuración podría quedar así:

  <script src="js/data.js"></script>
  <script>
   var container = document.getElementById('anim_container');
    // Set up our animation 
    var animData = {
        container: container,
        renderer: 'svg',
        autoplay: true,
        loop: true,
        animationData : data
    };
    var anim = bodymovin.loadAnimation(animData);
  </script>

Actualice la página y su animación debería estar reproduciéndose dentro del contenedor. Inspecciona con tus herramientas de desarrollo y verás que cada elemento de la animación está ahora contenido en etiquetas <g>, y se está transformando en tiempo real.

Se ve increíble, ¿verdad? Ahora deberías tener una hermosa y nítida animación mostrada en el navegador (sin una miserable etiqueta de video a la vista…). La animación siempre se escalará para que quepa en su contenedor, así que ¡adelante y amplíala!

Bodymovin tiene una gama de métodos poderosos para controlar la animación después de que se haya cargado. Llamando a un método como anim.pause() o anim.setDirection() te permitirá manipular la reproducción de diferentes maneras. Veamos algunos ejemplos:

anim.setDirection(-1) reproducirá la animación a la inversa
anim.pause() y anim.play() iniciarán y detendrán la animación
anim.setSpeed(0.5) reproducirá la animación a media velocidad

Agregar interacción

En este paso explorará algunas de las diferentes maneras de añadir interacción a sus animaciones a través de JavaScript. En este ejemplo exportamos una animación After Effects con dos secciones: la sección A y la sección B. La sección A utiliza fotogramas de uno a 20 (el triángulo sostiene su pogo stick) la sección B utiliza fotogramas de 20 a 40 (el triángulo salta hacia arriba y hacia abajo en un pogo stick).

Ahora, quieres reproducir la sección A en un bucle y luego (sólo después de que el usuario haga clic) reproducir y hacer bucle la sección B. Puedes utilizar la propiedad playSegments para dividir las animaciones de esta manera. Este método tomará dos argumentos – un array con valores de inicio y final y un segundo booleano – isFrame. Si lo pones a true le dirá a la animación que lea los valores de inicio y final como frames, mientras que false le dirá que lea estos valores como tiempo.

    anim.pause();  
    anim.playSegments([0,20], true);

Al agregar esto, se le indica a Bodymovin que haga una pausa en el primer cuadro y que reproduzca sólo la animación de 0 a 20 cuadros. A medida que configures tu animación con un bucle: propiedad true, esto continuará reproduciendo la Sección A una y otra vez.

Vamos a configurar todo el ejemplo. Estarás usando dos segmentos de una animación para este ejemplo, así que crearás dos funciones:

var container = document.getElementById('anim_container');
// Set up our animation
var animData = {
    container: container,
    renderer: 'svg',
    autoplay: false,
    loop: true,
    path: 'data.json'
};
var anim = bodymovin.loadAnimation(animData);
// When the animation is loaded run our firstLoop function 
anim.addEventListener('DOMLoaded',firstLoop);
// Create our playback functions
function firstLoop() {
     anim.playSegments([0,20], true);
};
function secondLoop() {
     anim.playSegments([20,40], true);
};
// Listen for a click event
container.addEventListener('click', function(event) {
     anim.addEventListener( 'loopComplete', secondLoop);
});

¡Así se hace! Ahora tu animación se mantendrá en bucle hasta que el usuario haga clic en ella, entonces comenzará el segundo bucle. El único problema ahora es que un salto como este es muy abrupto y puede arruinar la suavidad de la animación.

Una situación ideal es incluir una tercera sección en la animación, una que pase de sostener el pogo stick a saltar sobre él. Ahora tu estructura se verá algo así:

firstLoop – frame 0 a 20
transition – frame 20 a 30
secondLoop – frame 30 a 50

Queremos que tu animación permanezca en el primer bucle hasta que se haga clic en ella. En ese momento querrás esperar al final del bucle en el que te encuentras y pasar a la transición. Después de que la transición haya terminado, muévete a tu segundo bucle. Esto suena complicado, pero quédate conmigo! Aquí tienes tu código completo:

var container = document.getElementById('anim_container');
// Set up our animation
var animData = {
 container: container,
 renderer: 'svg',
 autoplay: false,
 loop: true,
 path: 'data.json'
};
var anim = bodymovin.loadAnimation(animData);
// When the animation is loaded run our firstLoop function 
anim.addEventListener('DOMLoaded',firstLoop);
// Create our playback functions
function firstLoop() {
  anim.playSegments([0,20], true);
};
function transition() {
   anim.playSegments([20,30], true);
   anim.removeEventListener('loopComplete');
   anim.addEventListener('loopComplete', secondLoop );
};
function secondLoop() {
    anim.playSegments([30,100], true);
    anim.removeEventListener('loopComplete');
};
// Listen for a click event
container.addEventListener('click', function(event) {
     anim.addEventListener( 'loopComplete', transition );
});

Al hacer clic, estás usando un listener loopComplete para esperar hasta que llegues al último cuadro del bucle, y luego ejecutar tu función transition(). Aquí se elimina el último listener, se reproduce el siguiente conjunto de cuadros y luego se vuelve a hacer lo mismo. Después de que la transición haya terminado llamará a secondLoop().

¡Eso es todo!

Hoy has trabajado con algunas de las características de Bodymovin, pero si estás interesado en aprender más sobre el plugin, puedes encontrar un montón de información en la página GitHub de Bodymovin. Para más ejemplos, echa un vistazo a la siempre impresionante colección Codepen de Bodymovin.

Esperamos que este tutorial te haya dado una idea de los diferentes tipos de maneras en que puedes combinar el uso de After Effects y Bodymovin para producir alguna animación supercool para la web!

HZpkvQnnsvrobRqgdsT6x6 970 80  Exportar las animaciones de After Effects a HTML5
Una sección separada para cada parte de la animación

Ahora puedes configurar la animación para que se exporte a la web, llevar los archivos exportados al navegador y hacer que la animación responda a los clics. Piensa más allá de los archivos MP4 que utilizabas hasta ahora y busca en Bodymovin la posibilidad de crear experiencias web mucho más ricas en el futuro.

Ser capaz de involucrar a los animadores en el proceso de desarrollo es cada vez más importante, y el campo de la animación web se mueve a una velocidad increíble. Con una colección cada vez mayor de nuevas extensiones, plugins y frameworks, los animadores y desarrolladores pueden esperar que este proceso sea más fácil y mejor con el tiempo. Por mi parte, no puedo esperar a ver lo que nos depara el futuro.

 

Deja un comentario