Ir al contenido
charmotion
Empieza ahora

dotLottie vs Lottie JSON: qué aporta .lottie

Por el equipo de Charmotion · Actualizado el

Ilustración de portada de la guía comparativa: dotLottie vs Lottie JSON: qué añade .lottie

Un archivo .lottie (dotLottie) es un archivo ZIP que agrupa una o más animaciones Lottie JSON junto con imágenes, temas y máquinas de estados. El Lottie JSON simple contiene una sola animación en texto. dotLottie suele pesar menos y agrega interactividad, pero necesita un reproductor compatible con dotLottie, que puede ser más pesado que lottie-web.

Puntos clave

  • dotLottie 2.0 es un ZIP comprimido con Deflate que incluye un manifiesto y carpetas para animaciones, imágenes, máquinas de estados y temas.
  • LottieFiles afirma que .lottie pesa hasta un 80 % menos que JSON; el ahorro real se reduce si tu servidor ya comprime el JSON con gzip.
  • Los temas y las máquinas de estados solo existen en dotLottie, y solo los reproductores de dotLottie pueden ejecutarlos.
  • Según nuestra medición, el motor WASM del reproductor web de dotLottie pesa unos 433 KB con brotli, frente a unos 76 KB con gzip en el caso de lottie-web.

¿Qué es un archivo .lottie?

Un archivo .lottie es un contenedor definido por la especificación abierta dotLottie, que LottieFiles mantiene bajo la licencia MIT. La versión 2.0 de la especificación lo define como un archivo ZIP comprimido con Deflate, con la extensión .lottie y el tipo MIME application/zip+dotlottie.

Dentro del archivo:

  • manifest.json enumera lo que contiene el archivo.
  • a/ contiene las animaciones, cada una como un documento Lottie JSON normal.
  • i/ contiene las imágenes que usan esas animaciones.
  • s/ contiene las máquinas de estados.
  • t/ contiene los temas.

Es decir, un .lottie no reemplaza al Lottie JSON: lo empaqueta. Cada animación que contiene sigue siendo el mismo JSON que producen After Effects y Bodymovin, por eso las herramientas pueden convertir fácilmente entre ambos y tus animaciones existentes siguen funcionando.

FunciónLottie JSONdotLottie (.lottie)
ContenedorJSON en texto planoArchivo ZIP con manifiesto
CompresiónNinguna en el archivo (el servidor puede usar gzip)Deflate dentro del archivo
Animaciones por archivoUnaUna o más
ImágenesArchivos externos o insertadas como texto base64Guardadas como archivos en i/
TemasNoSí, en t/
Máquinas de estadosNoSí, en s/
Reproductor weblottie-web, dotlottie-webdotlottie-web y otros reproductores de dotLottie

¿De verdad .lottie pesa menos que JSON?

Por lo general sí, pero menos de lo que sugiere el marketing cuando tienes en cuenta cómo viajan los archivos. La página de precios de LottieFiles dice que los formatos JSON optimizado y dotLottie pueden reducir el peso de los archivos hasta un 80 %, y su página de dotLottie afirma que los archivos son hasta 10 veces más pequeños. Ambas son afirmaciones del proveedor sin un método publicado.

El mecanismo es una compresión común. Lottie JSON es texto extenso con claves y números repetidos, así que se comprime bien. dotLottie aplica Deflate dentro del archivo. Pero la mayoría de los servidores web y CDN ya comprimen el JSON durante la transferencia con gzip o brotli. Si el tuyo lo hace, un archivo JSON y un archivo .lottie pueden llegar con pesos similares, porque ambos viajan comprimidos.

Dónde dotLottie ahorra de forma más fiable:

  • Imágenes. El JSON suele insertar las imágenes como texto base64, lo que aumenta su peso en aproximadamente un tercio. dotLottie las guarda como archivos binarios.
  • Varias animaciones. Un solo archivo reemplaza varias solicitudes, y las imágenes compartidas se guardan una sola vez.
  • Almacenamiento y paquetes de apps. Los archivos incluidos dentro de una app móvil no pasan por la compresión de una CDN, así que la compresión interna del archivo cuenta por completo.

Mide ambos formatos tal como los reciben realmente tus usuarios antes de decidir solo por el peso.

¿Un .lottie puede contener varias animaciones?

Sí. La carpeta a/ puede contener varias animaciones, listadas en el manifiesto, y un reproductor de dotLottie puede alternar entre ellas por su id. Esto es útil para sets que van juntos: las versiones de reposo, carga y éxito de una ilustración, o las variantes clara y oscura de un ícono.

Agruparlas tiene ventajas prácticas. Tu app o página carga un solo archivo en lugar de varios, las imágenes compartidas entre animaciones se guardan una sola vez en i/ y una máquina de estados en s/ puede pasar de una animación agrupada a otra según la interacción del usuario.

También hay contrapartidas. Los usuarios descargan todas las animaciones del archivo aunque solo vean una. Si el conjunto es grande, dividirlo en unos pocos archivos puede hacer que la primera pantalla cargue más rápido. Además, cada animación del paquete sigue siendo una línea de tiempo de Lottie independiente. Pasar de una a otra es un corte o una transición interpolada definida en la máquina de estados, no una mezcla de dos animaciones que se reproducen a la vez.

Ese último punto es donde dotLottie y Rive difieren en su enfoque. Un archivo .riv también contiene muchas animaciones, pero comparten un mismo artboard, un mismo rig y un mismo conjunto de formas, y la máquina de estados puede mezclarlas entre sí. Para personajes con muchos estados, compara ambos. Consulta Lottie vs Rive: máquinas de estados.

¿Qué son los temas de dotLottie?

Los temas son archivos en la carpeta t/ que sobrescriben propiedades de una animación, como los colores, sin editar la animación en sí. Una misma ilustración puede incluir un tema claro, un tema oscuro y un tema con los colores de la marca, y el reproductor aplica uno en runtime.

Sin temas, lo habitual con JSON simple es exportar un archivo distinto por cada esquema de color o editar los valores de color del JSON desde el código, algo frágil. Los temas convierten las variantes de color en una función compatible del formato, en lugar de un apaño.

Los temas también se conectan con la interactividad. La especificación de la máquina de estados (state machine) de dotLottie incluye una acción SetTheme, así que una máquina de estados puede cambiar de tema en respuesta a un input o un evento, por ejemplo para cambiar los colores de un ícono cuando se activa.

Igual que las máquinas de estados, los temas solo funcionan en reproductores que implementan el formato dotLottie. El reproductor clásico lottie-web solo lee Lottie JSON simple y no puede abrir un archivo .lottie, así que si dependes de los temas, revisa tu reproductor en cada plataforma donde publiques.

¿Cómo funcionan las máquinas de estados de dotLottie?

Una máquina de estados de dotLottie es una definición JSON guardada en la carpeta s/. LottieFiles añadió un editor visual para crearlas en Lottie Creator el 23 de septiembre de 2025, así que los diseñadores pueden construirlas sin escribir el JSON.

La especificación describe:

  • Estados: estados de reproducción que reproducen un segmento o una animación, además de un estado global cuyas transiciones se evalúan primero, sin importar el estado actual.
  • Inputs: numérico, string, booleano y evento.
  • Transiciones: instantáneas o interpoladas con easing cubic-bezier, condicionadas por guards sobre los valores de los inputs.
  • Interacciones: entrada, salida, presión, liberación y movimiento del puntero; clic; fin de la animación y fin del loop.
  • Acciones: asignar, alternar, incrementar o decrementar inputs, disparar eventos, fijar el fotograma o el progreso, aplicar un tema, abrir una URL o enviar un evento personalizado a tu código.

Eso basta para estados de hover y de presión, interruptores, ilustraciones de varios pasos y personajes sencillos. Solo funciona en reproductores dotLottie; los reproductores que solo leen JSON reproducen la animación sin nada de la lógica.

Diagrama de una máquina de estados de Rive: un estado de entrada, diez estados de loop elegidos por un número mood y estados de reacción puntual activados por triggers que vuelven al loop actual
Cómo está conectado un .riv de Charmotion: el número mood elige un loop y los triggers reproducen reacciones puntuales desde cualquier estado.

El diagrama muestra el patrón de loop más trigger que usan muchos personajes interactivos. dotLottie puede expresarlo con inputs y guards; Rive lo expresa con su propia máquina de estados y Data Binding. Para ver una tabla comparativa, consulta máquinas de estados de Lottie vs Rive.

¿Qué reproductores son compatibles con .lottie?

La compatibilidad se ha extendido rápido, pero revisa cada plataforma:

  • Web: @lottiefiles/dotlottie-web de LottieFiles reproduce tanto .json como .lottie y tiene wrappers para React, Vue, Svelte, Solid y Web Components. Renderiza con ThorVG compilado a WASM. El clásico lottie-web solo reproduce JSON y su última publicación fue en mayo de 2025.
  • React Native: lottie-react-native admite .lottie con un cambio en la configuración de Metro y usa @lottiefiles/dotlottie-react en web. Su README actual exige React Native 0.84 o posterior y la New Architecture.
  • Flutter: el popular paquete lottie es un port no oficial en Dart puro que puede leer .lottie con un decodificador personalizado; LottieFiles mantiene un plugin aparte, dotlottie_flutter, con máquinas de estados y temas.

La contrapartida en la web es el peso del runtime. Según nuestra medición de los paquetes de npm en octubre de 2026, el motor WASM de dotlottie-web pesa unos 433 KB con brotli más unos 23 KB de JavaScript, mientras que la build completa de lottie-web pesa unos 76 KB con gzip. LottieFiles afirma que su renderizador ThorVG es más rápido y usa menos memoria que su motor anterior, una comparación del propio proveedor consigo mismo y no frente a lottie-web. Para una sola animación JSON sencilla, lottie-web es más ligero; para temas, máquinas de estados o muchas animaciones, el reproductor más pesado de dotLottie vale la pena.

LottieFiles informa que las descargas de dotLottie en npm pasaron de unas 65 000 al mes en junio de 2024 a 4.7 millones en noviembre de 2025, una cifra comunicada por el proveedor que, aun así, muestra hacia dónde va el ecosistema.

¿Conviene usar dotLottie o Lottie JSON?

Elige Lottie JSON si publicas una o dos animaciones sencillas en la web, quieres el reproductor más ligero (lottie-web) o usas una plataforma o un plugin que solo acepta JSON.

Elige dotLottie si necesitas temas, máquinas de estados, varias animaciones en un solo archivo o imágenes incrustadas, o si incluyes los archivos dentro de una app móvil, donde la compresión dentro del archivo cuenta por completo.

Considera Rive o video si estás creando un personaje con muchos estados combinados (Rive) o si el arte es renderizado en lugar de vectorial (video). Para detalles de rendimiento, consulta rendimiento de Rive vs Lottie.

Cambiar entre los dos formatos de Lottie tiene poco riesgo en cualquier dirección, porque las animaciones dentro de un .lottie son Lottie JSON normal. Puedes cambiar primero de reproductor y luego migrar los archivos poco a poco.

Preguntas frecuentes

¿Puedo renombrar un archivo Lottie .json a .lottie?

No. Un archivo .lottie es un archivo ZIP con un manifest.json y una carpeta a/, no un JSON renombrado. Usa las herramientas de LottieFiles o las bibliotecas de dotLottie para empaquetar JSON en .lottie. A la inversa sí funciona: descomprime un .lottie y las animaciones son archivos Lottie JSON normales.

¿lottie-web reproduce archivos .lottie?

No. lottie-web solo reproduce Lottie JSON. Para reproducir archivos .lottie en la web, incluidos sus temas y máquinas de estados, usa @lottiefiles/dotlottie-web o uno de sus wrappers para frameworks. También reproduce JSON simple, así que puedes cambiar primero de reproductor y migrar los archivos poco a poco.

¿dotLottie es de código abierto?

Sí. El formato dotLottie es una especificación abierta publicada en dotlottie.io y mantenida por LottieFiles bajo la licencia MIT. LottieFiles también publica reproductores de código abierto como dotlottie-web. Lottie Creator, el editor que crea máquinas de estados de forma visual, forma parte de los planes de pago de LottieFiles.

¿Necesito dotLottie para usar máquinas de estados de Lottie?

Sí. Las máquinas de estados de Lottie están definidas por la especificación dotLottie y se guardan en la carpeta s/ del archivo .lottie. Solo funcionan en reproductores dotLottie. Una animación JSON simple reproducida en lottie-web, lottie-ios o lottie-android no tiene compatibilidad con este tipo de máquina de estados.

Respuestas rápidas de esta guía

Fuentes

Guías relacionadas