Lottie vs Rive: máquinas de estados y Data Binding
Por el equipo de Charmotion · Actualizado el
Tanto Lottie como Rive tienen ya máquinas de estados. Las de Lottie viven en archivos dotLottie, se crean en Lottie Creator desde septiembre de 2025 e incluyen inputs, guards, interacciones con el puntero y acciones. Las de Rive están integradas en el formato .riv y suman blend states y Data Binding mediante view models, que Rive ahora recomienda en lugar de sus inputs heredados.
Puntos clave
- Las máquinas de estados de dotLottie manejan inputs, eventos de puntero, guards, transiciones interpoladas y acciones como SetTheme y OpenUrl.
- Las máquinas de estados de Rive suman blend states, capas y Data Binding bidireccional con propiedades de view model tipadas.
- Rive considera los inputs como heredados; siguen funcionando, pero el nuevo runtime de Apple solo admite Data Binding.
- Ambas funcionan solo en sus propios reproductores: reproductores dotLottie para Lottie y runtimes de Rive para Rive.
¿Lottie ya tiene máquinas de estados?
Sí. La afirmación de que "Lottie no tiene interactividad" fue cierta durante la mayor parte de su historia y hoy está desactualizada. El 23 de septiembre de 2025, LottieFiles añadió máquinas de estados visuales a Lottie Creator, su editor web. La máquina de estados se guarda dentro de un archivo dotLottie (.lottie), en la carpeta s/ definida por la especificación dotLottie.
El detalle está en el reproductor. Solo los reproductores dotLottie, como @lottiefiles/dotlottie-web y sus wrappers para React, Vue y otros, ejecutan estas máquinas de estados. El reproductor clásico lottie-web y las configuraciones antiguas que solo usan JSON reproducen la animación e ignoran la lógica. Así que "Lottie admite máquinas de estados" en realidad significa "dotLottie con un reproductor dotLottie las admite".
Rive tiene las máquinas de estados en el centro de su diseño desde hace mucho más tiempo. Cada .riv puede contener una o varias máquinas de estados, y todos los runtimes oficiales de Rive las ejecutan. El cambio en Rive está en cómo se comunica el código con ellas: está pasando de los inputs al Data Binding.
LottieFiles describe sus máquinas de estados como "casi tan capaces como las de Rive". Es su propia valoración. La tabla siguiente te permite juzgar la diferencia para tu caso de uso.
¿Qué puede hacer cada máquina de estados?
| Capacidad | Máquina de estados de dotLottie | Máquina de estados de Rive + Data Binding |
|---|---|---|
| Inputs / propiedades | Numérico, string, booleano, evento | Inputs heredados: número, booleano, trigger. View models: también strings, enums, colores, listas, modelos anidados, imágenes, artboards |
| Interacciones con el puntero | Entrada, salida, presión, liberación, movimiento, clic | Listeners en formas y regiones del arte |
| Transiciones | Instantáneas o interpoladas (cubic-bezier) | Transiciones temporizadas con mezcla entre animaciones |
| Condiciones | Guards sobre valores de inputs | Condiciones sobre inputs o propiedades enlazadas |
| Acciones integradas | Asignar/alternar/incrementar inputs, disparar eventos, fijar fotograma o progreso, SetTheme, OpenUrl, eventos personalizados | Eventos notificados al código; Data Binding actualiza valores en ambos sentidos |
| Data Binding bidireccional | No está en la especificación | Sí, mediante view models |
| Blend states | No está en la especificación | Sí, mezclan animaciones según un valor |
| Capas | Un estado activo más un estado global | Varias capas en ejecución a la vez |
| Herramienta de creación | Lottie Creator | Editor de Rive |
Lee con atención las celdas que dicen "no está en la especificación": significan que la especificación publicada de dotLottie no describe esa función, no que sea imposible encontrar una solución creativa. Ambos proyectos evolucionan, así que revisa la documentación actual para cualquier aspecto crítico.
En la práctica, dotLottie resuelve bien íconos interactivos, botones, interruptores e ilustraciones con pocos estados. Las piezas adicionales de Rive (blends, capas y datos tipados) importan sobre todo en personajes cuyo comportamiento depende de varias cosas a la vez.
¿Qué aporta Data Binding de Rive frente a los inputs?
El modelo de control original de Rive era el input: un número, booleano o trigger con nombre dentro de una máquina de estados. Tu código asignaba mood = 3 o disparaba success, y la máquina de estados reaccionaba. La documentación de Rive ahora muestra un aviso de obsolescencia en sus páginas de inputs y los considera heredados: recomienda que los proyectos nuevos usen Data Binding. Los archivos existentes con inputs siguen funcionando.
Data Binding reemplaza los inputs sueltos por un view model: un conjunto tipado de propiedades definido en el editor y vinculado a partes de la animación. Aporta:
- Más tipos: strings, enums, colores, listas, view models anidados, imágenes y artboards, no solo números, booleanos y triggers.
- Sincronización bidireccional: los valores pueden cambiar desde tu código, el editor, la máquina de estados o scripting, y tu código puede suscribirse a esos cambios.
- Vínculos directos: una propiedad de texto puede controlar una etiqueta del arte y una propiedad de color un relleno, sin pasar por estados.
La migración tiene plazos en algunas plataformas. El nuevo runtime de Apple solo admite Data Binding; los inputs requieren la API legacy de Apple. El runtime de React Native de Rive muestra advertencias para los métodos de inputs en la v0.5 (la línea de versiones actual a octubre de 2026) y eliminará las API obsoletas en la v0.6. El editor de Rive incluye la acción "Convert Inputs to View Models", que se ejecuta con un clic, para ayudarte.
¿Alguno de los dos puede mezclar animaciones?
Rive sí, de dos maneras. Una transición entre estados puede mezclar la animación saliente y la entrante durante un tiempo definido, de modo que un personaje pasa suavemente de reposo (idle) a hablar en lugar de cambiar de golpe. Y un blend state mezcla varias animaciones de forma continua según un valor, por ejemplo una cabeza que gira en proporción a un número de -1 a 1, o una caminata que se convierte en carrera a medida que aumenta la velocidad. Las máquinas de estados también pueden ejecutar varias capas a la vez, como los ojos parpadeando en una capa mientras el cuerpo reproduce otra.
La especificación de dotLottie describe transiciones interpoladas con easing cubic-bezier entre estados. Eso suaviza el cambio de un estado al siguiente. No describe blend states que mezclen varias animaciones según un valor, ni varias capas simultáneas; en su lugar, tiene un estado actual más un estado global cuyas transiciones se evalúan primero.
Por qué importa: la mezcla es lo que hace que un personaje parezca vivo y no un conjunto de clips. Si tu animación es un botón con estados de reposo, hover y presionado, las transiciones interpoladas son más que suficientes. Si es una mascota de marca que debe mirar hacia el cursor mientras respira y reacciona a eventos, los blends y las capas te ahorran crear cada combinación a mano.
¿Cómo se controlan desde el código de la app?
Ambos exponen sus máquinas de estados al código, con API distintas.
dotLottie: los reproductores de dotLottie te permiten cargar una máquina de estados desde el archivo, asignar sus inputs y escuchar los eventos y eventos personalizados que dispara la máquina de estados. Los nombres de los métodos varían entre los reproductores web, móviles y de Flutter, así que sigue la documentación del reproductor de tu plataforma.
Rive, inputs heredados (todavía comunes en archivos existentes), en la web:
const r = new rive.Rive({
src: "character.riv",
canvas,
stateMachine: "CharacterStateMachine",
autoplay: true,
onLoad: () => {
const inputs = r.stateMachineInputs("CharacterStateMachine");
inputs.find((i) => i.name === "mood").value = 5;
inputs.find((i) => i.name === "success").fire();
},
});Rive, Data Binding (recomendado para proyectos nuevos):
const r = new rive.Rive({
src: "character.riv",
canvas,
stateMachine: "CharacterViewModelMachine",
autoBind: true,
autoplay: true,
onLoad: () => {
const vm = r.viewModelInstance;
vm.number("mood").value = 5;
vm.trigger("success").trigger();
},
});Por eso los archivos de Charmotion incluyen ambas opciones. Cada .riv contiene 17 animaciones controladas por un view model Character (un número mood de 0 a 9 y los triggers success, error, yes, no, enter y exit), los mismos estados como inputs heredados en CharacterStateMachine, y una LaunchStateMachine para la intro. Subes una imagen y recibes el set en unos minutos, con código para web, React y SwiftUI. Charmotion entrega Rive y video, no dotLottie.
¿Cuál es más fácil para diseñadores?
Depende de lo que el diseñador ya use.
Lottie Creator conviene a equipos cuyo trabajo de motion empieza en After Effects. Los diseñadores siguen animando donde se sienten cómodos, exportan a Lottie y luego agregan estados e interacciones en un editor web. El modelo lógico es compacto (inputs, guards, transiciones y acciones), lo que acorta la curva de aprendizaje. Los detalles del plan importan: LottieFiles incluye Lottie Creator en sus planes de pago (Individual $19.99 y Team $24.99 al mes con facturación anual, a octubre de 2026); no pudimos confirmar si las máquinas de estados requieren un plan específico.
El editor de Rive es una sola herramienta para dibujar, riggear, animar y construir la lógica. Un diseñador puede probar las interacciones en vivo en el editor antes de entregar nada a los desarrolladores. La curva de aprendizaje es más pronunciada, y Data Binding suma otro concepto, los view models, además de los estados. A cambio, una sola persona puede encargarse de todo el recurso interactivo.
Para los desarrolladores, el factor decisivo suele ser el contrato. Acuerda pronto los nombres de inputs o propiedades y documéntalos, porque tu código depende de ellos en ambos sistemas. Cambiar el nombre de una propiedad en el archivo rompe la app sin ningún aviso.
¿Qué máquina de estados deberías elegir?
Elige las máquinas de estados de dotLottie si tus animaciones vienen de After Effects, las interacciones son hover, clic, interruptores o pocos estados, quieres acciones integradas como SetTheme y OpenUrl, y puedes usar un reproductor de dotLottie en todas las plataformas.
Elige Rive si necesitas blends, capas o datos tipados bidireccionales como texto, colores o listas, o un personaje cuyo comportamiento depende de varios valores a la vez. Usa Data Binding en proyectos nuevos y conserva los inputs solo para archivos existentes y runtimes legacy.
Si tienes dudas, crea un prototipo de la interacción más compleja que necesites en ambas herramientas. La que la exprese sin soluciones improvisadas suele ser la elección correcta. Para la decisión general, consulta Rive vs Lottie, y para el modelo de Rive en detalle, Máquina de estados de Rive: inputs, triggers y estados de ánimo.
Preguntas frecuentes
¿Los inputs de la máquina de estados de Rive están obsoletos?
Rive ahora considera legacy los inputs. Su documentación indica que siguen funcionando, pero recomienda Data Binding con view models para proyectos nuevos. Algunos runtimes van más allá: el nuevo runtime de Apple solo admite Data Binding, y el runtime de React Native de Rive elimina las API de inputs obsoletas en la v0.6. Los archivos existentes basados en inputs se siguen reproduciendo.
¿Las máquinas de estados de Lottie funcionan en lottie-web?
No. Las máquinas de estados de Lottie forman parte del formato dotLottie y se ejecutan en reproductores de dotLottie como @lottiefiles/dotlottie-web y sus wrappers para frameworks. lottie-web reproduce el JSON de la animación, pero no la máquina de estados. Antes de depender de ellas, comprueba que todas las plataformas donde publicas usen un reproductor de dotLottie.
¿Puedo convertir una máquina de estados de Rive a Lottie?
No de forma automática. El conversor gratis de Rive a Lottie de LottieFiles genera animaciones de línea de tiempo e indica que las máquinas de estados no se convierten. Tendrías que reconstruir la lógica en Lottie Creator, y las funciones sin equivalente en dotLottie, como los blend states y Data Binding bidireccional, requerirían otro diseño.
¿Qué es un view model de Rive?
Un view model es un conjunto tipado de propiedades, como números, strings, colores, enums, listas y triggers, definido en el editor de Rive y vinculado a partes de una animación. Tu app lee y escribe esas propiedades en tiempo de ejecución, y los cambios se sincronizan en ambos sentidos. Reemplaza los inputs heredados de la máquina de estados.
Respuestas rápidas de esta guía
Fuentes
- State machines are finally in Lottie Creator, LottieFiles
- dotLottie state machines: Specification, LottieFiles
- State machine inputs (legacy), Rive
- Data binding overview, Rive
- Data binding migration guide, Rive
- State machine, Rive
- Apple runtime: Inputs (legacy), Rive
- React Native migration guide, Rive