Glossário

Termos de animação, sem complicação.

As palavras que você vai encontrar ao colocar animação de personagens em apps e na web.

Alfa de 1 bit: Transparência em que cada pixel é totalmente opaco ou totalmente transparente, como no GIF. Bordas suaves, com anti-aliasing, ficam serrilhadas ou mostram um halo. Guia
Animação idle: O loop idle (loop de repouso), calmo e com pouco movimento, que o personagem toca quando nada mais está acontecendo, como respirar ou piscar. Ele mantém o personagem vivo na tela sem tirar a atenção do conteúdo. Guia
AnimatedVectorDrawable: Formato nativo do Android para animar gráficos vetoriais. A splash screen do Android 12+ aceita um como ícone, e o Google recomenda que essa animação dure no máximo 1.000 ms em celulares. Guia
Arquivo .riv: O formato binário compacto de exportação do Rive. Um único .riv pode conter artboards, animações e state machines, e é reproduzido por uma biblioteca de runtime do Rive; você não precisa do editor do Rive para reproduzi-lo ou controlá-lo em um app. Guia
Blend (transição): Uma transição que mistura duas animações ao longo de uma duração definida em vez de cortar de uma para a outra, para que o personagem passe suavemente de um estado ao seguinte. Blend states também podem misturar várias animações com base em um valor numérico. Guia
Bodymovin: O plugin do Adobe After Effects que exporta composições como JSON do Lottie. É a ponte tradicional entre uma timeline do After Effects e um player Lottie em um app ou site. Guia
Bumper: Um clipe breve que marca a pausa entre um programa e o que vem a seguir. Os anúncios bumper do YouTube, um formato relacionado, duram até 6 segundos. Guia
Canal alfa: Um canal extra em uma imagem ou vídeo que armazena a opacidade de cada pixel, de totalmente transparente a totalmente sólido. O alfa parcial é o que permite que bordas suaves e sombras se misturem bem sobre qualquer fundo. Guia
Data Binding (view model): A forma mais recente do Rive de conectar dados do app a uma animação. Um view model define propriedades tipadas, incluindo números, strings, enums, cores, listas, imagens e triggers, às quais o arquivo se vincula, substituindo os inputs de state machine em novos projetos. Guia
Deformação de malha: Curvar uma imagem prendendo-a a uma grade de pontos e movendo esses pontos, em vez de redesenhá-la. Isso permite que uma arte raster, como um logo em PNG, se curve e flexione mantendo os pixels originais. Guia
dotLottie (.lottie): Um formato de contêiner compactado, com licença MIT, mantido pela LottieFiles. Um único arquivo .lottie pode reunir várias animações Lottie, assets compartilhados, temas e state machines interativas. Guia
Emote: Uma pequena imagem de chat vinculada a um código de texto. Na Twitch, emotes animados são GIFs quadrados de 28, 56 e 112 px com no máximo 60 frames. Guia
GIF: Um formato de imagem com décadas de existência que suporta animação simples. Cada frame é limitado a uma paleta de 256 cores e a apenas uma cor totalmente transparente, por isso os GIFs mostram faixas de cor (banding), têm bordas serrilhadas e costumam ser bem maiores que um vídeo equivalente. Guia
HEVC (H.265): Um codec de vídeo que comprime melhor que o H.264. A Apple adicionou HEVC com alfa no iOS 13 e no macOS Catalina, e o Safari o usa para reproduzir vídeo com fundo transparente, geralmente armazenado em um .mov com a tag hvc1. Guia
Ícone adaptativo: Formato de ícone de launcher do Android: camadas de primeiro plano e de fundo de 108 x 108 dp, mais uma camada monocromática opcional, recortadas pelo dispositivo no formato dele, com uma zona segura de 66 x 66 dp. Os launchers geram os efeitos de movimento. Guia
Ícone alternativo do app: Um conjunto extra de ícones incluído no app, para o qual o usuário pode trocar em tempo de execução, com setAlternateIconName no iOS ou entradas activity-alias no Android. Ele troca imagens estáticas e não pode ser animado. Guia
Ícone temático (monocromático): Um ícone do Android 13+ tingido para combinar com o papel de parede e o tema do usuário, usando a camada monocromática do ícone adaptativo. Guia
Imagem para vídeo generativa: Modelos de IA que criam novos frames de vídeo a partir de uma imagem de referência e de um prompt. Como cada frame é gerado, detalhes de um personagem ou logo podem se afastar do original. Guia
Input da state machine: Um valor nomeado que seu código define para controlar uma state machine do Rive. Os inputs têm três tipos: número, booleano e trigger. O Rive agora considera os inputs um sistema legado e recomenda Data Binding para novos trabalhos, embora os arquivos existentes continuem funcionando. Guia
Launch screen: A tela estática que o iOS mostra enquanto um app inicia. Ela é definida no Info.plist ou em um storyboard, sem código personalizado, por isso não pode ser animada; a Apple recomenda que ela seja quase idêntica à primeira tela do app. Guia
Liquid Glass: Material de design da Apple, aplicado pelo sistema a ícones de app em camadas como reflexos, refração e translucidez. Os apps não podem programá-lo, e ele não é uma forma de animar um ícone. Guia
Logo reveal: Movimento que vai se construindo até revelar um logo e termina nele, geralmente no início de um vídeo. Não existe uma definição formal, então o termo costuma ser usado para qualquer intro de logo. Guia
Logo sting: Uma animação de logo muito curta, de no máximo alguns segundos e muitas vezes acompanhada de um efeito sonoro breve, usada como identificador da marca ou como transição entre segmentos. Guia
Loop vs one-shot (reação única): Um loop se repete enquanto seu estado estiver ativo, como idle ou carregamento. Uma reação única toca uma vez em resposta a um evento, como sucesso ou erro, e depois devolve o controle ao loop atual. Guia
Lottie: Um formato aberto de animação e um conjunto de players para web, iOS, Android, React Native e Windows que renderizam animações do After Effects exportadas como JSON. Com as state machines do dotLottie, criadas no Lottie Creator, os arquivos Lottie também podem ser interativos. Guia
Mascote: Um personagem que representa uma marca ou produto. Em apps, um mascote animado costuma representar estados do produto como carregamento, telas vazias, sucesso e erros, dando ao feedback uma personalidade consistente. Guia
MOV: O formato de contêiner QuickTime da Apple. Na web, é usado principalmente para entregar vídeo HEVC com alfa ao Safari; em ferramentas de edição, costuma conter masters em ProRes. Guia
MP4 empilhado: Um vídeo H.264 comum com a imagem colorida e uma máscara alfa em tons de cinza reunidas em um único frame. Um player personalizado recombina as duas, simulando transparência onde o MP4 não tem. Guia
playsinline: Um atributo de <video> que permite ao Safari do iPhone reproduzir um vídeo dentro da página em vez de mudar para tela cheia. Junto com autoplay e muted, ele é necessário para loops inline no estilo GIF no iOS. Guia
PNGtuber: Um avatar de streamer feito de imagens PNG que troca ou treme quando o software de PNGtuber capta o microfone. Ele reage à voz; não é uma animação com rig. Guia
Política de reprodução automática: Regras do navegador que decidem quando uma mídia pode começar sem ação do usuário. A reprodução automática sem som geralmente é permitida; vídeo com som normalmente exige interação prévia do usuário, e play() retorna uma Promise que é rejeitada quando há bloqueio. Guia
prefers-reduced-motion: Um media feature do CSS com os valores no-preference e reduce que reflete a configuração Reduzir Movimento do sistema operacional do usuário. Os sites o usam para substituir movimentos grandes e loops por uma pose estática ou um fade. Guia
ProRes 4444: Um codec de edição da Apple que armazena cor de alta qualidade e um canal alfa. É um bom master para animação com fundo transparente, mas os arquivos são grandes demais para servir em um site, por isso você gera WebM e HEVC a partir dele. Guia
Rig de bones: Uma hierarquia de bones (ossos) presos à arte, de modo que girar ou mover um bone deforma as partes conectadas. Rigs tornam prático posar e animar personagens e logos sem desenhar cada frame. Guia
Rive: Uma ferramenta de animação interativa composta por um editor de design e runtimes de código aberto, com licença MIT, para web, React, plataformas Apple, Android, Flutter e React Native. As animações são exportadas como arquivos .riv que podem reagir ao estado do app por meio de uma state machine. Guia
SplashScreen API: Splash screen (tela de abertura) do sistema Android, introduzida no Android 12 e levada a versões anteriores pela androidx.core:core-splashscreen. Ela mostra o ícone do seu app, que pode ser animado, sobre uma cor de fundo enquanto o app inicia. Guia
Squash and stretch (comprimir e esticar): Um princípio clássico da animação em que uma forma se comprime no impacto e se alonga em movimentos rápidos, mantendo seu volume. Ele faz até um logo rígido parecer elástico e vivo. Guia
State machine: Lógica armazenada dentro de um arquivo de animação que conecta estados, como idle, loading e success, por meio de transições. O código do app altera valores e a state machine decide qual animação toca e como ela se mistura com a seguinte. Guia
Tipografia cinética: Animação em que letras ou palavras se movem individualmente, por exemplo surgindo como se fossem digitadas ou entrando em cascata. Ela exige texto editável ou formas vetoriais separadas, não uma imagem de logo achatada. Guia
Trigger: Um input de state machine sem valor armazenado. Dispará-lo causa uma transição única, o que o torna a escolha natural para reações momentâneas como success, error, yes ou no. Guia
VP9: Um codec de vídeo aberto do Google, normalmente armazenado em um arquivo WebM. O VP9 pode carregar um canal alfa, que Chrome, Edge e Firefox renderizam como transparência; o Safari reproduz VP9, mas ignora o alfa. Guia
WCAG 2.2.2 Pausar, Parar, Ocultar: Um critério de acessibilidade de Nível A: conteúdo em movimento ou piscante que começa automaticamente, dura mais de cinco segundos e aparece junto com outro conteúdo precisa de uma forma de ser pausado, parado ou ocultado, a menos que seja essencial. Guia
WebM: Um contêiner de mídia aberto para a web, que normalmente contém vídeo VP8, VP9 ou AV1. Um WebM VP9 com alfa é a forma padrão de servir vídeo com fundo transparente para navegadores Chromium e Firefox. Guia