Pular para o conteúdo
charmotion
Comece agora

Lottie vs Rive vs vídeo para animação de splash screen

Por equipe Charmotion · Atualizado em

Ilustração de capa do guia: Lottie vs Rive vs vídeo para animação de splash screen, com personagens de demonstração do Charmotion

Na splash do próprio sistema, só o AnimatedVectorDrawable do Android pode ser animado; a launch screen do iOS continua estática. Para a intro na sua primeira tela, o Lottie é indicado para uma animação vetorial linear que você já tem, o Rive para uma intro que passa para um mascote interativo, e o vídeo com fundo transparente para ícones 3D ou rasterizados cheios de detalhes. Todos exigem a mesma transição do estático para o animado.

Principais pontos

  • Nada além de um AVD é animado dentro da splash do sistema, e apenas no Android 12+.
  • Lottie e vídeo avisam quando terminam; uma state machine do Rive só avisa o que o autor incluiu nela.
  • O Rive é a melhor opção quando o personagem da abertura continua vivo no app depois.
  • O vídeo é a melhor opção para ícones 3D, com degradês ou fotográficos: HEVC com alfa para Apple, VP9 com alfa para Chrome.
  • O Charmotion exporta Rive e formatos de vídeo, não Lottie nem AVD.

Quais formatos funcionam em cada ponto da abertura?

FormatoSplash do sistemaIntro da primeira telaReage após a aberturaArte 3D ou rasterSabe quando termina
AnimatedVectorDrawableSó Android 12+Só AndroidNoNoDuração fixa
LottieNoSim (biblioteca)Limitado (segmentos, marcadores)Com limitaçõesCallback de conclusão
RiveNoSim (runtime)Sim (state machine)Só imagens incorporadasSó se o arquivo disparar um evento
Vídeo com fundo transparente (HEVC MOV, VP9 WebM)NoYesNoYesEvento de fim do player
MP4 opacoNoSim, sobre uma cor igualNoYesEvento de fim do player

A launch screen do iOS não aceita nenhum formato animado: um launch storyboard só pode usar classes padrão do UIKit, sem classes personalizadas nem conexões com código (Apple Developer Documentation). No Android, a splash do sistema só anima um AVD (Android Developers). Todos os outros formatos são reproduzidos na sua primeira tela.

Quando o Lottie é a escolha certa para a intro da splash?

Quando um designer já fez a intro no After Effects e ela toca do início ao fim sem interrupções. O Lottie é vetorial, leve para formas simples, e todo runtime avisa quando a animação termina: o LottieView no iOS tem o modificador animationDidFinish (lottie-ios), e o LottieAnimationView do Android aceita animator listeners (lottie-android). Isso torna trivial sincronizar a transição.

As limitações aparecem depois da abertura. Se o mesmo personagem precisar ficar em idle, indicar carregamento ou comemorar mais tarde, com Lottie você precisa de arquivos ou segmentos separados, com o seu código escolhendo entre eles, e as transições entre eles são cortes secos. Arte 3D complexa ou rasterizada também não combina com o formato.

Para o comparativo geral de formatos além das splash screens, veja Rive vs Lottie, e para detalhes multiplataforma, Lottie vs Rive em React Native e Flutter.

Quando o Rive é a melhor escolha?

Quando a intro de abertura é a primeira aparição de um personagem que continua trabalhando no app. Um único arquivo .riv pode conter a intro, um loop idle (loop de repouso), carregamento e reações, e uma state machine alterna entre eles a partir de qualquer frame. A intro termina em idle, e a mesma view pode passar para um humor de carregamento no instante em que a primeira requisição começa.

Duas observações práticas:

  • Fim. Uma state machine só avisa os eventos que o autor adicionou. Verifique o arquivo: se ele não tiver um evento de fim, espere a duração da intro com um timer em vez de aguardar um callback.
  • Configuração. O Rive precisa do runtime dele no seu app; no Expo, isso significa usar um development build em vez do Expo Go (Rive).

Quando usar vídeo na intro da splash?

Quando o ícone é detalhado: 3D brilhante, degradês de malha, letreiros, textura fotográfica. O vídeo reproduz cada pixel e não exige nenhum trabalho de renderização além da decodificação. Para ter transparência sobre o seu fundo, as plataformas da Apple suportam HEVC com alfa (WWDC19) e o Chrome suporta VP9 com alfa em WebM (Chrome for Developers).

A opção robusta mais simples em qualquer plataforma é um clipe opaco cujo fundo seja exatamente a cor da sua splash: sem se preocupar com suporte a alfa, e a emenda fica invisível desde que os valores hex sejam iguais. As desvantagens são o tamanho do arquivo e a falta de interação: o clipe toca, termina e pronto.

Vale a pena usar um AnimatedVectorDrawable?

Sim, mas só para a função dele: a splash do sistema no Android 12+. Mantenha curto (o Google recomenda no máximo 1.000 ms) e simples, já que ele anima paths e grupos vetoriais, não arte detalhada. Abaixo do Android 12, ele aparece como um ícone estático, mesmo com a biblioteca de compatibilidade (referência do androidx).

A abertura mais forte no Android combina dois formatos: um pequeno pop-in em AVD na splash do sistema e, em seguida, a intro completa em Rive ou vídeo na primeira tela, sobre o mesmo fundo. Veja os detalhes no guia de ícone animado na splash screen do Android.

Quais desses formatos o Charmotion exporta?

Sendo direto: o Charmotion exporta Rive e vídeo, e não exporta Lottie JSON, dotLottie nem XML de AnimatedVectorDrawable. A partir de uma imagem do seu ícone ou mascote, você recebe um .riv com LaunchStateMachine (intro de 2,6 segundos, sem evento de fim), CharacterViewModelMachine e CharacterStateMachine para os estados dentro do app, além de MP4 em 1080×1080, um vídeo de abertura 9:16, GIF, WebM VP9 e MOV HEVC transparentes e código para web, React e SwiftUI. Tudo isso vem com os planos pagos.

Se o seu stack exige Lottie, ou se você precisa de um AVD para a splash do sistema no Android, isso vem de outra ferramenta ou de um designer. As dicas de handoff deste guia valem nos dois casos.

Perguntas frequentes

Rive ou Lottie: qual é mais leve para uma animação de splash?

Depende mais da arte do que do formato. Formas vetoriais simples ficam pequenas nos dois. A vantagem do Rive é que um único arquivo também pode conter os estados idle e de carregamento, então você evita distribuir vários arquivos Lottie. Meça os seus arquivos exportados em vez de confiar em proporções genéricas.

Posso usar um vídeo com fundo transparente como splash screen no Android?

Não na splash do sistema, que só anima um AnimatedVectorDrawable. Na sua primeira tela, você pode reproduzir vídeo; um clipe opaco com a mesma cor de fundo é a opção mais confiável, porque a emenda fica invisível sem precisar de suporte a canal alfa.

O Charmotion exporta Lottie para splash screens?

Não. O Charmotion exporta arquivos Rive, MP4, um vídeo de abertura 9:16, GIF, WebM e MOV HEVC com fundo transparente, e exemplos de código. Ele não exporta Lottie nem AnimatedVectorDrawable. A intro de abertura toca na sua primeira tela, depois de uma launch screen estática.

Respostas rápidas deste guia

Fontes

Guias relacionados