Introducción
La animación en la web está aquí para quedarse. Está en todo, desde los movimientos sutiles que ayudan a dar vida a nuestro UI, hasta experiencias de canvas totalmente animadas y experimentos WebGL que desafían lo que antes creíamos que era posible en el navegador.
Mientras que la creatividad de los desarrolladores y las capacidades de los navegadores bajan en tendencia, la animación en la web ha tenido, durante mucho tiempo, una mala relación con el vídeo, algo que la comunidad de Motion Graphics ha abordado con cautela durante años.
Los desarrolladores han confiado en bibliotecas como GreenSock y Snap.svg para reproducir la animación a través de JavaScript. Aunque estas herramientas han dado mucha flexibilidad, no se pueden comparar con la precisión y sutileza de la animación que se puede conseguir utilizando la propia línea de tiempo de After Effects CC y facilitando los gráficos. Desde una perspectiva web, After Effects es muy adecuado para ajustar y probar el movimiento antes de asignarlo al código.
Descubre Bodymovin, una innovadora extensión de Adobe After Effects que exporta la animación directamente de After Effects a JavaScript para mostrarla y manipularla en el navegador. Creado por Hernán Torrisi, Bodymovin elimina muchas de las barreras entre animador y desarrollador. En su nivel básico, el plugin actúa como la mágica función ‘render for web’ que Adobe olvidó. En su versión más avanzada abre nuevas posibilidades para la animación interactiva.
Bodymovin es un eslabón en la cadena de herramientas, plugins y sistemas que surgen para satisfacer algunas de estas nuevas posibilidades. Lottie, de Airbnb, y Keyframes, de Facebook, ambos basados en estos fundamentos, y finalmente están trayendo la herramienta de animación más poderosa a la web.
¿Por qué usar Bodymovin?
SVG se ha hecho cargo de Internet y ha traído consigo la expectativa de que todo debería ser de alta calidad, ligero y escalable. Bodymovin ofrece todo lo que hay en su composición a un SVG bellamente nítido que mantiene su calidad de vector en cualquier tamaño. No más compromisos para aligerar ese GIF o forzar a sus usuarios a cargar archivos de vídeo hinchados.
Además de simplificar el proceso de exportación de tus animaciones, Bodymovin ofrece a los desarrolladores un mayor potencial para 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 IK interactivos hasta el texto interactivo animado a medida que escribes.
La animación exportada puede ser manipulada en el navegador como cualquier otro elemento, lo que nos permite pensar en la animación como una herramienta interactiva y experimental dentro del diseño web. Y ahora, gracias a Bodymovin, llevar tus animaciones a la web nunca ha sido tan fácil. En este tutorial aprenderás a exportar una animación de After Effects y a crear una animación de bucle simple que responda al clic del usuario.
Cómo preparar los archivos de After Effects
La compatibilidad con las funciones de After Effects ha mejorado enormemente y es posible que obtengas buenos resultados de inmediato. Dicho esto, tus fantásticas capas de vuelo en 3D no jugarán bien, así que ten en cuenta los límites antes de empezar. Antes de comenzar un proyecto, descarga siempre la última versión de Bodymovin y consulta la página de GitHub para ver qué funciones son compatibles actualmente.
No te precipites a la hora de pasar a la parte divertida…. los archivos ordenados crean una mente ordenada. En este caso, también te ayudará a eliminar parte del trabajo extra del navegador y te dará una reproducción suave y sedosa. En primer lugar, hay que asegurarse de que el contenido se encuentra en capas en forma de After Effects para obtener la máxima potencia vectorial. Para convertir cualquier archivo de Illustrator en capas de forma, simplemente haz clic con el botón derecho del ratón y selecciona Crear formas a partir de la capa vectorial. Cualquier capa que no sea de forma en esta etapa se convertirá en imágenes y no se renderizarán como vectores.
A continuación, revisa tus capas y subcapas; es muy probable que puedas simplificar el contenido de la forma sin sacrificar nada. Trata de reducir el número de grupos, rutas y rellenos a lo esencial.
Cuidado con las máscaras
Las máscaras son una forma fácil de equivocarse en esta etapa. Ten en cuenta que las máscaras alfa funcionarán con el renderizador SVG pero no aparecerán si decides cambiar a Canvas. Las máscaras pueden ser costosas en rendimiento, así que úsalas eficientemente.
Renderizado
Bodymovin funciona en dos partes: una extensión de After Effects que convierte los datos de animación en un archivo JSON y un reproductor de Bodymovin.js para incluir en tu página web que puede interpretar este archivo y renderizarlo en el navegador.
¿Pensas que tus archivos están listos? Abre la extensión Bodymovin a través de Ventana > Extensiones y luego Bodymovin.
Una vez que pulses actualizar, verás una lista de todas las composiciones de este proyecto de After Effects. Selecciona la compilación elegida y luego elige una carpeta de destino dentro de tu proyecto web. Cuando estés contento, haz clic en renderizar y verás cómo ocurre la magia. Cuando esté hecho, recibirás un mensaje de “terminado”. Felicitaciones! Acabas de exportar un archivo JSON con toda la información que necesita el reproductor para recrear la animación.
Para probar la animación recién exportada, haz clic en Previsualizar > Renders Actuales y recuerda revisar la línea de tiempo, ya que es posible que descubras algo que se ve un poco diferente a lo que esperabas. Si detectas algún problema, salta hacia atrás y comprueba tus capas, puede ser una función no compatible o una expresión utilizada en After Effects.
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_contenedor para contener tu animación. También es necesario incluir el archivo bodymovin.js antes de la etiqueta de cierre. A continuación, cuéntale a Bodymovin todo sobre tu animación y cárgala en el nuevo contenedor.
Vamos a repasar la configuración paso a paso:
var container = document.getElementById('anim_container');
// Set up our animation
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 para la animación. Dile a Bodymovin que quieres que cargue la animación en el contenedor y luego dile que la renderice como elementos SVG. A continuación, dile a la animación que se reproduzca tan pronto como se cargue y que quieres que se vuelva a reproducir en bucle hasta el inicio cuando haya terminado.
La propiedad path indica al reproductor de Bodymovin dónde encontrar el archivo de datos JSON para la animación. Debido a la política de intercambio de recursos de origen cruzado (CORS), la técnica que utilizará para acceder al archivo JSON sólo funcionará si se encuentra en un servidor o en un servidor local. Para trabajar localmente, puedes hacer que data.json sea un archivo JavaScript que asigne el objeto a una variable. En ese caso, su configuración podría verse 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>
Refresca la página y tu animación debería estar reproduciéndose dentro del contenedor. Selecciona con tus herramientas de desarrollo y verás que cada elemento de la animación está ahora contenido en etiquetas , y está siendo transformado en tiempo real.
Se ve increíble, ¿no? Ahora deberías tener una animación hermosa y nítida que se muestre en el navegador (sin una etiqueta de video a la vista…). La animación siempre se adaptará a la escala de cada contenedor, así que ¡adelante, amplíala!
Bodymovin dispone de una serie de potentes métodos para controlar la animación una vez cargada. Llamar 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
Añadir interacción
En este siguiente paso explorarás algunas de las diferentes formas de añadir interacción a tus animaciones a través de JavaScript. En este ejemplo exportamos una animación de 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 palo de pogo), mientras que la sección B utiliza fotogramas de 20 a 40 (el triángulo salta arriba y abajo en un palo de pogo).
Ahora, si quieres reproducir la sección en un bucle, entonces (sólo después de que el usuario haga clic) reproduce y loopea la sección B. Puedes usar la propiedad playSegments para dividir las animaciones de esta manera. Este método tomará dos argumentos – un array con valores iniciales y finales y un segundo Booleano – isFrame. Poner esto a true le dirá a la animación que lea los valores de inicio y final como cuadros, mientras que false le dirá que lea estos valores como tiempo.
anim.pause();
anim.playSegments([0,20], true);
Añadiendo esto le diremos a Bodymovin que haga una pausa en el primer fotograma y reproduzca sólo la animación de 0 a 20 fotogramas. Al configurar la animación con un bucle: True Property, ésta continuará reproduciéndose una y otra vez en la Sección A.
Vamos a poner todo el ejemplo. Usarás 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 seguirá 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 brusco y puede arruinar la suavidad de la animación.
Una solución ideal sería incluir una tercera sección en la animación, una que pase de sostener el palo del pogo a saltar sobre él. Ahora tu estructura se vería algo así:
- firstLoop – cuadro 0 a 20
- transition– marco 20 a 30
- secondLoop – cuadro de 30 a 50
Queremos que tu animación permanezca en el primer bucle hasta que se haga clic en ella. En ese punto 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, continúe con el segundo bucle. Esto suena complicado, ¡pero quédate conmigo! Aquí está 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 oyente de loopComplete para esperar hasta que llegues al último cuadro del bucle, y luego ejecutar la función transition(). Aquí se elimina el último oyente, se reproduce el siguiente conjunto de fotogramas y se vuelve a hacer lo mismo. Una vez finalizada la transición se llamará secondLoop().
¡Eso es todo!
Has trabajado con algunas de las características de Bodymovin hoy en día, pero si estás interesado en aprender más sobre el plugin, puedes encontrar un montón de información en la página de Bodymovin GitHub. Para más ejemplos, echa un vistazo a la siempre impresionante colección Bodymovin CodePen.
Espero que este tutorial te haya dado una idea de los diferentes tipos de formas en las que puedes combinar el uso de After Effects y Bodymovin para producir una animación fantástica para la web.
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 al clic. Piensa más allá de los archivos MP4 que utilizabas anteriormente y mira a Bodymovin para 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 está moviendo increíblemente rápido. 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. No puedo esperar a ver qué me depara el futuro.