PNG para animação Rive: como transformar uma imagem em um arquivo .riv

O Rive consegue animar um PNG?

Sim. O editor do Rive importa imagens PNG, JPEG e WebP, além de arquivos SVG e do Photoshop. A diferença importa: um SVG é convertido em objetos vetoriais do Rive que você pode editar ponto a ponto, enquanto um PNG continua sendo um bitmap. Você pode mover, girar e redimensionar um bitmap na hora, mas para fazê-lo se curvar você precisa de uma malha (mesh).

Segundo a descrição do próprio Rive, as malhas permitem "deformações naturais e orgânicas em gráficos raster": você desenha um contorno ao redor da imagem, o Rive faz a triangulação e então você pode mover os vértices em uma timeline ou deixar que bones (ossos) os movam. Só a área dentro do contorno é renderizada, então dá até para recortar várias partes de uma mesma imagem usando várias malhas.

Como devo preparar o PNG antes de importar?

• Fundo transparente. Remova o fundo primeiro. Halos que sobrarem vão aparecer em qualquer cor sobre a qual você colocar a animação depois.
• De frente, com espaço ao redor dos membros. Braços e pernas encostados no corpo são difíceis de mover sem rasgar a imagem.
• Divida em partes, se puder. Exporte cabeça, corpo, cada braço e os acessórios como PNGs separados a partir do seu arquivo de design. Partes separadas podem girar em torno do próprio pivô; uma única imagem plana só consegue se deformar.
• Resolução suficiente. O Rive redimensiona vetores livremente, mas bitmaps ficam borrados quando ampliados, então exporte no maior tamanho em que a animação será exibida, em 2× para telas de alta densidade.

Se o personagem só existe como um único PNG plano, com formas simples e cores sólidas, muitas vezes vale a pena vetorizá-lo em SVG antes: assim você anima partes vetoriais de verdade e o .riv fica menor.

Como fazer o rig e animar no editor do Rive?

Os bones são o esqueleto do Rive. Eles podem simplesmente carregar objetos filhos (a mão acompanha o antebraço), deformar caminhos vetoriais ou deformar malhas de imagem. Quando você vincula uma malha a bones, o Rive atribui uma cor a cada bone e um peso a cada vértice, que você pode pintar, calcular automaticamente e suavizar.

1. Importe o PNG (ou as partes) arrastando os arquivos para o palco.
2. Adicione uma malha a cada imagem na seção Deform do Inspector e desenhe o contorno.
3. Crie bones para as partes que devem se curvar: uma coluna para o corpo, uma cadeia para cada braço.
4. Vincule os vértices da malha aos bones e ajuste os pesos até a curvatura ficar limpa.
5. Crie uma timeline por animação (idle, happy, wave e assim por diante) e adicione keyframes aos bones.

Mantenha o idle sutil e em loop, e faça reações curtas que tocam uma vez e voltam à pose idle, para que a troca entre elas nunca dê saltos.

Por que o .riv precisa de uma state machine?

Um .riv com timelines soltas toca uma única animação. Uma state machine permite que seu app alterne entre elas com um número, um booleano ou um trigger, e suaviza as transições. Hoje o Rive recomenda controlar state machines por Data Binding (um view model com propriedades) em vez dos inputs antigos, e os runtimes mais novos foram construídos em torno disso.

Um conjunto prático para o personagem de um app fica assim:

Existe um jeito mais rápido de gerar um .riv a partir de um PNG?

Fazer o rig e os keyframes de dezessete estados à mão leva dias de trabalho para a maioria das pessoas. O Charmotion faz essa etapa por você: envie o PNG e o motor traça a arte plana em partes vetoriais (ou, para artes detalhadas e 3D, mantém os seus pixels exatos e faz o rig deles para compressão, alongamento, inclinação e piscadas), cria os keyframes de 17 animações e as conecta em um único .riv com um view model de data binding e uma state machine clássica. Todo plano pago inclui o .riv, além de vídeo transparente e código; você pode ver a prévia da sua própria imagem no navegador antes, grátis e sem enviar nada.

O Charmotion funciona melhor com mascotes planos, de frente, e personagens de logo. Fotos, arte com estilo de pintura e vistas laterais não combinam bem, e nesses casos um animador humano no editor do Rive ainda é a melhor escolha.

Transforme um PNG em uma animação do Rive

1. Prepare a imagem. Remova o fundo e, se possível, exporte as partes do personagem como PNGs separados.
2. Importe no Rive. Arraste os PNGs para o palco do Rive. SVGs viram formas vetoriais; PNG, JPEG e WebP continuam sendo bitmaps.
3. Adicione malhas. Dê a cada bitmap uma malha na seção Deform para que os pixels possam se curvar.
4. Faça o rig com bones. Crie cadeias de bones, vincule os vértices da malha a elas e ajuste os pesos.
5. Crie os keyframes das animações. Faça uma timeline por estado: um idle em loop, mais os loops e as reações únicas de que seu app precisa.
6. Conecte uma state machine e exporte. Ligue as timelines em uma state machine controlada por um view model ou por inputs e depois exporte o .riv.

Perguntas frequentes

Posso importar um PNG no Rive?

Sim. O editor do Rive importa imagens PNG, JPEG e WebP arrastando e soltando ou pelo painel Assets. Elas continuam sendo bitmaps; adicione uma malha se quiser que se deformem.

SVG é melhor que PNG para o Rive?

Para artes planas, geralmente sim. O Rive converte um SVG em objetos vetoriais editáveis, então você pode animar formas individuais e o arquivo fica pequeno e nítido em qualquer tamanho. O PNG mantém os pixels exatos, o que combina com artes detalhadas ou sombreadas.

Meu .riv fica maior com um PNG dentro?

Sim, bitmaps incorporados somam o próprio tamanho comprimido ao arquivo, enquanto cada forma vetorial é descrita em poucos bytes. Não exporte bitmaps maiores do que o tamanho em que você vai exibi-los.

Preciso de um plano pago do Rive para exportar?

Os planos do Rive variam no que incluem e mudam com o tempo. Confira os recursos atuais na página de preços do Rive antes de começar um projeto comercial.

Respostas rápidas deste guia

• Como transformar um PNG em uma animação do Rive?

Fontes

• Importing assets, Rive
• Meshes, Rive
• Bones, Rive
• State Machine, Rive
• Data Binding overview, Rive
• Rive pricing, Rive