Animação de splash screen

Uma animação de abertura a partir do ícone do seu app, pronta para a sua primeira tela.

Envie o ícone do app, o logo ou o mascote. Você recebe uma intro de abertura de cerca de 2,6 segundos que termina com o personagem em repouso e depois passa para idle ou loading enquanto o app fica pronto. Ela vem como LaunchStateMachine do Rive, MOV HEVC e WebM com fundo transparente, um vídeo de 1080 × 1920 e código web, React e SwiftUI.

Veja no seu app Ver planos

Intro: Cerca de 2,6 s, termina em idle
Arquivos: .riv, MOV, WebM, MP4, 9:16
Código: Web, React, SwiftUI
Plano: Starter, US$ 20/mês

Sizzle, um personagem de demonstração do Charmotion

Arquivo Rive ao vivo

Em loop

Toca uma vez

Este é o .riv real que nosso motor entrega, rodando no seu navegador. É a mesma state machine que você controla no seu app com um input numérico e um trigger para cada reação única.

Onde a intro toca: logo depois da splash nativa

1. A splash nativa fica parada

O iOS mostra uma launch screen (tela de inicialização) estática antes de o seu código rodar, e a API SplashScreen do Android 12 só anima um ícone AnimatedVectorDrawable. Mantenha as duas estáticas, com a mesma cor de fundo e a mesma posição do ícone da sua primeira tela.

2. Sua primeira tela toca a intro

LaunchStateMachine toca a intro uma vez e para em idle. Ela não dispara nenhum evento de fim, então sincronize a transição com a duração da intro (cerca de 2,6 s) ou avance assim que o app estiver pronto.

3. Passe para loading ou para a tela inicial

Mude para CharacterViewModelMachine e defina mood como 5 (loading) enquanto os dados carregam, ou vá direto para a tela inicial. O personagem nunca para em um frame estranho.

O que usar em cada plataforma

Plataforma	Arquivo	Como
iOS (SwiftUI, UIKit)	.riv ou MOV HEVC com alfa	View SwiftUI entregue, ou AVPlayer para o MOV
Android	.riv	rive-android na sua primeira activity, depois da splash do sistema
Flutter	.riv + README	pacote rive; remova o flutter_native_splash quando a intro começar
React Native, Expo	.riv + README	@rive-app/react-native em uma development build
Web e PWA	.riv ou WebM transparente + MOV	Código web e React entregue

Não incluído: arquivos Lottie, splash nativa animada do sistema (a do Android exige um AnimatedVectorDrawable) e ícones animados na tela inicial (não disponíveis para apps de terceiros no iOS nem no Android).

Resultado real

Arquivos entregues, exatamente como você os baixaria.

MP4 Todo conjunto

1080 × 1080 a 60 fps. Aqui: o wave do Gummo, de um conjunto entregue.

WebM & MOV transparentes Todo conjunto

Canal alfa incluído, por isso o quadriculado aparece por trás. O MOV é HEVC com alfa para apps e editores da Apple.

Kiko em thinking, saída em GIF — GIF Todo conjunto
Prévias leves para documentação, e-mail e chat. O loop “thinking” do Kiko.

Vídeo de abertura 9:16 Todo conjunto

1080 × 1920 para stories e splash screens. A intro de abertura do Sizzle.

kiko.riv · 150 KB

CharacterStateMachine: input numérico mood
0 a 9: idle, happy, wave, thinking, sad, loading, listening, talking, sleeping, attention
triggers: success · error · yes · no · enter · exit
LaunchStateMachine: launch → idle, toca uma vez

State machine do Rive Todo conjunto

Um único arquivo pequeno no lugar de 17 vídeos. É ele que faz funcionar a demo no topo desta página.

import { useRive, useStateMachineInput } from "@rive-app/react-canvas";

export function Kiko({ mood = 0 }) {
  const { rive, RiveComponent } = useRive({
    src: "/kiko.riv",
    stateMachine: "CharacterStateMachine",
    autoplay: true,
  });
  const input = useStateMachineInput(rive, "CharacterStateMachine", "mood");
  if (input) input.value = mood; // 0 idle · 1 happy · 2 wave · 3 thinking · 4 sad · 5 loading …
  return <RiveComponent style={{ width: 320, height: 320 }} />;
}

Código pronto para colar Todo conjunto

Componentes para web, React e SwiftUI com o nome do seu personagem.

Formatos incluídos em cada plano
Formato	Especificações	Ideal para	Starter & All in one
MP4	1080 × 1080, 60 fps, todas as 17 animações	Apps, redes sociais, apresentações, vídeos de produto	Incluído
Vídeo de abertura 9:16	MP4 1080 × 1920	Stories, Reels, splash screens	Incluído
GIF	Prévias de 480 px, fundo sólido	Documentação, e-mail, chat, README	Incluído
Rive (.riv)	Vetorial; view model com Data Binding + inputs legados: mood para os loops, triggers para as reações únicas e uma state machine para a intro de abertura	Apps e sites interativos (web, iOS, Android, Flutter)	Incluído
WebM com fundo transparente	VP9 com canal alfa, 1080 × 1080	Sobreposições na web sobre qualquer fundo	Incluído
MOV com fundo transparente	HEVC com canal alfa	Final Cut, Keynote, iOS, Safari	Incluído
Código	Componentes para web (HTML), React e SwiftUI	Cole e publique	Incluído
Baixar tudo (.zip)	Arquivo Rive, código, README e pôsteres em um só arquivo	Entrega para o seu time	Incluído
Exportação de vídeo	MP4, GIF, WebM e MOV transparentes, 9:16: escolha formatos e animações na página do conjunto, prontos em cerca de um minuto	Só os vídeos de que você precisa	Incluído
Assistentes de IA (MCP)	Claude, Cursor, VS Code e Codex	Crie, anime e receba links de download no chat	Incluído

Planos

Comece grátis. Faça upgrade quando precisar de mais.

O .riv, o MOV e o WebM transparentes e o código estão em todos os planos pagos, a partir do Starter (US$ 20/mês). Todo conjunto também tem a abertura em MP4, GIF e um vídeo 9:16, bons para a página da loja ou um post em rede social. Preços em USD; os impostos são calculados no checkout pela Creem.

Free

$0para sempre

Experimente com o seu próprio logo e personagem.

Comece grátis

Ideias de animação de logo (3 conceitos)
Prévia do personagem em apps
Sem cartão
2 Designs com IA (logos ou personagens)
Funciona no Claude, Cursor, Codex
Suporte por e-mail

Mais popular

Starter

US$ 20/mês

Para um app ou site.

Assinar Starter

3 animações de logo por mês
3 conjuntos de personagem por mês
Rive, vídeo transparente e código
12 designs com IA por mês
1 refinamento por animação de logo
Chamados de suporte

All in one

US$ 100/mês

Para times e várias marcas.

Assinar All in one

15 animações de logo por mês
10 conjuntos de personagem por mês
Vídeo 3D cinematográfico incluído
40 designs com IA por mês
3 refinamentos por animação de logo
Builds e suporte prioritários

FAQ

Antes de começar.

Veja mais nas perguntas frequentes.

A launch screen do iOS pode ser animada?

Não. A launch screen (tela de inicialização) da Apple é um storyboard estático que o iOS mostra antes de o seu código rodar. Toque a intro na sua primeira view SwiftUI ou UIKit, desenhada sobre o mesmo fundo, para que a troca da launch screen para a animação fique imperceptível.

A intro de abertura funciona com a API SplashScreen do Android 12?

Não dentro dela: a API SplashScreen só anima um ícone AnimatedVectorDrawable, que não produzimos. Mantenha um ícone estático ali, feche a splash do sistema rapidamente e depois toque a intro em Rive na sua primeira tela, sobre o mesmo fundo.

Posso usar a animação de splash no Flutter, React Native ou Expo?

Sim, com o .riv e o README dele; os snippets de código entregues são apenas para web, React e SwiftUI. No Flutter, mantenha o flutter_native_splash estático e remova-o quando a intro começar. No Expo, chame SplashScreen.preventAutoHideAsync() e depois hideAsync() assim que a view do Rive estiver desenhando; o Rive exige uma development build, não o Expo Go.

Quanto tempo deve durar uma animação de splash screen?

Curta. Nossa intro de abertura dura cerca de 2,6 segundos e termina em idle, e você pode cortar para loading ou para a tela inicial assim que o app estiver pronto. Se o seu app inicia rápido, considere tocá-la só na primeira abertura, e não em todo cold start.

Uma animação de abertura deixa o app mais lento para iniciar?

Não, se ela rodar junto com o trabalho de inicialização em vez de antes dele. Inicie as tarefas de rede e banco de dados enquanto a intro toca e faça a transição assim que ambas terminarem. O .riv em arte plana tem cerca de 40 KB, mas o runtime do Rive aumenta o tamanho do app, então confira esse número se o espaço for apertado.

A animação de splash é entregue em Lottie ou Rive?

Rive, além de vídeo com fundo transparente. O Rive é ideal para uma intro que passa para um mascote interativo no mesmo arquivo; ícones 3D detalhados também funcionam como MOV HEVC ou WebM, sem runtime. Não entregamos Lottie JSON. Mais em Lottie vs Rive para splash screens.

Saiba mais

Guias para este trabalho.

Veja primeiro com o seu personagem.

Grátis, no seu navegador. A sua imagem fica no seu dispositivo, a menos que você peça o clipe animado curto.

Prévia grátis

Outras formas de usar o Charmotion

PNG para Rive Animador de mascote com IA Imagem para animação de personagem Para apps iOS Serviço de animação Rive Criador de logo animado Avatar de chatbot animado Animação de carregamento com logo Mascote para site Animação de logo com fundo transparente Mascote para apps mobile Gerador de mascote com IA Folha de expressões do mascote