Transforme um PNG em um arquivo Rive com 17 animações.
Envie um PNG, JPEG ou WebP do seu personagem. Você recebe um .riv que já vem com rig, keyframes e conexões prontas: um número mood para 10 loops, triggers para 6 reações únicas e uma intro de abertura, pronto para web, iOS, Android, Flutter e React Native.
Este é o .riv real que nosso motor entrega, rodando no seu navegador. É a mesma state machine que você controla no seu app com um input numérico e um trigger para cada reação única.
Quais são as melhores ferramentas de PNG para animação Rive?
As principais opções são o editor do Rive (você importa o PNG, adiciona malhas e bones e monta a state machine), o AI Agent integrado ao editor do Rive nos planos pagos, um gerador como o Charmotion, que entrega um .riv com 17 animações a partir de uma imagem, e Rive Experts contratados pela Contra para trabalhos sob medida.
CharacterViewModelMachine é controlada pelo view model Character (Data Binding): o número mood mais um trigger por reação. É exigida pelo novo runtime do Rive para Apple e recomendada em todas as plataformas.
CharacterStateMachine é o mesmo grafo com inputs clássicos, para runtimes e códigos que ainda os usam.
LaunchStateMachine toca a intro uma vez e termina em idle.
Reações únicas (triggers): success · error · yes · no · enter · exit. Cada uma toca uma vez e depois volta ao humor atual.
Abertura: uma intro de 2,6 s que termina em idle.
Artes planas são vetorizadas em partes (nossos arquivos .riv de demonstração têm de 36 a 41 KB); artes 3D ou detalhadas mantêm os pixels, então o arquivo fica maior (cerca de 1,0 MB na nossa demonstração de logo 3D).
Coloque no seu app
import { Rive } from "@rive-app/canvas";
const r = new Rive({
src: "/mascot.riv",
canvas: document.querySelector("canvas"),
stateMachine: "CharacterViewModelMachine",
autoBind: true, // binds the Character view model
autoplay: true,
onLoad: () => {
const vm = r.viewModelInstance;
vm.number("mood").value = 5; // loading
vm.trigger("success").trigger(); // plays once, back to mood
},
});
Os snippets para web e React usam Data Binding; também incluímos um arquivo SwiftUI para cada runtime da Apple.
Prefere fazer você mesmo?
Você pode fazer o mesmo à mão no editor do Rive: importe o PNG, adicione malhas e bones, crie keyframes para cada estado e conecte a state machine. Nosso guia de PNG para Rive passo a passo explica tudo. O Charmotion é para quando você prefere dedicar esses dias ao seu produto.
Resultado real
Arquivos entregues, exatamente como você os baixaria.
MP4 Todo conjunto
1080 × 1080 a 60 fps. Aqui: o wave do Gummo, de um conjunto entregue.
WebM & MOV transparentes Todo conjunto
Canal alfa incluído, por isso o quadriculado aparece por trás. O MOV é HEVC com alfa para apps e editores da Apple.
GIF Todo conjunto
Prévias leves para documentação, e-mail e chat. O loop “thinking” do Kiko.
Vídeo de abertura 9:16 Todo conjunto
1080 × 1920 para stories e splash screens. A intro de abertura do Sizzle.
kiko.riv · 150 KB
CharacterStateMachine
input numérico mood 0 a 9: idle, happy, wave, thinking, sad, loading, listening, talking, sleeping, attention triggers: success · error · yes · no · enter · exit
LaunchStateMachine
launch → idle, toca uma vez
State machine do Rive Todo conjunto
Um único arquivo pequeno no lugar de 17 vídeos. É ele que faz funcionar a demo no topo desta página.
Componentes para web, React e SwiftUI com o nome do seu personagem.
Formatos incluídos em cada plano
Formato
Especificações
Ideal para
Starter & All in one
MP4
1080 × 1080, 60 fps, todas as 17 animações
Apps, redes sociais, apresentações, vídeos de produto
Incluído
Vídeo de abertura 9:16
MP4 1080 × 1920
Stories, Reels, splash screens
Incluído
GIF
Prévias de 480 px, fundo sólido
Documentação, e-mail, chat, README
Incluído
Rive (.riv)
Vetorial; view model com Data Binding + inputs legados: mood para os loops, triggers para as reações únicas e uma state machine para a intro de abertura
Apps e sites interativos (web, iOS, Android, Flutter)
Incluído
WebM com fundo transparente
VP9 com canal alfa, 1080 × 1080
Sobreposições na web sobre qualquer fundo
Incluído
MOV com fundo transparente
HEVC com canal alfa
Final Cut, Keynote, iOS, Safari
Incluído
Código
Componentes para web (HTML), React e SwiftUI
Cole e publique
Incluído
Baixar tudo (.zip)
Arquivo Rive, código, README e pôsteres em um só arquivo
Entrega para o seu time
Incluído
Exportação de vídeo
MP4, GIF, WebM e MOV transparentes, 9:16: escolha formatos e animações na página do conjunto, prontos em cerca de um minuto
Comece grátis. Faça upgrade quando precisar de mais.
O arquivo .riv está em todos os planos pagos, a partir do Starter (US$ 20/mês). Os conjuntos de personagem começam no Starter. Preços em USD; os impostos são calculados no checkout pela Creem.
Recebo o arquivo editável do Rive ou só o .riv de runtime?
Você recebe o .riv exportado que os runtimes do Rive reproduzem, com todas as state machines e o view model Character. Edições na própria animação não fazem parte do conjunto.
Quais runtimes do Rive reproduzem o arquivo entregue?
Web (canvas e WebGL), React, iOS (runtimes Apple novo e legado), Android, Flutter e React Native. Use CharacterViewModelMachine com runtimes que suportam Data Binding e CharacterStateMachine com código baseado em inputs.
Posso converter vários PNGs em um único .riv?
Cada conjunto é um personagem a partir de uma imagem. O Starter inclui 3 conjuntos por mês e o All in one, 10; cada conjunto é o seu próprio .riv.
E se o meu PNG tiver fundo?
Um fundo liso é removido automaticamente. Fundos poluídos, fotos e vistas de perfil não animam bem, então experimente primeiro a prévia grátis para testar sua imagem.
Arquivo Rive ao vivo
