¿Qué es un Lottie?

Un Lottie es un formato de archivo de animación basado en JSON que le permite enviar animaciones a cualquier plataforma de forma tan sencilla como enviar activos estáticos. Son archivos pequeños que funcionan en cualquier dispositivo y pueden agrandarse o reducirse sin pixelación. LottieFiles le permite crear, editar, probar, colaborar y enviar un Lottie de la forma más sencilla posible.

¿Por qué Lottie?

Aquí hay un par de ventajas que Lottie tiene sobre los otros formatos de archivo de animación que existen.

Tamaño de archivo pequeño

Las animaciones Lottie son mucho más pequeñas, manteniendo la misma calidad, en comparación con otros formatos como GIF o MP4.

Infinitamente adaptables

Las animaciones Lottie se basan en vectores, lo que significa que puede ampliarlas y reducirlas sin preocuparse por la resolución.

Compatibilidad con múltiples plataformas y bibliotecas

Para todos los desarrolladores que existen, las transferencias de Lottie son sumamente sencillas. Puede utilizar animaciones Lottie en iOS, Android, web y React Native sin modificaciones.

Interactividad

En las animaciones Lottie, los elementos de animación están expuestos para que pueda manipularlos de forma que sean interactivos y respondan a interacciones como desplazarlos, hacer clic y pasar el ratón. Obtenga más información en la guía de interactividad.

El mundo utiliza Lottie

Lottie es utilizado por más de empresas en todo el mundo y en muchas de las herramientas que usted utiliza a diario.

A collage of logos from various design, code and productivity companies
A collage of logos from various design, code and productivity companies
A collage of logos from various design, code and productivity companies
A collage of logos from various design, code and productivity companies
Apple Landing Page with Lottie Animation
Apple Landing Page with Lottie Animation
Apple Logo
Apple Logo

Páginas de destino

Páginas de destino

Páginas de destino

Duolingo with Lottie Animation
Duolingo with Lottie Animation
Duolingo Logo
Duolingo Logo

Aporte encanto a las experiencias digitales

Aporte encanto a las experiencias digitales

Aporte encanto a las experiencias digitales

Telegram Stickers with Lottie Animation
Telegram Stickers with Lottie Animation
Telegram Logo
Telegram Logo

Pegatinas animadas en mensajería

Pegatinas animadas en mensajería

Pegatinas animadas en mensajería

Samsung Watch with Lottie Animation
Samsung Watch with Lottie Animation
Samsung Logo
Samsung Logo

Animaciones de sistema para relojes inteligentes, televisores y electrodomésticos

Animaciones de sistema para relojes inteligentes, televisores y electrodomésticos

Animaciones de sistema para relojes inteligentes, televisores y electrodomésticos

Interactive Infographics with Lottie Animation
Interactive Infographics with Lottie Animation
The Guardian Logo
The Guardian Logo

Infografías interactivas

Infografías interactivas

Infografías interactivas

Product Walkthroughs with Lottie Animation
Product Walkthroughs with Lottie Animation
Google Logo
Google Logo

Recorridos de productos

Recorridos de productos

Recorridos de productos

El movimiento es el futuro del diseño

...y LottieFiles lo hace fácil.

Cómo empezar a utilizar Lottie

Herramientas y recursos para ayudarle a empezar a utilizar Lottie.

PASO 1

Encuentre o cree un Lottie

Encuentre una animación Lottie

Busque en nuestra biblioteca de animaciones gratuitas listas para usar.

A continuación, personalice cualquier Lottie según su marca o colores preferidos utilizando la herramienta paleta de colores o el editor de Lottie.

LottieFiles featured animations page
LottieFiles featured animations page
LottieFiles featured animations page

O cree un Lottie desde cero

Si tiene algunas habilidades de animación, cree un Lottie con nuestros complementos de Adobe. Si no, simplemente tome un SVG y aplíquele algunos ajustes preestablecidos con nuestro convertidor de SVG a Lottie.

PASO 2

Utilice su Lottie

Lottie también es compatible de forma nativa con muchas otras herramientas

Various company logos
Various company logos
Get started with LottieFiles
Get started with LottieFiles
Get started with LottieFiles
Get started with LottieFiles
Get started with LottieFiles

¿Listo para empezar con LottieFiles?

La historia de Lottie

La historia de Lottie

La historia de Lottie

La historia de Lottie

Stylized pixellated flower
Stylized pixellated flower
Stylized pixellated flower

2010

Antes de Lottie, los diseñadores de movimiento creaban sus animaciones y las pasaban a los desarrolladores de software para su implementación. Las opciones de implementación eran limitadas. Los desarrolladores exportaban las animaciones en formatos de baja calidad o intentaban reconstruir la animación en código desde cero. Esto no era eficiente y a menudo daba como resultado animaciones que no eran óptimas y que distaban mucho de la intención del diseñador de movimiento.

2015

2015

Hernan Torrisi concibió la idea de exportar la representación de una animación en Adobe After Effects y renderizar la animación en tiempo de ejecución. Aprovechó las capacidades de creación de secuencias de comandos de After Effects para enunciar un proyecto de animación y lanzó un complemento para After Effects llamado Bodymovin, que exportaba la descripción en formato JSON de una animación. También lanzó el primer renderizador para el formato con un reproductor basado en JavaScript para navegadores.

JSON file
JSON file
JSON file
Pencil with Lottie written out
Pencil with Lottie written out
Pencil with Lottie written out

2017

Los ingenieros Brandon Withrow, Gabriel Peal y Leland Richardson de Airbnb vieron el potencial que presentaban las animaciones basadas en JSON y los problemas que resolvían. Se asociaron con el animador principal Salih Adbul-Karim en Airbnb para ayudar a elaborar bibliotecas para iOS y Android que pudieran renderizar estos archivos de animación JSON, a los que llamaron "Lottie".

Rocketship with LottieFiles logo
Rocketship with LottieFiles logo
Rocketship with LottieFiles logo

¡Lanzamiento de LottieFiles!

LottieFiles lanzado, lo que da a los animadores y desarrolladores un lugar para probar al instante, compartir y mostrar sus animaciones en la web.

2018

2018

Microsoft y la Fundación .Net lanzaron una biblioteca para renderizar Lottie en Windows.

Window with flowerpot
Window with flowerpot
Window with flowerpot
Hamster wheel with a Qt file running on it
Hamster wheel with a Qt file running on it
Hamster wheel with a Qt file running on it

2019

Qt añadió la compatibilidad con Lottie incorporando una API QML para renderizar Lottie. Samsung publicó rLottie, un renderizador basado en C++ independiente de la plataforma para Lottie, y amplió la compatibilidad con Lottie en Tizen.

2020

2020

Se creó dotLottie. dotLottie es un formato de archivo de código abierto que agrega una o más animaciones Lottie y sus recursos asociados en un único archivo. Esta será la nueva generación de Lottie para el futuro de la animación.

Lottie illustration
Lottie illustration
Lottie illustration

Preguntas frecuentes

Preguntas frecuentes

¿Qué es una animación Lottie?

Un Lottie es un formato de archivo de animación basado en JSON que le permite enviar animaciones en cualquier plataforma de forma tan sencilla como enviar activos estáticos. Son archivos pequeños que funcionan en cualquier dispositivo y pueden ampliarse o reducirse sin pixelación.

¿Qué es una animación Lottie?

Un Lottie es un formato de archivo de animación basado en JSON que le permite enviar animaciones en cualquier plataforma de forma tan sencilla como enviar activos estáticos. Son archivos pequeños que funcionan en cualquier dispositivo y pueden ampliarse o reducirse sin pixelación.

¿Qué es una animación Lottie?

Un Lottie es un formato de archivo de animación basado en JSON que le permite enviar animaciones en cualquier plataforma de forma tan sencilla como enviar activos estáticos. Son archivos pequeños que funcionan en cualquier dispositivo y pueden ampliarse o reducirse sin pixelación.

¿Qué es una animación Lottie?

Un Lottie es un formato de archivo de animación basado en JSON que le permite enviar animaciones en cualquier plataforma de forma tan sencilla como enviar activos estáticos. Son archivos pequeños que funcionan en cualquier dispositivo y pueden ampliarse o reducirse sin pixelación.

¿Es Lottie mejor que SVG?

¿Es Lottie mejor que SVG?

¿Es Lottie mejor que SVG?

¿Es Lottie mejor que SVG?

¿Es Lottie mejor que GIF?

¿Es Lottie mejor que GIF?

¿Es Lottie mejor que GIF?

¿Es Lottie mejor que GIF?

¿Cómo se utiliza Lottie?

¿Cómo se utiliza Lottie?

¿Cómo se utiliza Lottie?

¿Cómo se utiliza Lottie?

¿Cómo se crea un Lottie?

¿Cómo se crea un Lottie?

¿Cómo se crea un Lottie?

¿Cómo se crea un Lottie?

¿Por qué debería utilizar Lottie?

¿Por qué debería utilizar Lottie?

¿Por qué debería utilizar Lottie?

¿Por qué debería utilizar Lottie?

¿Quién puede utilizar LottieFiles?

¿Quién puede utilizar LottieFiles?

¿Quién puede utilizar LottieFiles?

¿Quién puede utilizar LottieFiles?

¿Dónde puedo aprender más sobre las animaciones Lottie?

¿Dónde puedo aprender más sobre las animaciones Lottie?

¿Dónde puedo aprender más sobre las animaciones Lottie?

¿Dónde puedo aprender más sobre las animaciones Lottie?

¿Cómo edito las animaciones Lottie?

¿Cómo edito las animaciones Lottie?

¿Cómo edito las animaciones Lottie?

¿Cómo edito las animaciones Lottie?

El movimiento es el futuro del diseño

El movimiento es el futuro del diseño

...y LottieFiles lo hace fácil.

...y LottieFiles lo hace fácil.

Páginas de destino

Aporte encanto a las experiencias digitales

Pegatinas animadas en mensajería

Animaciones de sistema para relojes inteligentes, televisores y electrodomésticos

Reúnase con otros creadores, diseñadores y desarrolladores de Lottie.

Recorridos de productos

Cree. Colabore. Integre.

Lleve el movimiento a sus diseños cotidianos sin esfuerzo.

Cree. Colabore. Integre.

Lleve el movimiento a sus diseños cotidianos sin esfuerzo.

Cree. Colabore. Integre.

Lleve el movimiento a sus diseños cotidianos sin esfuerzo.

Cree. Colabore. Integre.

Lleve el movimiento a sus diseños cotidianos sin esfuerzo.