Animando con Lottie

Creo que la animación en la web no sólo es divertida, sino también atractiva de tal manera que convierte a los visitantes del sitio en clientes. Piense en el botón “Me gusta” en Twitter. Cuando le das “me gusta” a un tweet, pequeñas burbujas de colores se esparcen alrededor del botón del corazón mientras parece transformarse en un círculo alrededor del botón antes de establecerse en el estado final de “me gusta”, un relleno rojo. Sería mucho emocionante menos si el corazón simplemente pasara de estar delineado a llenarse. Esa emoción y satisfacción es un ejemplo perfecto de cómo se puede utilizar la animación para mejorar la experiencia del usuario.

Este artículo presentará el concepto de renderizar animaciones de Adobe After Effects en la web con Lottie, que puede hacer que se puedan realizar animaciones avanzadas, como el botón de Twitter.

Bodymovin es un complemento para Adobe After Effects que exporta animaciones como JSON, y Lottie es la biblioteca que las representa de forma nativa en dispositivos móviles y en la web. Fue creado por Hernán Torrisi. Si estás pensando Oh, no uses After Effects, este artículo probablemente no sea para mí , espera un momento. Tampoco uso After Effects, pero usé Lottie en un proyecto.

Por supuesto, no es necesario utilizar Lottie para hacer animaciones en la web. Una alternativa es diseñar animaciones desde cero. Pero eso puede llevar mucho tiempo, especialmente para los tipos complejos de animaciones en los que Lottie es buena. Otra alternativa es utilizar animaciones GIF, que son ilimitadas en los tipos de animación que pueden mostrar, pero que normalmente tienen el doble de tamaño que los archivos JSON que produce Bodymovin.

Así que entremos en ello y veamos cómo funciona.

Obtener el JSON

Para utilizar Lottie, necesitamos un archivo JSON que contenga la animación de After Effects. Afortunadamente para nosotros, Icons8 tiene muchos íconos animados gratuitos aquí en formatos JSON, GIF y After Effects.

Agregar el script a HTML

También necesitamos obtener la biblioteca JavaScript del reproductor Bodymovin en nuestro HTML y llamar a su loadAnimation()método. Los fundamentos se demuestran aquí:

div/divscript src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.4/lottie.min.js"script  var animation = bodymovin.loadAnimation({  // animationData: { /* ... */ },  container: document.getElementById('icon-container'), // required  path: 'data.json', // required  renderer: 'svg', // required  loop: true, // optional  autoplay: true, // optional  name: "Demo Animation", // optional});/script

Activar la animación.

Una vez que la animación se haya cargado en el contenedor, podemos configurarla cómo queremos que se active y qué acción debe activarla con los detectores de eventos. Estas son las propiedades con las que tenemos que trabajar:

• container: el elemento DOM en el que se carga la animación
• path: la ruta relativa del archivo JSON que contiene la animación
• renderer: el formato de la animación, incluidos SVG, lienzo y HTML
• loop: booleano para especificar si la animación debe repetirse o no
• autoplay: booleano para especificar si la animación debe reproducirse o no tan pronto como se carga
• name: nombre de la animación para futuras referencias

Tenga en cuenta que en el ejemplo anterior la animationDatapropiedad está comentada. Es mutuamente excluyente con la pathpropiedad y es un objeto que contiene los datos animados exportados.

Probemos un ejemplo

Me gustaría demostrar cómo usar Lottie con este ícono animado de control de reproducción/pausa de Icons8:

La biblioteca del reproductor Bodymovin está alojada estáticamente aquí y se puede colocar en HTML de esa manera, pero también está disponible como paquete:

npm install lottie-web ### or yarn add lottie-web

Y luego, en su archivo HTML, incluya el script de la distcarpeta en el paquete instalado. También puedes importar la biblioteca como un módulo desde Skypack:

import lottieWeb from "https://cdn.skypack.dev/lottie-web";

Por ahora, nuestro botón de pausa está en bucle y también se reproduce automáticamente:

Cambiemos eso para que la animación se active mediante una acción.

Animar con un disparador

Si lo apagamos autoplay, obtendremos un ícono de pausa estática porque así fue como se exportó desde After Effects.

¡Pero no te preocupes! Lottie proporciona algunos métodos que se pueden aplicar a instancias de animación. Dicho esto, la documentación del paquete npm es más completa.

Necesitamos hacer un par de cosas aquí:

• Haga que se muestre inicialmente como el estado de “reproducción”.
• Anímelo al estado “en pausa” al hacer clic.
• Anima entre los dos en los clics posteriores.

El goToAndStop(value, isFrame)método es apropiado aquí. Cuando la animación se ha cargado en el contenedor, este método configura la animación para que vaya al valor proporcionado y luego se detiene allí. En esta situación, tendremos que encontrar el valor de la animación cuando esté en juego y configurarlo. El segundo parámetro especifica si el valor proporcionado se basa en el tiempo o en el marco. Es un tipo booleano y el valor predeterminado es false(es decir, valor basado en tiempo). Como queremos configurar la animación en el cuadro de reproducción, la configuramos en true.

Un valor basado en el tiempo establece la animación en un punto particular de la línea de tiempo. Por ejemplo, el valor de tiempo al comienzo de la animación, cuando está en pausa, es 1. Sin embargo, un valor basado en cuadros establece la animación en un valor de cuadro particular. Un fotograma, según TechTerms, es una imagen individual en una secuencia de imágenes. Entonces, si configura el valor del cuadro de la animación en 5, la animación pasa al quinto cuadro de la animación (la “secuencia de imágenes” en esta situación).

Después de probar diferentes valores, descubre que la animación se reproduce desde los valores de fotograma del 11 al 16. Por lo tanto, elige 14 para estar seguro.

Ahora tenemos que configurar la animación para que cambie y se detenga cuando el usuario haga clic en ella y se reproduzca cuando el usuario vuelva a hacer clic en ella. A continuación, necesitamos el playSegments(segments, forceFlag)método. El segmentsparámetro es un tipo de matriz que contiene dos números. El primer y segundo número representan el primer y último fotograma que debe leer el método, respectivamente. Es forceFlagun valor booleano que indica si el método debe activarse inmediatamente o no. Si se establece en false, esperará hasta que la animación se reproduzca con el valor especificado como el primer fotograma de la segmentsmatriz antes de activarse. Si true, reproduce los segmentos inmediatamente.

Aquí, creé una bandera para indicar cuándo reproducir los segmentos desde reproducir hasta pausar y desde pausa hasta reproducir. También configuré el forceFlagvalor booleano trueporque quiero una transición inmediata.

¡Así que ahí lo tenemos! ¡Presentamos una animación de After Effects al navegador! Gracias Lottie!

¿Lienzo?

Prefiero usar SVG como renderizador porque admite escalado y creo que genera las animaciones más nítidas. Canvas no se representa tan bien y tampoco admite el escalado. Sin embargo, si desea utilizar un lienzo existente para representar una animación, hay algunas cosas adicionales que deberá hacer.

haciendo más

Las instancias de animación también tienen eventos que también se pueden usar para configurar cómo debe actuar la animación.

Por ejemplo, en el lápiz a continuación, agregué dos detectores de eventos a la animación y configuré algo de texto para que se muestre cuando se activen los eventos.

Todos los eventos están disponibles en los documentos del paquete npm. Con eso digo, ¡adelante y renderiza algunas animaciones increíbles!