Puede que si te hablamos de archivos Lottie JSON no tengas ni idea de qué son o para qué sirven, pero si te paras a pensar en la última app o web que has visitado… seguramente hayas visto más de un muñecajo animado o algún icono en movimiento interactuando contigo, es decir, con el usuario. ¡Pues eso es un archivo Lottie JSON! Y sí, está creado en el programa After Effects. ¿Quieres conocer un poco más sobre este tema?, ¿qué son estos archivos animados tan monos?, ¿cómo podemos crear archivos Lottie JSON en After Effects? ¡Sigue leyendo y entérate de cómo!
¿Qué es un archivo Lottie JSON?
Puede que en la introducción no te haya quedado muy claro qué es un archivo Lottie JSON, pero… ¡tranqui! Vamos a despejar todas tus dudas y a contarte qué es exactamente este concepto que une Motion Graphics con Productos Digitales y Desarrollo Web.
Un archivo Lottie JSON es una pequeña animación en bucle, muy (pero que muy) parecida a un GIF, pero de mayor calidad y con un peso reducido, que hace que la carga o envío de este archivo sea mucho más rápida que con otro tipo de formato. Lottie es una librería de JavaScript que lee un archivo JSON exportado desde el programa de Adobe, After Effects, para incluir estas animaciones en tu web o tu aplicación.
Trabajo realizado por Javier Martínez Arroyo en el Máster en Motion Graphics.
Estas pequeñas animaciones son también compatibles con sistemas iOs, Android y Web, por lo que es muy probable que te encuentres más de uno cuando visites una nueva página web o aplicación. Pero, hay que tener en cuenta que algunos de los recursos que te puedes encontrar en After Effetcs para tus animaciones, no estarán disponibles en todos los sistemas.
¿Cómo crear archivos Lottie JSON en After Effects?
Después de conocer un poco mejor qué son los archivos Lottie JSON y para qué puedes utilizarlos… vamos ahora con el proceso de crear una animación y exportarla para que podamos emplearla en nuestra web o app.
Peeeero, antes de empezar vas a tener que descargarte un plugin de After Effects, que se llama Bodymovin. Esta extensión es totalmente gratuita y muy fácil de instalar, y tendrás que utilizarla sí o sí para tus animaciones. Debes activarla en «preferencias» en la opción de «Permitir que la secuencia de comandos pueda escribir archivos y acceder a la red».
Vamos con los pasos para crear tu animación. ¡Muy atento!
Composición en After Effects
El primer paso será crear tu mini animación en este programa de Adobe. Puede ser tan simple como un icono moviéndose levemente, o tan complicado como la ilustración de una escena concreta, llena de movimiento y color.
Puedes echar un ojo a nuestro post sobre cómo animar personajes en After Effects aquí. Recuerda que será esencial tener una organización, tanto en las capas, como en la línea de tiempo.
¡Ahora es momento de dejar volar tu creatividad y hacer tu primera animación Lottie!
Exportamos nuestra animación
Una vez que tenemos nuestra animación lista y nuestro plugin Bodymovin instalado y activo, vamos a pasar a exportar a un archivo JSON. ¿Qué es un archivo JSON? Es un formato de datos en texto que sigue la sintaxis de JavaScript. Este tipo de archivos son mucho menos pesados que un vídeo o una imagen, por lo que será mucho mejor añadir un archivo así en nuestro proyecto web.
Para exportar nos vamos al Menú superior de After Effects y en la opción «Ventana», abrimos en «Extensiones» el plugin «Bodymovin». Se abrirá un cuadro de dialogo nuevo. Tenemos que seleccionar la composición que corresponda a nuestra animación y elegir dónde queremos guardarla. En la configuración «settings» debemos tener seleccionado la opción «glyphs» para que nos transforme la animación en código de texto. ¡Ya podemos exportar nuestro archivo JSON!
Introducir el archivo JSON en tu web
Una vez ya tengas tu código, solo falta introducirlo en tu archivo HTML… ¡et voilá! Ya tendrás tu mini animación totalmente personalizada en tu proyecto web.
Si no quieres complicarte demasiado, también existen páginas web donde podrás encontrar bibliotecas enteras con archivos de este tipo, como por ejemplo LottieFiles.
Fácil, ¿verdad? Combinando dos disciplinas como lo son los Motion Graphics y el Desarrollo Web, podrás crear proyectos que llamen la atención desde el minuto uno. ¿Te atreves ahora a crear tu propio Lottie?
¿Por qué debemos emplearlos en nuestra web o app?
Si aún no crees que estos archivos sean 100% necesarios… Lanzamos la pregunta del millón. ¿Por qué deberíamos emplear este tipo de archivos en las aplicaciones que diseñemos o en nuestra propia web? ¡Fácil! Porque gustan y llaman la atención. Estás sencillas animaciones pueden captar completamente la atención del usuario y hacer de una simple ilustración, una animación que invite a nuestros clientes a seguir navegando por nuestro site.
Trabajo realizado por Julia Jiménez Torres durante su formación en el Máster en Motion Graphics.
Estos recursos tan potentes generan un valor añadido en nuestro proyecto, y pueden ayudarnos a comunicar de manera mucho más eficaz: con animaciones. Estos archivos Lottie JSON no solo reducirán el tiempo de carga de una web, sino que darán ese toque de diseño de interfaces moderno y actual, utilizando recursos que pueden ayudar a interactuar con los usuarios.
Ya seas motion grapher, programador web o desarrollador de productos digitales, este recurso te puede ayudar a crear proyectos mucho más potentes y visualmente profesionales. Ahora que ya sabes cómo puedes crear animaciones de este tipo para cualquier producto digital… ¿te atreves a seguir aprendiendo todos los trucos que esconde un programa tan completo como After Effects? ¡Es el momento de aprender con nuestras formaciones online en Motion Graphics!