Exportar After Effects Animations a HTML5

[dieciséis]

Ingresar Bodymovin , una extensión innovadora para Adobe After Effects que exporta la animación directamente desde los efectos después de los efectos a JavaScript para ser mostrados y manipulados en el navegador. Creado por Hernan Torrisi , Bodymovin elimina muchas de las barreras entre el animador y el desarrollador. En su nivel base, el plugin actúa como la característica mágica 'Render para la web' de Adobe Olvidó. En su mayor avanzado, abre nuevas posibilidades de animación interactiva.

Bodymovin es un enlace en la cadena de herramientas, complementos y sistemas que se elevan para satisfacer algunas de estas nuevas posibilidades. Lottie de Airbnb y Fotogramas clave de Facebook Ambos se basan en estas fundaciones, y finalmente están trayendo la herramienta de animación más poderosa a la web.

¿Por qué usar bodymovin?

SVG ha tomado a través de Internet y ha traído consigo la expectativa de que todo debería ser de alta calidad, luz y escalable. Bodymovin hace que todo en su composición a SVG bellamente crujiente que mantiene su calidad vectorial en cualquier tamaño. No más comprometer para aligerar ese GIF o forzar a sus usuarios a cargar archivos de video hinchados.

Además de simplificar el proceso de exportación de sus animaciones, Bodymovin se abre manera más potencial para que los desarrolladores sean creativos con nuevas experiencias interactivas. Echa un vistazo a Codepen para algunas de las formas fantásticas, se ha utilizado la extensión, desde las plataformas IK interactivas hasta el texto interactivo de tipo AS-You-Tipo.

Para simplificar aún más su proceso de desarrollo web, intente un Creador de sitios web .

La animación exportada se puede manipular 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, debido a la bodymovin, lo que lleva a las animaciones a la web nunca ha sido tan fácil. En este tutorial, aprenderá a exportar una animación de After Effects y crear una simple animación de bucle que responda al clic del usuario.

Cómo preparar sus archivos de efectos secundarios

El soporte para las características de efectos después de los efectos se ha mejorado enormemente y puede esperar obtener resultados bastante buenos fuera de la caja. Dicho esto, sus lujosas capas de vuelo en 3D no jugarán bien, así que tenga en cuenta los límites antes de comenzar. Antes de comenzar un proyecto, siempre descargue la última versión de Bodymovin y marque la página GitHub para ver qué funciones se admiten actualmente.

No seas demasiado apresurado para pasar a la parte divertida ... Los archivos ordenados hacen una mente ordenada. En este caso, también ayudarán a llevar algunos de los trabajos adicionales alejados del navegador y le darán una reproducción suave sedosa. En primer lugar, querrá asegurarse de que su contenido esté en las capas de forma de efectos para obtener una potencia de vector completo. Para convertir cualquier archivo de Illustrator para configurar las capas, puede simplemente hacer clic con el botón derecho y elegir Crear formas de la capa de vectores. Todas las capas que no sean formas en esta etapa se convertirán en imágenes y no se volverán a ser vectores.

A continuación, tenga un cheque a través de sus capas y sulayers; Hay una buena posibilidad de que puedas simplificar los contenidos de la forma sin sacrificar nada. Trate de reducir el número de grupos, caminos y se llena a los elementos esenciales desnudos.

Cuídate de máscaras

Las máscaras son una forma fácil de deslizarse en esta etapa. Tenga en cuenta que las máscaras alfa trabajarán con el renderizador SVG, pero no aparecerán si elige cambiar a Canvas. Las máscaras pueden ser costosas en el rendimiento, así que usándolas de manera eficiente.

Representación

Bodymovin trabaja en dos partes: una extensión de After Effects que convierte datos de animación a un archivo JSON y un jugador BodyMovin.js para incluir en su página web que puede interpretar este archivo y hacerlo en el navegador.

¿Crees que tus archivos son buenos para ir? Abra la extensión de Bodymovin a través de la ventana y GT; Extensiones y luego bodymovin.

Una vez que llegue a Actualizar, verá una lista de todas las composiciones en este proyecto de efectos. Seleccione su comporte elegido y luego elija una carpeta de destino dentro de su proyecto web. Cuando esté feliz, simplemente haga clic en Render y ver a la magia que suceda. Cuando se hace, obtendrás un mensaje 'terminado'. ¡Felicidades! Acabas de exportar un archivo JSON con toda la información que el jugador necesita para recrear la animación.

Para probar su animación recién exportada, haga clic en Preview & GT; Actualiza y recuerde fregar por la línea de tiempo, ya que podría exhibir algo que se ve un poco diferente a lo que usted esperaría. Si lo hace, los problemas saltan hacia atrás y revise sus capas, podría ser una característica no compatible o una expresión utilizada en los efectos secundarios.

Algunos complementos después de los efectos, como la goma, ahora admiten bodymovin. Rubberhose hace uso de capas de guía y capas ocultas. Para activarlos, simplemente haga clic en la configuración COG junto a su composición elegida y marque las funciones que necesita.

Si todo se ve bien, hay una cosa más que debes hacer antes de que te vayas después de los efectos. En esta etapa, debe tener un archivo Fresh Data.Json que describe su animación, pero ningún jugador de Bodymovin para interpretarlo. En la extensión, haga clic en el botón 'Obtener el reproductor' en la parte superior derecha y guárdelo con su archivo JSON.

Cargar la animación

Ahora tiene todo lo que necesita, saltemos directamente al código y establezca los conceptos básicos para mostrar su animación en la página.

Primero haz un nuevo contenedor. #anim_container para mantener su animación. También necesitas incluir el bodymovin.js archivo antes de la etiqueta del cuerpo de cierre. A continuación, informe a BodyMovin todo acerca de su animación y carguelo en el nuevo contenedor.

Caminemos por la configuración paso a paso:

 VAR Container = DOCUMENT.GETELEMENTBYID ('Anim_Container');
// configurar nuestra animación

var animdata = {
Contenedor: Contenedor,
Render: 'svg',
AutoPlay: verdadero,
Loop: verdadero,
PATH: 'DATA.JSON'
};
var anim = bodymovin.loaneimation (animdata); 

Necesitas definir todos los parámetros para la animación. Dile a Bodymovin el contenedor con el que desea que la animación se cargue y luego déle que haga la animación como elementos SVG. A continuación, informe a la animación que juegue tan pronto como esté cargada y que la desee volver al inicio cuando haya terminado.

La propiedad PATH le dice al jugador 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 solo funcionará si está en un servidor o un servidor local. Para trabajar localmente, puede hacer que Data.Json en un archivo JavaScript que asigne el objeto a una variable. En ese caso, su configuración puede verse así:

& lt; script src = "js / data.js" & gt; & lt; / script & gt;
& lt; script & gt;
vario contenedor = document.getelementbyid ('anim_container');
// configurar nuestra animación
var animdata = {
Contenedor: Contenedor,
Render: 'svg',
AutoPlay: verdadero,
Loop: verdadero,
AnimationData: Datos
};
var anim = bodymovin.loadanimation (animdata);
& lt; / script & gt; 

Actualice la página y su animación debe estar jugando dentro del contenedor. Seleccione con sus herramientas DEV y verá que cada elemento en la animación ahora está contenido en & lt; g & gt; Etiquetas, y se está transformando en tiempo real.

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

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 () Le permitirá manipular la reproducción de diferentes maneras. Veamos algunos ejemplos:

• anim.setdirection (-1) jugará la animación a la inversa
• anim.pause () y anim.play () comenzará y detendrá la animación
• anim.setspeed (0.5) Tocará la animación a media velocidad.

Añadir interacción

En este siguiente paso, explorará algunas de las diferentes formas de agregar interacción a sus animaciones a través de JavaScript. En este ejemplo, exportamos una animación de After Effects con dos secciones: Sección A y Sección B. SECCIÓN A Utiliza marcos de uno a 20 (Triángulo está sosteniendo su Pogo Stick) Sección B Use Frames de 20 a 40 (Triángulo está saltando hacia arriba y hacia abajo en un palo de pogo).

Ahora, desea reproducir la sección A en un bucle y luego (solo después de que el usuario hace clic en) Play and Loop Sección B. Puede hacer uso de la propiedad PlaySegments para dividir las animaciones de esta manera. Este método tomará dos argumentos, una matriz con valores de inicio y final y un segundo booleano - isframe. Ajustar esto a VERDADERA le dirá a la animación que lea los valores de inicio y finalización como marcos, mientras que False le dirá que lea estos valores con el tiempo.

 Anim.Pause ();
anim.playsegments ([0,20], VERDADERO); 

Agregar esto le dice a Bodymovin a pausar en el primer cuadro y jugar solo la animación de 0 a 20 cuadros. A medida que configuras tu animación con un Loop: verdadero Propiedad Esto continuará reproduciendo la sección una y otra vez.

Configuremos todo el ejemplo. Usted utilizará dos segmentos de una animación para este ejemplo, por lo que creará dos funciones:

 VAR Container = DOCUMENT.GETELEMENTBYID ('Anim_Container');
// configurar nuestra animación
var animdata = {
Contenedor: Contenedor,
Render: 'svg',
AutoPlay: Falso,
Loop: verdadero,
PATH: 'DATA.JSON'
};
var anim = bodymovin.loadanimation (animdata);
// Cuando se carga la animación, ejecute nuestra función de primerlo
anim.addeventlistener ('domaded', firstloop);
// crear nuestras funciones de reproducción
Función FirstLoop () {
anim.playsegments ([0,20], verdadero);
};
Función SecondLOP () {
anim.playsegments ([20,40], verdadero);
};
// escuchar un evento de clic
contenedor.addeventlistener ('clic', función (evento) {
anim.addeventlistener ('loopcomplete', SecondLOP);
}); 

¡Camino a seguir! Ahora su animación se mantendrá en bucle hasta que el usuario haga clic en él, 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 a la animación, una que la transición de sujetar el Pogo Stick para saltar. Ahora tu estructura se verá así:

• primero - Marco 0 a 20
• transición - Marco 20 a 30.
• bobo - Marco de 30 a 50.

Queremos que su animación se quede en el primer bucle hasta que haga clic. En ese momento, querrá esperar al final del bucle en la que está actualmente en la transición. Después de que se realice la transición, muévase a su segundo bucle. ¡Esto suena complicado pero quédate conmigo! Aquí está su código en su totalidad:

vario contenedor = document.getelementbyid ('anim_container');
// configurar nuestra animación
var animdata = {
Contenedor: Contenedor,
Render: 'svg',
AutoPlay: Falso,
Loop: verdadero,
PATH: 'DATA.JSON'
};
var anim = bodymovin.loadanimation (animdata);
// Cuando se carga la animación, ejecute nuestra función de primerlo
anim.addeventlistener ('domaded', firstloop);
// crear nuestras funciones de reproducción
Función FirstLoop () {
anim.playsegments ([0,20], verdadero);
};
Transición de función () {
anim.playsegments ([20,30], verdadero);
anim.RemoveEventListener ('Loopcompletete');
anim.addeventlistener ('loopcomplete', SecondLOP);
};
Función SecondLOP () {
anim.playssegments ([30,100], verdadero);
anim.RemoveEventListener ('Loopcompletete');
};
// escuchar un evento de clic
contenedor.addeventlistener ('clic', función (evento) {
anim.addeventlistener ('loopcomplete', transición);
}); 

En el clic, estás usando un lookcomplete oyente para esperar hasta que llegue al último marco del bucle, luego ejecute su transición() función. Aquí usted quita el último oyente, toque el siguiente conjunto de cuadros y luego vuelva a hacer lo mismo. Después de que termine la transición. SecondLOP () .

¡Eso es!

Has trabajado con algunas de las características de Bodymovin hoy, pero si está interesado en aprender más sobre el complemento, puede encontrar una carga de información sobre el Bodymovin github página. Para obtener más ejemplos, consulte la impresionante colección Bodymovin Codepen.

¡Esperamos que este tutorial le haya dado una idea de los diferentes tipos de formas en que puede combinar el uso de los efectos y la bodymovina para producir una animación de supercool para la web.

Ahora puede configurar la animación para ser exportada para la Web, traiga sus archivos exportados al navegador y haga que su animación responda al clic. Piense más allá de los archivos MP4 que anteriormente estabas utilizando y mirar a Bodymovin para crear experiencias web mucho más ricas en el futuro.

Ser capaz de involucrar a los animadores de cerca 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, complementos y marcos, animadores y desarrolladores, puede esperar que este proceso se vuelva más fácil y mejor en el tiempo. Yo por uno no puedo esperar para ver lo que sostiene el futuro.

¿Tienes muchos archivos para respaldar? Echa un vistazo a nuestro almacenamiento en la nube Picks.

Este artículo apareció originalmente en revista neta en 2017. Suscríbete aquí .

Leer más:

• Crea y anima los polígonos SVG.
• 14 increíbles adobe Tras complementos de efectos
• Crea guitarrotas para animaciones web.