Guia de animação de abertura e splash screen para apps

É possível animar a launch screen do iOS?

Quer animar o próprio ícone do app? Nem o iOS nem o Android permitem que um app anime seu ícone na tela inicial; o guia é possível animar o ícone de um app explica o motivo e lista onde o seu ícone pode se mover. Para as especificações exatas do ícone da splash screen no Android 12+, o XML e a transição de saída, veja o guia de ícone animado na splash screen do Android.

Não. A launch screen do iOS é exibida pelo sistema antes de o seu código rodar, então ela não consegue reproduzir uma animação.

Você a define de uma de duas formas (Apple Developer Documentation):

• UILaunchScreen no Info.plist, que define uma cor de fundo, uma imagem e barras opcionais.
• Um storyboard de inicialização, que só pode usar classes padrão do UIKit. Ele não pode ter conexões com código, classes personalizadas nem atributos de runtime.

Isso exclui views do Rive, views do Lottie, players de vídeo ou qualquer código de animação personalizado na própria launch screen.

A solução é adiar a animação em uma etapa. Mostre uma launch screen estática idêntica ao primeiro frame da sua animação e inicie a animação no seu primeiro view controller ou view SwiftUI assim que ele aparecer. Para o usuário, parece que a launch screen ganhou vida.

O que a Apple recomenda no lugar de uma splash screen?

As Human Interface Guidelines da Apple são diretas sobre launch screens (Apple HIG):

• A launch screen deve ser quase idêntica à primeira tela do app.
• Ela não é uma splash screen nem uma oportunidade de branding.
• Evite colocar texto nela.
• Se você quiser uma splash screen, mostre-a no início do onboarding ou depois que a inicialização terminar.

Na prática, isso dá um padrão claro para uma intro com a sua marca:

1. A launch screen mostra a sua cor de fundo e, se quiser, o mascote ou o logo em pose de repouso, exatamente onde ele vai aparecer na primeira view.
2. A primeira view carrega com o mesmo layout e reproduz imediatamente uma intro curta.
3. A intro termina em uma pose de repouso e a interface surge ao redor com um fade.

Mantenha a intro curta e não a transforme em uma barreira. Se o app estiver pronto, o usuário deve poder interagir enquanto os últimos frames terminam. Considere reproduzir a intro completa só na primeira abertura ou depois de uma atualização, e uma versão mais curta, ou nenhuma, nas demais aberturas.

O que uma animação de abertura de app deve mostrar?

Uma animação de abertura tem uma única função: fazer a passagem de "o app está iniciando" para "o app está pronto" parecer intencional. Não é o lugar para contar uma história. Boas animações de abertura têm algumas características em comum.

• Um único elemento. Seu logo ou mascote, centralizado ou na posição que vai ocupar na primeira tela.
• Um único movimento. Um pulinho até a posição, um aceno, a revelação do símbolo. Escolha uma ação clara em vez de uma sequência.
• Um final claro. A animação deve parar em uma pose que a próxima tela possa aproveitar, como o mascote em idle no canto da tela inicial ou o logo se encaixando na barra de navegação.
• Nenhum texto para ler. A Apple desaconselha texto na launch screen, e a mesma lógica vale para o primeiro segundo depois dela. O usuário ainda não está pronto para ler.
• Cor da marca como fundo. Use o mesmo fundo na launch screen e na primeira view para que nada pisque entre elas.

Apps com mascote podem ir um pouco além. Uma animação de entrada em que o personagem caminha ou surge na tela, seguida de um aceno, dá personalidade ao produto sem muito atraso. Deixe qualquer coisa mais longa para o onboarding, quando o usuário escolheu dedicar esse tempo.

Como a SplashScreen API do Android 12 faz a animação?

A partir do Android 12, todo app ganha uma splash screen do sistema. Você pode personalizá-la, e o ícone central pode ser um AnimatedVectorDrawable (Android Developers). A biblioteca androidx.core:core-splashscreen leva a API até o nível de API 23.

Pontos principais da documentação do Google:

Observe que o atributo de duração só informa ao Android 12 por quanto tempo rodar a animação do ícone. Ele não mantém a splash na tela; para isso, use setKeepOnScreenCondition (referência do androidx).

O valor de 1.000 ms é uma recomendação, não um limite rígido. A ideia é que a splash termine quando o app estiver pronto, e não que rode um show de duração fixa.

Um AnimatedVectorDrawable é um formato vetorial, então funciona bem para um logo simples ou um ícone plano. Um personagem detalhado ou um logo em bitmap não vai se converter bem. Nesses casos, mantenha o ícone da splash do sistema estático e toque a animação mais rica na sua primeira activity ou composable, o mesmo padrão de transição usado no iOS.

Quanto tempo deve durar uma animação de abertura?

O mais curta possível, desde que continue clara. Uma animação de abertura fica entre o usuário e aquilo que ele abriu o app para fazer.

Referências úteis de fontes oficiais:

• As diretrizes de splash do Android recomendam no máximo 1.000 ms para a animação do ícone da splash em celulares (Android Developers).
• Limites de tempo de resposta de Nielsen: cerca de 1 segundo é o limite para manter o fluxo de pensamento do usuário sem interrupção (NN/g).
• Material Design: os tokens chegam a no máximo 1.000 ms para as transições mais longas (Material Components).

Portanto, mire em cerca de um segundo para a parte que atrasa a interação. O personagem pode continuar se movendo depois disso, desde que a interface ao redor já esteja utilizável.

Duas regras práticas:

• Nunca estique uma abertura rápida. Se o app fica pronto em 300 ms, não segure o usuário por uma intro inteira. Deixe a animação terminar sobre a interface já ativa ou pule para o final.
• Não repita uma intro longa toda vez. A primeira abertura pode ser especial. O uso diário deve ser rápido.

Como fazer a transição da launch screen para uma intro dentro do app?

O objetivo é uma emenda invisível. O usuário não deve perceber onde termina a tela estática do sistema e onde começa a sua animação.

• Combine com o primeiro frame. Exporte o primeiro frame da sua intro como imagem de inicialização, no mesmo tamanho e posição que o personagem animado terá na primeira view. Use a mesma cor de fundo.
• Pré-carregue a animação. Inclua o arquivo de animação no pacote do app em vez de baixá-lo na abertura, para que ele esteja pronto assim que a view aparecer.
• Toque uma vez e termine em repouso. A intro deve terminar na pose idle do personagem, que pode então ficar em loop discreto ou parar.
• Não bloqueie a interação. Faça a interface aparecer com fade durante a parte final da intro.
• Respeite o movimento reduzido. Se o usuário ativou o movimento reduzido, pule a intro e mostre a pose de repouso (accessibilityReduceMotion no SwiftUI).

O conjunto do Charmotion inclui uma intro de abertura feita para essa transição: no arquivo Rive ela toca uma vez e termina em idle, e também há um MP4 9:16 da animação de abertura para contextos em que você quer vídeo, como prévias de app.

Como adicionar uma animação de intro à seção hero de um site?

A web não tem launch screen do sistema, mas o mesmo princípio vale: a página precisa ser utilizável de imediato, e a animação apenas a enfeita.

• Renderize a pose estática primeiro. Coloque uma imagem estática ou um poster no HTML para que a seção hero tenha conteúdo antes de qualquer script rodar. Depois inicie a animação.
• Use vídeo mudo e inline para intros simples. Os navegadores permitem reprodução automática sem som; no Safari do iOS, o vídeo também precisa de playsinline para tocar inline (MDN). Se a promise de play() for rejeitada, mantenha o poster.
• Use Rive para intros interativas, em que a intro passa para um loop idle que reage ao hover ou à rolagem.
• Mantenha a transparência em todos os navegadores. Para um personagem com fundo transparente sobre o seu fundo, entregue primeiro HEVC MOV com alfa e depois VP9 WebM com alfa (Jake Archibald).
• Respeite prefers-reduced-motion. Mostre o poster e pule a intro.

Veja o guia vídeo com fundo transparente em um site para ver o markup completo.

Como adicionar uma animação de abertura ao seu app

1. Mantenha a launch screen do sistema estática. Defina uma cor de fundo e uma imagem estática com UILaunchScreen ou um launch storyboard no iOS, e com o tema da SplashScreen API no Android.
2. Alinhe o primeiro frame. Use o primeiro frame da sua animação de intro como imagem de inicialização, no mesmo tamanho e posição que na primeira view.
3. Toque a intro na primeira view. Inicie a animação assim que a primeira tela aparecer, com o arquivo de animação incluído no app.
4. Termine em uma pose de repouso. Termine a intro na pose idle e faça a interface aparecer com fade na parte final, para que o usuário possa interagir na hora.
5. Adicione um caminho para movimento reduzido. Pule a intro e mostre a pose de repouso quando o usuário tiver ativado o movimento reduzido.

Perguntas frequentes

Posso colocar uma animação Lottie ou Rive na launch screen do iOS?

Não. As launch screens do iOS são definidas no Info.plist ou em um launch storyboard que só pode usar classes padrão do UIKit, sem código personalizado. Mostre uma launch screen estática que combine com o primeiro frame da sua animação e depois toque a animação na primeira view.

Quanto tempo deve durar a animação da splash screen no Android?

O Google recomenda que a animação do ícone da splash screen não passe de 1.000 ms em celulares, com um atraso inicial de até 166 ms. Isso é uma recomendação, não um limite rígido. Se a inicialização demorar mais, o Google sugere usar uma animação em loop.

Splash screen (tela de abertura) é UX ruim?

Uma splash screen que atrasa o usuário só para mostrar a marca não é recomendada; a Apple diz que a launch screen não é uma oportunidade de branding. Uma intro curta que toca enquanto o app realmente está carregando, ou uma vez na primeira abertura, é aceitável se nunca bloquear a interação.

Qual deve ser o tamanho do ícone da splash no Android 12?

Com fundo no ícone, ele tem 240×240 dp e o conteúdo deve caber em um círculo de 160 dp. Sem fundo, tem 288×288 dp e o conteúdo deve caber em um círculo de 192 dp, segundo a documentação do Android.

Respostas rápidas deste guia

• É possível animar a launch screen do iOS?
• Como deve ser uma launch screen do iOS?
• Quanto tempo deve durar a animação da splash screen no Android?
• Qual é o tamanho do ícone da splash screen no Android 12?

Fontes

• Launching, Apple Human Interface Guidelines
• Specifying your app's launch screen, Apple Developer Documentation
• Splash screens, Android Developers
• SplashScreen (androidx.core:core-splashscreen), Android Developers
• Response Times: The 3 Important Limits, Nielsen Norman Group
• Motion theming, Material Components for Android
• Autoplay guide for media and Web Audio APIs, MDN Web Docs
• Video with alpha transparency on the web, Jake Archibald
• accessibilityReduceMotion, Apple Developer Documentation