Pular para o conteúdo
charmotion

Converter GIF, vídeo ou PNG para Rive ou Lottie: o que é possível

Por equipe Charmotion · Atualizado em

Ilustração de capa do guia: Converter GIF, vídeo ou PNG para Rive ou Lottie: o que é possível, com personagens de demonstração do Charmotion

Não existe um conversor de verdade de GIF, MP4 ou PNG para Rive ou Lottie: esses arquivos guardam pixels, enquanto Rive e Lottie guardam formas e keyframes. Você pode incorporar os frames como uma sequência de imagens, que toca mas fica pesada, ou reconstruir o movimento fazendo o rig de um frame limpo no Rive ou no Lottie Creator, ou com uma ferramenta de Lottie com IA.

Principais pontos

  • Os "conversores" que aceitam GIF ou vídeo incorporam os frames como imagens; o resultado não é uma animação vetorial.
  • O Universal Importer do Lottie Creator converte clipes de vídeo e GIF de até 10 segundos.
  • O Recraft vetoriza um PNG de arte plana em Lottie JSON pronto para animar; o OmniLottie, da fal, gera Lottie a partir de um prompt de texto.
  • Para abrir um .riv, use um runtime do Rive ou um inspetor no navegador; para editar, você precisa do projeto original.
  • O editor do Rive exporta H.264, WebM, GIF e sequências de imagens nos planos pagos.

Por que não dá para converter um GIF ou vídeo em Rive ou Lottie?

Porque eles descrevem a animação de formas diferentes. Um GIF ou MP4 é uma pilha de imagens: milhões de pixels coloridos por segundo. Um arquivo Rive ou Lottie é um conjunto de formas mais instruções: "mova este braço 20 graus em 300 milissegundos". Passar de pixels para formas significa adivinhar quais são as partes e como elas se movem, algo que nenhum exportador consegue fazer de forma confiável.

Por isso, toda opção cai em um destes dois caminhos:

  • Embalar os pixels. Colocar os frames dentro de um arquivo Rive ou Lottie como imagens. Toca, mas fica tão pesado quanto o original ou mais, perde nitidez ao ser ampliado e não consegue fazer transições suaves entre estados.
  • Reconstruir o movimento. Pegar um frame limpo, dividi-lo em partes e animar essas partes. Assim você tem um arquivo vetorial de verdade, ao custo de trabalho de animação.

Posso importar um GIF, MP4 ou sequência de PNG no Rive?

O editor do Rive importa imagens JPEG, PNG e WebP, arquivos PSD e arte em SVG, mas a documentação de importação não lista GIF nem vídeo, e nada transforma um clipe em keyframes. Para trazer um clipe existente, exporte os frames como PNG, importe-os e mostre um por frame em uma timeline. Isso funciona para um efeito curto, mas cada frame soma o tamanho completo da imagem ao .riv.

O melhor caminho é fazer o rig de um único frame:

  1. Escolha o frame mais limpo, ou o PNG original, de preferência com fundo liso.
  2. Divida-o em partes (ou vetorize em SVG), importe e adicione bones (ossos) ou uma malha.
  3. Recrie o movimento com keyframes e depois adicione uma state machine se ele precisar reagir.

Guias passo a passo: PNG para Rive e SVG para Rive. Se a sua origem já é um Lottie, veja como converter Lottie para Rive.

Como transformar um GIF, vídeo ou PNG em Lottie?

GIF ou vídeo: o Lottie Creator, da LottieFiles, tem um Universal Importer que lista GIF e MP4, WebM e MOV, com a promessa de "converter arquivos de vídeo e GIF em animações Lottie". Você pode "cortar clipes de até 10 segundos e definir a taxa de frames desejada antes de converter". Espere um resultado baseado em frames, e não formas vetoriais editáveis, então confira o tamanho do arquivo antes de colocar em produção.

PNG, frame a frame: o Lottie Creator importa PNG e JPG como camadas de imagem, que, segundo ele, "não podem ser editadas como vetores e aumentam o tamanho do arquivo". O Vectorizer dele converte antes uma imagem raster em vetores editáveis.

PNG com ajuda de IA:

  • O conversor de PNG para Lottie do Recraft funciona "vetorizando as imagens primeiro" e exporta Lottie JSON "pronto para animar". Serve para logos e ícones planos, não para fotos. O movimento você ainda precisa adicionar.
  • O modelo OmniLottie, da fal, gera uma animação Lottie a partir de um prompt de texto. O schema da API tem um prompt e nenhuma entrada de imagem, então ele cria algo novo em vez de animar o seu PNG.

Como abrir ou visualizar um arquivo .riv?

Um .riv é a exportação de runtime, o arquivo que os apps reproduzem. Para ver o que tem dentro sem escrever código, arraste-o para o nosso Rive File Inspector grátis. Ele roda no seu navegador, lista artboards, animações, state machines, inputs e view models de Data Binding, e permite controlá-los ao vivo. Nada é enviado.

Qualquer runtime do Rive também reproduz o arquivo: algumas linhas com o runtime web, ou os pacotes para React, iOS, Android e Flutter.

Editar é outra história. A documentação da comunidade do Rive explica que os arquivos de runtime são otimizados e removem dados que não são de runtime (por exemplo, a posição dos estados no gráfico da state machine), e que a exportação "For backup" do editor, um arquivo .rev, mantém tudo e pode ser arrastada de volta para o editor. Se você precisa alterar um .riv que alguém fez para você, peça o projeto ou o .rev.

Como converter um .riv para MP4 ou GIF?

No editor do Rive, com o projeto original aberto. A documentação do Rive lista exportações em H.264, GIF, WebM, sequência de PNG e sequência de SVG a partir do modo Animate, e diz claramente que "a exportação de vídeo e imagens está disponível nos planos pagos". O fluxo:

  1. Selecione o artboard e adicione um Render Preset.
  2. No modo Animate, escolha a animação, o formato, o FPS, a duração, o bit rate e o tamanho.
  3. Adicione à Render Queue e inicie a renderização.
  4. Baixe o resultado na aba Completed do Cloud Renderer.

Sem o editor, você pode gravar um .riv tocando no navegador, mas estará capturando a tela, não exportando a animação.

O Charmotion converte arquivos para Lottie?

Não. O Charmotion parte de uma imagem estática (PNG, JPEG ou WebP de um personagem, mascote ou logo) e reconstrói o movimento como um rig, o segundo caminho acima. Nos planos pagos, ele entrega 17 animações em MP4, um vídeo 9:16, GIF, um .riv com uma state machine e WebM e MOV transparentes. Ele não aceita GIF nem vídeo como entrada e não exporta Lottie. Se você precisa de Lottie, use o Lottie Creator ou uma das ferramentas que exportam Lottie em comparação de ferramentas de animação de mascote com IA.

Perguntas frequentes

Posso converter um MP4 para Rive?

Não em uma animação vetorial de verdade. O Rive importa imagens, não vídeo, então o máximo que dá para fazer com o próprio clipe é uma sequência de imagens frame a frame. Para ter um arquivo leve e interativo, reconstrua o movimento a partir de um frame limpo com bones ou uma malha.

Um Lottie com frames PNG incorporados continua sendo uma animação vetorial?

Não. É um arquivo Lottie, então players de Lottie conseguem reproduzi-lo, mas os frames são imagens raster. Ele não fica nítido ao ser ampliado e geralmente é bem maior que um Lottie vetorial com o mesmo movimento.

Posso transformar uma sequência de PNG em uma animação Rive?

Você pode importar os PNGs e mostrar um por frame em uma timeline, e isso vai tocar em qualquer runtime do Rive. Mas cada frame soma o tamanho completo da imagem, então mantenha a animação curta. Para algo mais longo, faça o rig de um frame.

Respostas rápidas deste guia

Fontes

Guias relacionados