After Effects, Bodymovin y Lottie

Muchas veces, a la hora de desarrollar una herramienta o una plataforma, tenemos que implementar algunos elementos animados como iconos, escenas de carga y otros visuales. Lo normal es recurrir a archivos GIF; algunos incluso van un paso más allá y aprovechan secuencias de archivos PNG. Pero lo normal y corriente no es algo que nos caracterice, así que hoy vamos a ver la mejor manera de desarrollar elementos animados de este tipo.

Often, when developing a tool or a platform, we need to implement some animated elements such as icons, loading scenes and other visuals. The usual route is GIF files; some go a step further and use PNG sequences. But doing the usual isn’t what defines us, so today we’ll look at the best way to build animated elements of this kind.

Qué es Lottie

What is Lottie

Lottie es un formato de archivo de animación vectorial. En 2015 Hernan Torrisi lanzó Bodymovin, un plugin para After Effects que traduce animaciones vectoriales en código JSON para así ejecutarlas en tiempo real. Dos años más tarde, en Airbnb vieron el potencial de Bodymovin y crearon una biblioteca para representar los archivos JSON que fuera compatible con iOS y Android. A este tipo de archivos los llamaron Lottie en honor a Charlotte «Lotte» Reiniger, una cineasta alemana famosa por sus películas de animación con siluetas.

Lottie is a vector animation file format. In 2015 Hernan Torrisi released Bodymovin, an After Effects plugin that translates vector animations into JSON code so they can run in real time. Two years later, Airbnb saw Bodymovin’s potential and built a library to render the JSON files that worked on iOS and Android. They named these files Lottie in honor of Charlotte “Lotte” Reiniger, a German filmmaker famous for her silhouette animation films.

Las animaciones Lottie son archivos muy ligeros, una alternativa a los APNG, GIF o MP4. Siendo vectoriales, mantienen su calidad independientemente de la resolución de la pantalla donde los estemos visualizando, además de poder aumentarse y reducirse sin pixelación.

Lottie animations are very lightweight files, an alternative to APNG, GIF or MP4. Being vector-based, they keep their quality regardless of the resolution of the screen they are viewed on, and can be scaled up and down without pixelation.

Al estar basado en código, la compatibilidad multiplataforma de Lottie es una ventaja para los desarrolladores. Se pueden utilizar animaciones Lottie en iOS, Android, web y React Native sin modificaciones. Además, los elementos de la animación están expuestos para que se puedan manipular de forma interactiva.

Because it is code-based, Lottie’s cross-platform compatibility is an advantage for developers. Lottie animations can be used on iOS, Android, web and React Native without modification. On top of that, the elements of the animation are exposed so they can be manipulated interactively.

Cómo exportar archivos Lottie con After Effects: Bodymovin

How to export Lottie files from After Effects: Bodymovin

Bodymovin soporta muchas, pero no todas, las características del formato interno de After Effects (algunos efectos, por ejemplo, no se exportan), aunque con el tiempo se le han ido añadiendo nuevas opciones. Con este plugin gratuito instalado en After Effects puedes probar y exportar tus propios motion graphics, optimizados para web y apps (podrás renderizar en SVG, canvas y HTML). Es importante estudiar antes las características permitidas con Lottie para aprender a preparar tus diseños y animaciones evitando fallos e incompatibilidades.

Bodymovin supports many, but not all, of the features of After Effects’ internal format (some effects, for example, are not exported), although new options have been added over time. With this free plugin installed in After Effects you can test and export your own motion graphics, optimized for web and apps (you can render to SVG, canvas and HTML). It is important to study beforehand which features Lottie allows, so you learn to prepare your designs and animations avoiding errors and incompatibilities.

Las mejores plataformas usan Lottie

The best platforms use Lottie

El resultado proporciona una alta calidad en tan poco tamaño que su rendimiento es excelente: los archivos suelen pesar muy poco, y existe además el formato comprimido dotLottie para reducirlos aún más. El hecho de aprovechar las capacidades de After Effects para diseñar una animación le otorga un montón de posibilidades y un alto nivel creativo, con frescura y modernidad. Miles de empresas en todo el mundo lo han implementado, y muchas de las herramientas que usas día a día contienen elementos realizados en Lottie.

The result offers such high quality at such a small size that its performance is excellent: files are usually very light, and there is also the compressed dotLottie format to shrink them even further. Using After Effects’ capabilities to design an animation gives it plenty of possibilities and a high creative level, with freshness and a modern feel. Thousands of companies worldwide have implemented it, and many of the tools you use every day contain elements made with Lottie.

Dónde encontrar archivos Lottie

Where to find Lottie files

Existen páginas web que ponen a tu disposición diferentes elementos gráficos realizados en Lottie, como iconos, plantillas y animaciones. Aquí tienes algunas.

There are websites that offer a range of graphic elements made in Lottie, such as icons, templates and animations. Here are a few.

• LottieFiles: el repositorio más famoso de archivos Lottie. Es el máximo referente en la actualidad.
• LottieFiles: the best-known repository of Lottie files and today’s main reference.
• Lordicon: una biblioteca de iconos animados con elementos gratuitos y de pago.
• Lordicon: an animated icon library with free and paid items.
• LottieFlow: podrás personalizar los iconos antes de descargarlos.
• LottieFlow: you can customize the icons before downloading them.
• IconScout: un gigantesco repositorio de archivos para descargar. Algunos son gratuitos, pero la mayoría son de pago.
• IconScout: a gigantic repository of files to download. Some are free, but most are paid.

Un estándar que garantiza calidad

A standard that guarantees quality

Como ves, Lottie empezó con un simple plugin por la necesidad de traducir automáticamente una animación de After Effects a código y, con el empuje de una plataforma de alquiler vacacional, en poco tiempo se ha convertido en un estándar en la industria.

As you can see, Lottie started as a simple plugin, born from the need to automatically translate an After Effects animation into code, and with the push of a home-rental platform it quickly became an industry standard.