Ir al contenido
charmotion
Empieza ahora

Rive vs Lottie: cuál usar en 2026

Por el equipo de Charmotion · Actualizado el

Ilustración de portada de la guía: Rive vs Lottie: cuál usar en 2026, con personajes de demostración de Charmotion

Elige Lottie cuando tus animaciones ya vienen de After Effects y son mayormente lineales; elige Rive cuando un personaje o un control necesita muchos estados manejados por código. Ambos admiten hoy máquinas de estados interactivas, así que las diferencias reales están en el flujo de trabajo de creación, el formato de archivo, el runtime y cuánta lógica vive dentro del archivo.

Puntos clave

  • Lottie reproduce animaciones de After Effects exportadas como JSON; Rive tiene su propio editor y formato binario.
  • Hoy ambos tienen máquinas de estados: Rive de forma nativa y Lottie mediante Lottie Creator y dotLottie.
  • Rive afirma que sus archivos son mucho más pequeños, pero es una afirmación del proveedor, no una prueba independiente.
  • Elige según las herramientas de tu equipo y el nivel de interactividad que necesite la animación.

¿Cuál es la diferencia entre Rive y Lottie?

Lottie es un formato de reproducción y una familia de bibliotecas. Renderiza animaciones de Adobe After Effects exportadas como JSON con el plugin Bodymovin, en web, iOS, Android, React Native y Windows. El formato más reciente, dotLottie (.lottie), es un contenedor comprimido mantenido por LottieFiles bajo la licencia MIT, que puede empaquetar varias animaciones, recursos, temas y máquinas de estados en un solo archivo.

Rive es una herramienta integrada: un editor propio más runtimes de código abierto que reproducen su formato binario .riv. La animación, el rigging y la lógica de la máquina de estados se crean en el editor de Rive y se exportan juntos.

LottieRive
Formato de archivoJSON (.json) o dotLottie (.lottie).riv binario
Principales herramientas de creaciónAfter Effects + Bodymovin, Lottie CreatorEditor de Rive
Máquinas de estadosSí, con Lottie Creator en archivos dotLottieSí, integradas
Licencia del runtimeCódigo abiertoMIT
Punto fuerte habitualReutilizar trabajo de motion designGráficos interactivos con estados

Ninguno es estrictamente mejor. Nacieron de flujos de trabajo distintos y todavía los reflejan.

¿Cuál admite máquinas de estados e interactividad?

Los dos. La vieja idea de que "Lottie no tiene interactividad" ya no es cierta. En 2025, LottieFiles agregó máquinas de estados sin código a Lottie Creator; la lógica va dentro del archivo .lottie y se ejecuta en el reproductor dotLottie.

Rive tiene las máquinas de estados en el centro de su diseño desde hace más tiempo. Una máquina de estados de Rive puede mezclar animaciones, superponer varias, detectar eventos del puntero en partes del arte y responder a valores enviados desde código. Rive también está migrando su modelo de control en runtime de los inputs de la máquina de estados (números, booleanos y triggers) al Data Binding con view models, que agrega cadenas, enums, colores, listas y propiedades anidadas. Los archivos existentes basados en inputs siguen funcionando.

La pregunta práctica es dónde quieres que viva la lógica y quién la construye. Si tus diseñadores ya hacen todo en After Effects, agregar interacciones en Lottie Creator mantiene ese flujo. Si estás diseñando un personaje interactivo desde cero, con muchos estados entre los que cambia tu app, el editor de Rive está pensado justo para esa tarea.

Para profundizar en cómo funcionan las máquinas de estados de Rive, consulta Máquina de estados de Rive: inputs, triggers y estados de ánimo.

¿Cuál genera archivos más pequeños?

Depende de la animación, y no existe un benchmark neutral que lo resuelva. El propio blog de Rive afirma que una animación Lottie de 240 KB se recreó en Rive con 16 KB, unas 15 veces más pequeña. Es un ejemplo del proveedor, elegido por Rive, y hay que leerlo como tal.

Aun así, las razones estructurales detrás de esas diferencias son reales. El JSON de Lottie es texto, y las exportaciones de After Effects suelen incluir datos de keyframes redundantes. dotLottie reduce la brecha comprimiendo el JSON con Deflate y compartiendo recursos entre animaciones. El .riv de Rive es un binario compacto, y varias animaciones en un mismo archivo pueden reutilizar las mismas formas y huesos.

Gráfico de barras con pesos de archivo reales de un set de 17 animaciones: Rive 40 KB frente a MP4 de 2.6 MB, WebM con fondo transparente de 6.1 MB, GIF de 8.0 MB y MOV HEVC de 9.4 MB
Pesos de archivo de un set real de Charmotion (Pip). Los pesos de video corresponden a una sola animación de 4 segundos.

Además, el peso del archivo es solo la mitad del costo. Ambos necesitan una biblioteca de reproducción. Rive publica el peso de sus runtimes: en la web, el build WASM canvas pesa 567 KB comprimido con brotli y canvas-lite pesa 222 KB (cifras WASM de Rive de enero de 2026; nosotros medimos el runtime canvas-lite 2.44.0 en unos 373 KB con brotli). Mide el runtime más tus archivos reales en tus páginas reales antes de decidir. En un set como el del gráfico, todos los estados del personaje caben en un solo .riv más pequeño que un único clip de video.

¿Cómo se crean las animaciones de Rive y Lottie?

Las animaciones Lottie se crean tradicionalmente en After Effects y se exportan con el plugin Bodymovin. No todas las funciones de After Effects se trasladan, así que los motion designers aprenden qué efectos son compatibles con Lottie. LottieFiles también ofrece Lottie Creator, un editor web que permite crear animaciones y agregar máquinas de estados (state machines) directamente, además de un gran marketplace de animaciones listas para usar.

Las animaciones de Rive se crean en el editor de Rive. Combina dibujo vectorial, rigging con huesos, deformación de malla, una línea de tiempo y el grafo de la máquina de estados en una sola herramienta, así que quien anima también puede conectar la lógica interactiva y probarla en el editor antes de exportar. La contrapartida es aprender una herramienta nueva; los conocimientos de After Effects solo se aprovechan en parte.

Una tercera vía es saltarse la creación por completo en los casos comunes. Los sets de animaciones de personajes con estados estándar (idle, loading, success, error, etc.) pueden generarse a partir de una ilustración existente, lo que encaja con equipos que tienen una mascota de marca pero no un motion designer. Sea cual sea el origen, verifica que el archivo entregado documente los nombres de su máquina de estados y de sus inputs, porque tu código depende de ellos.

¿Qué runtimes son compatibles?

Ambos cubren las plataformas principales.

  • Lottie: las librerías originales son compatibles con web, iOS, Android, React Native y Windows. Los reproductores dotLottie agregan compatibilidad con archivos .lottie y sus máquinas de estados.
  • Rive: runtimes oficiales para web (JS/WASM), React, plataformas de Apple (iOS, macOS, tvOS, visionOS), Android, Flutter y React Native, todos con licencia MIT.

Ambos ecosistemas están en transición, así que revisa los nombres de los paquetes. El runtime de React Native de Rive pasó del paquete obsoleto rive-react-native a @rive-app/react-native, basado en Nitro, y su documentación web ahora recomienda @rive-app/webgl2. Del lado de Lottie, las funciones interactivas dependen de usar un reproductor dotLottie en lugar de un reproductor antiguo que solo admite JSON.

Si tu destino es algo poco común, como un motor de videojuegos o un dispositivo embebido, revisa la lista de runtimes de cada proyecto para esa plataforma en concreto en lugar de suponer que son equivalentes.

¿Cuándo conviene elegir Lottie?

Lottie es la opción práctica cuando:

  • Tus motion designers trabajan en After Effects y quieres reutilizar ese trabajo directamente.
  • Las animaciones son mayormente lineales: un ícono que aparece animado, una ilustración breve, una explosión de celebración.
  • Quieres partir de una gran biblioteca de animaciones existentes.
  • Tu app ya incluye un reproductor Lottie, así que agregar más animaciones solo cuesta los archivos.
  • La interactividad que necesitas es modesta y las máquinas de estados de Lottie Creator la cubren.

La madurez de Lottie es una ventaja. Lleva años en producción en muchas apps, y es fácil encontrar herramientas, tutoriales y respuestas de la comunidad. Si lo que necesitas son unos pocos clips independientes y no un personaje con muchos estados, cambiar de herramienta rara vez compensa. Sigue usando lo que tu equipo ya entrega bien.

¿Cuándo conviene elegir Rive?

Rive es la mejor opción cuando:

  • Un personaje o componente tiene muchos estados entre los que tu código alterna, como una mascota de marca que está en reposo, escucha, piensa, habla y celebra.
  • Las transiciones entre estados deben fundirse con suavidad en lugar de cortar.
  • Partes del arte reaccionan al puntero, como unos ojos que siguen el cursor.
  • Quieres todos esos estados en un solo archivo liviano con un solo runtime.
  • Planeas vincular datos en vivo (texto, números, colores) a la animación, algo que admite el Data Binding de Rive.

Los avatares de asistentes son un ejemplo claro. La librería AI Elements de Vercel incluye un componente Persona basado en Rive con estados idle, listening, thinking, speaking y asleep. Duolingo usa máquinas de estados de Rive para la sincronización labial de sus personajes. En ambos casos, la animación la controla el estado de la app en lugar de reproducirse de principio a fin.

¿Dónde puedo comparar Rive y Lottie con más detalle?

Esta página es la visión general. Cada una de estas guías profundiza en una pregunta, con fuentes y una tabla:

Para formatos de archivo más allá de estos dos runtimes, consulta GIF vs WebM vs MP4 vs Lottie vs Rive.

Preguntas frecuentes

¿Lottie admite máquinas de estados?

Sí. LottieFiles agregó máquinas de estados sin código a Lottie Creator en 2025. La lógica se guarda dentro del archivo dotLottie (.lottie) y se ejecuta en el reproductor dotLottie, así que los reproductores Lottie antiguos que solo admiten JSON no la ejecutarán. Verifica que el reproductor de tu plataforma admita las máquinas de estados de dotLottie antes de depender de ellas.

¿De verdad Rive es 15 veces más pequeño que Lottie?

Esa cifra viene del propio blog de Rive, que recreó una animación Lottie de 240 KB en solo 16 KB. Es un ejemplo del proveedor, no un benchmark independiente. Los resultados reales dependen de la animación y de si comparas con Lottie JSON o con dotLottie comprimido, así que mide tus propios archivos.

¿Puedo convertir un archivo Lottie a Rive?

No sin pérdidas ni con un clic para cualquier archivo. Rive y Lottie usan formatos y conjuntos de funciones distintos, así que el trabajo complejo de After Effects suele tener que reconstruirse en el editor de Rive. Las formas y trazados simples se trasladan más fácilmente que los efectos, las expresiones o las precomposiciones. Reserva tiempo para rehacer trabajo en lugar de esperar una conversión directa.

¿Cuál es mejor para la mascota de marca de una app?

Rive suele ser mejor para una mascota que reacciona al estado de la app, porque un solo archivo puede contener todos sus loops y reacciones con transiciones suaves controladas por código. Lottie funciona bien si la mascota solo reproduce unos pocos clips independientes o si tu equipo ya la produce en After Effects.

Respuestas rápidas de esta guía

Fuentes

Guías relacionadas