State machines e Data Binding: Lottie vs Rive

O Lottie já tem state machines?

Sim. A afirmação de que "o Lottie não tem interatividade" foi verdadeira durante a maior parte da sua história e agora está desatualizada. Em 23 de setembro de 2025, a LottieFiles adicionou state machines visuais ao Lottie Creator, seu editor baseado na web. A state machine é salva dentro de um arquivo dotLottie (.lottie), na pasta s/ definida pela especificação dotLottie.

O porém é o player. Apenas players dotLottie, como o @lottiefiles/dotlottie-web e seus wrappers para React, Vue e outros, executam essas state machines. O player clássico lottie-web e configurações mais antigas que usam só JSON tocam a animação e ignoram a lógica. Ou seja, "o Lottie suporta state machines" na verdade significa "o dotLottie com um player dotLottie suporta".

O Rive tem state machines no centro do seu design há muito mais tempo. Todo .riv pode conter uma ou mais state machines, e todos os runtimes oficiais do Rive as executam. A mudança no Rive está em como o código se comunica com elas: o Rive está migrando de inputs para Data Binding.

A LottieFiles descreve suas state machines como "quase tão capazes quanto as do Rive". Essa é a avaliação da própria empresa. A tabela abaixo ajuda você a avaliar a diferença para o seu caso de uso.

O que cada state machine consegue fazer?

Leia com atenção as células "não consta na especificação": elas indicam que a especificação publicada do dotLottie não descreve o recurso, e não que uma solução criativa seja impossível. Os dois projetos estão em evolução, então confira a documentação atual para qualquer coisa crítica.

Na prática, o dotLottie atende bem ícones interativos, botões, toggles e ilustrações com poucos estados. Os recursos extras do Rive (blends, camadas e dados tipados) fazem mais diferença em personagens cujo comportamento depende de várias coisas ao mesmo tempo.

O que o Data Binding do Rive acrescenta em relação aos inputs?

O modelo de controle original do Rive era o input: um número, booleano ou trigger com nome em uma state machine. Seu código definia mood = 3 ou disparava success, e a state machine reagia. A documentação do Rive agora traz um aviso de descontinuação nas páginas de inputs e os chama de legado, orientando novos projetos a usar Data Binding. Arquivos existentes com inputs continuam funcionando.

O Data Binding substitui inputs soltos por um view model: um conjunto tipado de propriedades definido no editor e vinculado a partes da animação. Ele acrescenta:

• Mais tipos: strings, enums, cores, listas, view models aninhados, imagens e artboards, e não só números, booleanos e triggers.
• Sincronização nos dois sentidos: os valores podem mudar pelo seu código, pelo editor, pela state machine ou por scripting, e seu código pode se inscrever para receber as mudanças.
• Vínculos diretos: uma propriedade de texto pode controlar um rótulo na arte, e uma propriedade de cor, um preenchimento, sem passar por estados.

A migração tem prazos em algumas plataformas. O novo runtime da Apple suporta apenas Data Binding; inputs exigem a API legada da Apple. O runtime de React Native do Rive registra avisos para métodos de input na v0.5 (a linha de versões atual em outubro de 2026) e vai remover as APIs descontinuadas na v0.6. O editor do Rive tem a ação "Convert Inputs to View Models", que faz a conversão com um clique.

Algum dos dois faz blend entre animações?

O Rive faz, de duas formas. Uma transição entre estados pode misturar a animação que sai e a que entra ao longo de um tempo definido, para que o personagem passe suavemente de idle para talking em vez de cortar. E um blend state mistura várias animações de forma contínua conforme um valor, por exemplo uma cabeça que gira proporcionalmente a um número de -1 a 1, ou uma caminhada que se transforma em corrida conforme a velocidade aumenta. As state machines também podem rodar várias camadas ao mesmo tempo, como os olhos piscando em uma camada enquanto o corpo reproduz outra.

A especificação do dotLottie descreve transições interpoladas com easing cubic-bezier entre estados. Isso suaviza a mudança de um estado para o seguinte. Ela não descreve blend states que misturam várias animações conforme um valor, nem várias camadas simultâneas; em vez disso, tem um estado atual mais um estado global cujas transições são verificadas primeiro.

Por que isso importa: o blend é o que faz um personagem parecer vivo, e não um conjunto de clipes. Se a sua animação é um botão com estados idle, hover e pressionado, transições interpoladas bastam. Se é um mascote que deve olhar para o cursor enquanto respira e reage a eventos, blends e camadas poupam você de criar cada combinação à mão.

Como controlar as state machines pelo código do app?

Os dois expõem suas state machines ao código, com APIs diferentes.

dotLottie: os players de dotLottie permitem carregar uma state machine do arquivo, definir seus inputs e escutar os eventos e eventos personalizados que ela dispara. Os nomes dos métodos variam entre os players web, mobile e Flutter, então siga a documentação do player da sua plataforma.

Rive, inputs legados (ainda comuns em arquivos existentes), na 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 novos trabalhos):

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 isso, os arquivos do Charmotion vêm das duas formas. Cada .riv traz 17 animações controladas por um view model Character (um número mood de 0 a 9 e os triggers success, error, yes, no, enter e exit), os mesmos estados como inputs legados em CharacterStateMachine e uma LaunchStateMachine para a intro. Você envia uma imagem e recebe o conjunto em poucos minutos, com código para web, React e SwiftUI. O Charmotion entrega Rive e vídeo, não dotLottie.

Qual é mais fácil para designers?

Depende do que o designer já usa.

O Lottie Creator é indicado para equipes cujo trabalho de motion começa no After Effects. Os designers continuam animando onde se sentem à vontade, exportam para Lottie e depois adicionam estados e interações em um editor web. O modelo de lógica é enxuto (inputs, guards, transições e ações), o que mantém a curva de aprendizado curta. Os detalhes do plano importam: a LottieFiles inclui o Lottie Creator nos planos pagos (Individual US$ 19,99 e Team US$ 24,99 por mês, com cobrança anual, em outubro de 2026); não conseguimos confirmar se as state machines exigem um plano específico.

O editor do Rive é uma única ferramenta para desenhar, fazer o rig, animar e montar a lógica. O designer pode testar as interações ao vivo no editor antes de passar qualquer coisa para os desenvolvedores. A curva de aprendizado é mais íngreme, e o Data Binding acrescenta mais um conceito, os view models, além dos estados. Em troca, uma única pessoa pode cuidar de todo o asset interativo.

Para os desenvolvedores, o fator decisivo costuma ser o contrato. Combine os nomes dos inputs ou propriedades cedo e documente esses nomes, porque o seu código depende deles nos dois sistemas. Renomear uma propriedade no arquivo quebra o app sem nenhum aviso.

Qual state machine você deve escolher?

Escolha as state machines do dotLottie se suas animações vêm do After Effects, as interações são hover, clique, toggles ou poucos estados, você quer ações integradas como SetTheme e OpenUrl e pode usar um player de dotLottie em todas as plataformas.

Escolha o Rive se você precisa de blends, camadas ou dados tipados nos dois sentidos, como texto, cores ou listas, ou de um personagem cujo comportamento depende de vários valores ao mesmo tempo. Use Data Binding em novos trabalhos e mantenha inputs apenas para arquivos existentes e runtimes legados.

Se estiver em dúvida, faça um protótipo da interação mais complexa de que você precisa nas duas ferramentas. A que conseguir expressá-la sem gambiarras geralmente é a escolha certa. Para a decisão mais ampla, veja Rive vs Lottie e, para o modelo do Rive em detalhes, State machine do Rive: inputs, triggers e humores.

Perguntas frequentes

Os inputs de state machine do Rive foram descontinuados?

O Rive agora classifica os inputs como legado. A documentação diz que eles ainda funcionam, mas recomenda Data Binding com view models para novos projetos. Alguns runtimes vão além: o novo runtime da Apple suporta apenas Data Binding, e o runtime de React Native do Rive remove as APIs de input descontinuadas na v0.6. Arquivos existentes baseados em inputs continuam sendo reproduzidos.

As state machines do Lottie funcionam no lottie-web?

Não. As state machines do Lottie fazem parte do formato dotLottie e rodam em players de dotLottie, como o @lottiefiles/dotlottie-web e seus wrappers para frameworks. O lottie-web reproduz o JSON da animação, mas não a state machine. Antes de depender delas, confirme que todas as plataformas onde você publica usam um player de dotLottie.

Dá para converter uma state machine do Rive para Lottie?

Não automaticamente. O conversor gratuito de Rive para Lottie da LottieFiles gera animações de timeline e informa que as state machines não são convertidas. Você teria que reconstruir a lógica no Lottie Creator, e recursos sem equivalente no dotLottie, como blend states e Data Binding nos dois sentidos, exigiriam outro design.

O que é um view model do Rive?

Um view model é um conjunto tipado de propriedades, como números, strings, cores, enums, listas e triggers, definido no editor do Rive e vinculado a partes de uma animação. Seu app lê e grava essas propriedades em tempo de execução, e as mudanças sincronizam nos dois sentidos. Ele substitui os inputs legados das state machines.

Respostas rápidas deste guia

• O Lottie tem state machines?

Fontes

• 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