Como criar um mascote animado para o seu app

Por que os apps usam mascotes animados?

Um mascote dá um rosto ao seu produto em momentos que, de outra forma, seriam só espera vazia ou má notícia. Um spinner diz "aguarde". Um personagem que parece ocupado diz "estamos cuidando disso". Uma tela de erro com um dar de ombros compreensivo parece menos uma falha grave e mais um pequeno tropeço.

O exemplo mais conhecido é o Duolingo. A equipe criou a sincronização labial dos personagens com state machines do Rive, para que os mesmos personagens possam reagir e falar em todos os cursos sem um vídeo separado para cada fala (blog do Duolingo).

Você não precisa da escala do Duolingo para aproveitar os benefícios. Um app pequeno costuma obter a maior parte do valor com alguns poucos estados, colocados onde os usuários já fazem uma pausa:

• Espera: carregando, enviando, gerando.
• Nada aqui ainda: listas vazias, primeira abertura, nenhum resultado de busca.
• Resultados: uma compra concluída, um arquivo salvo, uma requisição que falhou.
• Boas-vindas e despedidas: onboarding, login, um tour pelos recursos.

O mascote deve apoiar a interface, nunca substituí-la. Deixe os textos e botões fazerem o trabalho de verdade e deixe o personagem definir o tom.

Como desenhar um mascote fácil de animar?

A maior parte das dores de cabeça na animação vem de decisões tomadas na fase do desenho. Um personagem que fica ótimo como ilustração isolada pode ser muito difícil de movimentar. Antes de fechar o design, confira esta lista:

• Pose de frente. Uma vista frontal ou quase frontal permite que olhos, boca e braços se movam de forma simétrica. Vistas de perfil e de três quartos exigem desenhos extras para cada estado.
• Formas planas e sólidas. Preenchimentos sólidos e contornos limpos se deformam bem. Texturas pesadas, detalhes fotográficos e gradientes complexos dificultam o rigging.
• Partes separadas. Mantenha corpo, olhos, boca, braços e acessórios em camadas ou grupos próprios. Se os olhos estiverem fundidos na cabeça, não dá para piscar.
• Silhueta simples. Um contorno legível em 48 a 64 px garante que o personagem continue funcionando em uma barra de ferramentas ou em uma linha de lista.
• Espaço para se mexer. Deixe uma margem ao redor do personagem no canvas para que um pulo ou um aceno não seja cortado.
• Fundo simples. Entregue o personagem em fundo transparente ou de cor única, e não dentro de um cenário.

Se você já tem um mascote que quebra algumas dessas regras, ele ainda pode ser animado. Isso só limita quais técnicas funcionam, como explicado na seção sobre PNG abaixo.

Quais estados um mascote de app deve ter?

Pense em dois tipos de animação. Loops rodam enquanto uma condição for verdadeira, como carregando ou ouvindo. Reações únicas tocam uma vez em resposta a um evento, como sucesso ou erro, e depois devolvem o controle ao loop que estava rodando.

Um conjunto inicial prático:

Adicione listening e talking se o mascote estiver à frente de um recurso de chat ou voz. O guia sobre estados de animação de mascote relaciona cada um a eventos específicos do app.

Defina cedo como cada reação única termina. A regra mais limpa é que uma reação sempre volta ao loop que estava rodando antes dela: um success durante o loading volta para o loading, e um success durante o idle volta para o idle. Registre essa regra para quem for animar o personagem, porque ela define como devem ser o primeiro e o último frame de cada reação única.

Quais são as opções para animar um mascote?

Existem quatro caminhos realistas. Cada um equilibra dinheiro, tempo e controle de um jeito diferente.

O Lottie renderiza animações do After Effects exportadas como JSON com o plugin Bodymovin (lottie-web). O formato mais recente dotLottie pode reunir várias animações e state machines em um só arquivo (dotLottie). O Rive foi construído em torno de state machines desde o início, o que combina com um mascote que alterna entre muitos estados; veja Rive vs Lottie.

O Charmotion é um exemplo do caminho automatizado. Você envia a imagem de um mascote e recebe 17 animações, normalmente em poucos minutos: dez loops selecionados por um número mood (0–9), seis triggers de reação única e uma intro de abertura. Nos planos pagos, elas vêm como um arquivo Rive (cerca de 40 KB para um mascote plano, mais para renders 3D, como cerca de 1,0 MB para um logo 3D), além de arquivos MP4, GIF e WebM e MOV transparentes.

Posso animar um mascote em PNG que já existe?

Sim, mas o jeito depende do que o PNG contém.

Arte plana em estilo vetorial (preenchimentos sólidos, contornos nítidos) pode ser separada em partes, redesenhando-a como formas vetoriais ou recortando as camadas. Com corpo, olhos, boca e braços separados, um animador pode fazer o rig de cada parte com bones e trocar as formas da boca para a fala.

Arte pintada, renderizada em 3D ou cheia de gradientes é mais difícil de separar. Redesenhá-la como vetor costuma perder o visual. A alternativa é manter os pixels originais e deformá-los: remova o fundo, coloque uma malha sobre a imagem, vincule-a a alguns bones (ossos) e dobre a arte para criar squash, stretch, inclinações e pulos. As piscadas podem ser adicionadas localizando os olhos e animando só essa região.

Seja qual for o caminho escolhido, a imagem de origem importa:

• Use a maior resolução que você tiver, de preferência 1.000 px ou mais no lado menor.
• Prefira um personagem de frente, em fundo simples.
• Evite fotos de pessoas ou objetos reais e vistas laterais, com as quais a maioria das abordagens de rigging lida mal.

As mesmas técnicas valem para logos; veja como animar um logo a partir de um PNG.

Qual formato devo entregar: Rive, Lottie ou vídeo?

Use um formato interativo dentro do produto e vídeo em todos os outros lugares.

• No app ou web app: um arquivo Rive ou dotLottie. Um único arquivo guarda todos os estados, e o seu código alterna entre eles. Os runtimes oficiais do Rive são open source sob a MIT License (documentação do Rive).
• Em um site de marketing: vídeo com fundo transparente funciona bem para um único hero em loop. Entregue WebM VP9 com alfa para Chrome, Edge e Firefox, além de HEVC com alfa para o Safari, que descarta o canal alfa do WebM (Jake Archibald).
• Posts em redes sociais, prévias na loja de apps, apresentações: MP4.
• E-mail e documentos: GIF apenas como prévia de fallback.

Vídeo é fácil de incorporar, mas cada estado é um arquivo separado, e alternar entre clipes nunca é tão fluido quanto alternar estados em uma state machine. Para um comparativo completo, leia GIF vs WebM vs MP4 vs Rive.

Quanto tempo leva e quanto custa animar um mascote?

Não existe uma tabela de preços confiável no mercado, então desconfie de quem cita um número único. Mas o que define custo e prazo é previsível:

• Número de estados. Cada loop e cada reação única é um trabalho à parte. Dez estados custam bem mais do que três.
• Esforço de rigging. Um personagem desenhado com partes separadas recebe o rig rapidamente. Uma ilustração achatada pode precisar ser redesenhada antes.
• Qualidade da atuação. Movimento sob medida, com timing feito à mão e personalidade, leva mais tempo do que um conjunto reutilizável de movimentos.
• Interatividade. Montar uma state machine e testar cada transição acrescenta tempo além de desenhar os frames.
• Revisões. Combine o número de rodadas de ajustes logo no início.

Para manter o projeto pequeno, comece com idle, loading, success e error. Publique esses, observe onde os usuários realmente veem o mascote e depois adicione estados. Um mascote que aparece em quatro lugares bem escolhidos vale mais do que um com vinte animações que ninguém dispara.

Como criar um mascote animado para app

1. Desenhe pensando no movimento. Desenhe um personagem de frente, com formas planas e partes separadas para corpo, olhos, boca e braços, em fundo simples.
2. Liste seus estados. Escolha os momentos do app que o mascote vai cobrir e marque cada um como loop (loading, idle) ou reação única (success, error).
3. Escolha um caminho de produção. Contrate um animador, faça o rig você mesmo no Rive ou no After Effects, ou use um serviço automatizado, de acordo com orçamento e prazo.
4. Anime e conecte os estados. Monte os loops e as reações únicas em um único arquivo interativo e conecte-os aos eventos do app por meio de inputs ou Data Binding.
5. Exporte para cada canal. Use Rive ou dotLottie no produto, WebM com fundo transparente mais MOV HEVC na web e MP4 para redes sociais e prévias na loja.
6. Teste com movimento reduzido. Verifique se o app volta para uma pose estática quando o usuário pede ao sistema para reduzir o movimento.

Perguntas frequentes

Qual é o jeito mais fácil de animar um mascote de app?

O jeito mais fácil é partir de um personagem plano, de frente, com partes separadas, e usar uma ferramenta construída em torno de estados, como o editor do Rive ou um serviço automatizado. Evite começar com uma ilustração pintada de perfil, que exige muito mais trabalho manual para fazer o rig e muitas vezes precisa ser redesenhada antes.

Meu mascote deve ser vetorial ou raster?

Vetor é mais fácil de animar, porque cada parte pode ser movida e remodelada sem perda em qualquer tamanho. Arte raster ainda pode ser animada deformando seus pixels com malha e bones, o que preserva o sombreamento 3D e os gradientes que a vetorização perderia.

Quantas animações um mascote de app precisa?

A maioria dos apps precisa de quatro para começar: idle, loading, success e error. Em seguida, adicione um loop para estado vazio, uma saudação para o onboarding e attention para notificações. Assistentes de chat e voz também precisam de listening e talking. Adicione novos estados só onde o mascote vai realmente aparecer no seu app.

Rive ou Lottie: qual é melhor para um mascote?

Os dois funcionam. O Rive foi projetado em torno de state machines, o que combina com um mascote que alterna entre muitos estados. O Lottie atende equipes que já animam no After Effects, e o dotLottie agora também suporta state machines. Escolha aquele que a sua equipe consegue produzir e manter.

Respostas rápidas deste guia

• Como o Duolingo anima seus personagens?
• Um mascote animado pode substituir um spinner de carregamento?
• Quanto tempo leva um conjunto de animações do Charmotion?

Fontes

• How Duolingo's characters lip sync (visemes), Duolingo Blog
• Runtimes: getting started, Rive
• lottie-web, Airbnb on GitHub
• dotLottie, LottieFiles
• Video with alpha transparency on the web, Jake Archibald
• prefers-reduced-motion, MDN Web Docs