Creo que la animación en la web no solo es divertida, sino que atrae de tal manera que convierte a los visitantes del sitio en clientes. Piense en el botón “Me gusta” de Twitter. Cuando le da “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 asentarse en el estado final de “me gusta”, un relleno rojo. Sería mucho menos emocionante si el corazón 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 renderizado de animaciones de Adobe After Effects en la web con Lottie, que puede hacer que las animaciones avanzadas, como ese botón de Twitter, sean alcanzables.
Bodymovin es un complemento para Adobe After Effects que exporta animaciones como JSON, y Lottie es la biblioteca que las renderiza de forma nativa en dispositivos móviles y en la web. Fue creado por Hernán Torrisi. Si estás pensando Oh, no uso After Effects, este artículo probablemente no sea para mí, espera un momento. Yo tampoco uso After Effects, pero he usado Lottie en un proyecto.
No tienes que usar Lottie para hacer animaciones en la web, por supuesto. Una alternativa es diseñar animaciones desde cero. Pero eso puede llevar mucho tiempo, especialmente para los tipos complejos de animaciones en las que Lottie es buena. Otra alternativa es usar animaciones GIF, que son ilimitadas en los tipos de animación que pueden mostrar, pero que suelen tener el doble del tamaño de los archivos JSON que produce Bodymovin.
Así que saltemos a él y veamos cómo funciona.
Obtén el JSON
Para usar 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 id="icon-container"></div>
<script 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 cargada la animación en el contenedor, podemos configurarla como queremos que se active y qué acción debería activarla con los oyentes de eventos. Ella son las propiedades con las que tenemos que trabajar:
container
: el elemento DOM en el que se carga la animaciónpath
: la ruta relativa del archivo JSON que contiene la animaciónrenderer
: el formato de la animación, incluidos SVG, lienzo y HTMLloop
: booleano para especificar si la animación debe repetirse o noautoplay
: booleano para especificar si la animación debe reproducirse tan pronto como se carguename
: nombre de la animación para futuras referencias
Tenga en cuenta en el ejemplo anterior que el animationData
La propiedad está comentada. Es mutuamente excluyente con el path
propiedad y es un objeto que contiene los datos animados exportados.
Probemos un ejemplo
Me gustaría demostrar cómo usar Lottie con este ícono de control de reproducción / pausa animado de Icons8:
La biblioteca del reproductor Bodymovin está alojada estáticamente aquí y se puede colocar en el HTML de esa manera, pero también está disponible como un paquete:
npm install lottie-web ### or yarn add lottie-web
Y luego, en su archivo HTML, incluya el script del dist
carpeta en el paquete instalado. También puede importar la biblioteca como un módulo de 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.
Animando en un gatillo
Si nos volvemos autoplay
apagado, obtenemos un icono 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 como el estado de “reproducción” inicialmente.
- Animarlo al estado “en pausa” al hacer clic
- Animar entre los dos en los siguientes clics.
El goToAndStop(value, isFrame)
El método es apropiado aquí. Cuando la animación se ha cargado en el contenedor, este método establece que la animación vaya al valor proporcionado y luego se detenga allí. En esta situación, tendríamos 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 predeterminado es false
(es decir, valor basado en el tiempo). Como queremos establecer 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 fotogramas establece la animación en un valor de fotograma en particular. Un marco, según TechTerms, es una imagen individual en una secuencia de imágenes. Entonces, si configuro el valor del marco de la animación en 5
, la animación pasa al quinto fotograma de la animación (la “secuencia de imágenes” en esta situación).
Después de probar diferentes valores, descubrí que la animación se reproduce desde los valores de cuadro 11 a 16. Por lo tanto, elegí 14 para estar seguro.
Ahora tenemos que configurar la animación para que se pause 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 segments
El pará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. El forceFlag
es un 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 en el segments
matriz antes de que se active. Si true
, reproduce los segmentos inmediatamente.
Aquí, creé una bandera para indicar cuándo reproducir los segmentos desde la reproducción hasta la pausa y desde la pausa hasta la reproducción. También configuro el forceFlag
booleano a true
porque quiero una transición inmediata.
¡Así que ahí lo tenemos! ¡Hicimos una animación de After Effects en el navegador! ¡Gracias Lottie!
¿Lienzo?
Prefiero usar SVG como mi renderizador porque admite escalado y creo que renderiza las animaciones más nítidas. Canvas no se renderiza tan bien y tampoco admite el escalado. Sin embargo, si desea utilizar un lienzo existente para renderizar una animación, hay algunas cosas adicionales que debe hacer.
Haciendo mas
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 disparen los eventos.
Todos los eventos están disponibles en los documentos del paquete npm. Con eso digo, ¡adelante y renderice algunas animaciones increíbles!