Qué es Lottie y cómo funciona

Existen páginas web que presentan o ponen a disposición del usuario diferentes elementos gráficos como iconos, plantillas, animaciones, entre otras cosas, para mejorar nuestros diseños. Una de estas es Lottie Files, que nos ofrece archivos de animación gratuitos o de pago. En este post, te hablaremos acerca de qué es Lottie y cómo funciona.

¿Qué es Lottie?

En la página web Lottie Files encontramos animaciones que tienen el objetivo de poder implementarlas en diferentes diseños sin importar la plataforma. Este tipo de archivos nos remiten al término “Lottie”, que hace referencia a un archivo que se basa en el formato JSON (JavaScript Object Notation).

Los archivos de lottie que es la página oficial, tienen la característica de ser muy pequeños y le ofrecen la posibilidad al diseñador y desarrollador de usarlos en los diferentes dispositivos o plataformas del mercado. Además, no muestran una imagen pixelada al jugar con su tamaño.

Ahora que sabes qué es Lotti, es hora de hablar sobre las diferentes opciones que tienes para obtener este tipo de archivos. En primer lugar, puedes acceder a la página web de Lottie Files para descargar los archivos. En segundo lugar, puedes descargar un plugin o aplicación que te ayude acceder a las animaciones más rápido.

En caso de que prefieras descargar la aplicación, puedes dirigirte a la tienda de aplicaciones de tu dispositivo o a GitHub para tener los diferentes complementos o plugins que deseas para usar este tipo de archivos que sean compatibles con el programa de diseño que utilizas.

Si esta breve explicación sobre que es lottie no te parece suficiente y quieres conocer más páginas que ofrecen elementos gráficos que puedes implementar en tus diseños, te invitamos a echarle un vistazo a nuestro post Los 3 mejores sitios para conseguir plantillas de Sketch, en el que te hablamos sobre 3 páginas diferentes que proporcionan plantillas que te pueden servir de guía para diseñar.

Un poco de historia sobre Lottie

Además de saber qué es Lottie, es muy interesante conocer un poco de su historia. Antes de que llegaran los archivos Lottie al mercado, solo se concebía la posibilidad de crear las animaciones y enviárselas al desarrollador para que este las recreara en el código desde cero. Este trabajo no representaba resultados muy satisfactorios porque se implementaban formatos de baja resolución, que generaban imágenes pixeladas.

Por esto, en el año 2015, Hernán Torrisi aprovechó las funciones ofrecidas por el programa de diseño Adobe After Effects para combinarlas con un plugin que desarrolló llamado bodymovin, que es compatible con este programa. El propósito de esto era poder exportar la descripción de la animación diseñado en el formato JSON y usarla en las diferentes plataformas.   

Después, en el 2017, varios ingenieros que trabajaban en Airbnb vieron potencial en la idea de Hernán Torrisi, por esto crearon una biblioteca que fuera compatible con iOS y Android. Esta representaría las animaciones en formato JSON, y llamaron a este tipo de archivos Lottie. El nombre de estos viene de Charlotte Reiniger, que fue una directora de cine alemán considerada la pionera de las animaciones de siluetas.

En ese mismo año, se lanzó al mercado Lottie Files con el propósito de presentar un espacio, destinado principalmente a los animadores y desarrolladores, para que pudieran probar, compartir y descubrir animaciones en la web.

Con el paso de los años, tanto por parte del equipo que conforma Lottie Files como por otros desarrolladores, se han ido mejorando este tipo de archivos y se han desarrollado otras bibliotecas que son compatibles con los diversos sistemas operativos.

¿Ahora entiendes mejor que es un lottie? Es importante aclarar que Lottie es el nombre del archivo animación, mientras que Lottie Files es la plataforma donde puedes encontrar animaciones con este formato.

¿Cómo funciona Lottie?

Ahora que conoces qué es Lottie, tendrás curiosidad sobre cómo funciona. Puedes usar estos archivos hacer de dos formas:

• La primera opción consiste en crear tu animación en After Effects y usar el plugin bodymovin para exportarla en formato JSON.
• La otra alternativa es buscar la animación que deseas utilizar desde la página web o aplicación de Lottie Files. Obtendrás una vista previa que generará las líneas de código necesarias para utilizar este archivo.

Ese tipo de archivo lo puedes usar en webs o móviles sin ningún problema, porque es multiplataforma. Asimismo, estas animaciones las puedes configurar para permitir que la interacción con ellas sea más dinámica.

¿Por dónde seguir?

Después de saber qué es Lottie y cómo funciona, ¿te gustaría conocer más sobre las herramientas de diseño que puedes utilizar para mejorar tus trabajos? Si quieres formarte en el sector IT y convertirte en un experto, te invitamos que consultes nuestro Desarrollo de Apps Móviles Full Stack Bootcamp, con el que, en muy pocos meses, aprenderás todo lo necesario sobre el desarrollo y diseño de aplicaciones, así cómo a manejar los programas más utilizados. ¡Solicita la información sobre el bootcamp e inscríbete ahora!