Guía de animaciones de inicio y splash screen para apps

¿Se puede animar la pantalla de inicio de iOS?

¿Quieres animar el propio ícono de la app? Ni iOS ni Android permiten que una app anime su ícono en la pantalla de inicio; se puede animar el ícono de una app explica por qué y enumera dónde sí puede moverse tu ícono. Para las especificaciones exactas del ícono de splash en Android 12+, el XML y la transición de salida, consulta la guía del ícono animado de la splash screen de Android.

No. El sistema muestra la pantalla de inicio de iOS antes de que se ejecute tu código, así que no puede reproducir una animación.

Se define de una de estas dos formas (Apple Developer Documentation):

• UILaunchScreen en Info.plist, que define un color de fondo, una imagen y barras opcionales.
• Un storyboard de inicio, que solo puede usar clases estándar de UIKit. No puede tener conexiones de código, clases personalizadas ni atributos de runtime.

Eso descarta vistas de Rive, vistas de Lottie, reproductores de video o cualquier código de animación personalizado en la propia pantalla de inicio.

La solución es mover la animación un paso más adelante. Muestra una pantalla de inicio estática que se vea exactamente como el primer fotograma de tu animación y luego inicia la animación en tu primer view controller o vista de SwiftUI en cuanto aparezca. Para el usuario, parece que la pantalla de inicio cobró vida.

¿Qué recomienda Apple en lugar de una splash screen?

Las Human Interface Guidelines de Apple son claras sobre las pantallas de inicio (Apple HIG):

• La pantalla de inicio debe ser casi idéntica a la primera pantalla de la app.
• No es una splash screen ni una oportunidad para la marca.
• Evita poner texto en ella.
• Si quieres una splash screen, muéstrala al comienzo del onboarding o cuando el inicio haya terminado.

En la práctica, eso te da un patrón claro para una intro de marca:

1. La pantalla de inicio muestra tu color de fondo y, opcionalmente, la mascota de marca o el logo en su pose de reposo, justo donde aparecerá en la primera vista.
2. La primera vista carga con el mismo diseño y reproduce de inmediato una intro animada corta.
3. La intro termina en una pose de reposo y la interfaz aparece a su alrededor con un fundido.

Mantén la intro corta y no la conviertas en un obstáculo. Si la app está lista, el usuario debe poder interactuar mientras terminan los últimos fotogramas. Considera reproducir la intro completa solo en el primer inicio o después de una actualización, y una versión más corta, o ninguna, en los demás inicios.

¿Qué debe mostrar la animación de inicio de una app?

Una animación de inicio tiene una sola tarea: que el paso de "la app se está abriendo" a "la app está lista" se sienta intencional. No es el lugar para contar una historia. Las buenas animaciones de inicio comparten algunos rasgos.

• Un solo protagonista. Tu logo o tu mascota, centrado o en la posición que ocupará en la primera pantalla.
• Un solo movimiento. Un salto hasta su lugar, un saludo, la revelación del símbolo. Elige una acción clara en lugar de una secuencia.
• Un final claro. La animación debe terminar en una pose que la siguiente pantalla pueda usar, como la mascota en reposo en una esquina de la pantalla principal o el logo acomodándose en la barra de navegación.
• Nada de texto para leer. Apple desaconseja poner texto en la pantalla de inicio, y la misma lógica vale para el primer segundo después. Los usuarios todavía no están listos para leer.
• El color de marca como fondo. Usa el mismo fondo en la pantalla de inicio y en la primera vista para que no haya destellos entre ambas.

Las apps con mascota pueden ir un poco más lejos. Una animación de entrada en la que el personaje camina o aparece de golpe, seguida de un saludo, le da personalidad al producto sin mucha demora. Guarda lo más largo para el onboarding, donde el usuario eligió dedicarle ese tiempo.

¿Cómo anima la API SplashScreen de Android 12?

A partir de Android 12, todas las apps tienen una splash screen del sistema. Puedes personalizarla, y el ícono central puede ser un AnimatedVectorDrawable (Android Developers). La biblioteca androidx.core:core-splashscreen hace que la API también esté disponible en versiones anteriores, hasta el nivel de API 23.

Puntos clave de la documentación de Google:

Ten en cuenta que el atributo de duración solo le indica a Android 12 cuánto tiempo debe durar la animación del ícono. No mantiene la splash screen en pantalla; para eso, usa setKeepOnScreenCondition (referencia de androidx).

La cifra de 1000 ms es una recomendación, no un límite estricto. Lo importante es que la splash screen termine cuando la app esté lista, no que reproduzca un espectáculo de duración fija.

Un AnimatedVectorDrawable es un formato vectorial, así que funciona bien para un logo simple o un ícono plano. Un personaje detallado o un logo rasterizado no se adaptarán bien. En esos casos, deja estático el ícono de la splash screen del sistema y reproduce la animación más elaborada en tu primera activity o composable, con el mismo patrón de transición que en iOS.

¿Cuánto debe durar una animación de inicio?

Lo más corta posible sin que pierda claridad. Una animación de inicio se interpone entre el usuario y lo que abrió la app para hacer.

Puntos de referencia útiles de fuentes oficiales:

• La guía de splash screen de Android recomienda no superar los 1000 ms en la animación del ícono de la splash screen en teléfonos (Android Developers).
• Límites de tiempo de respuesta de Nielsen: alrededor de 1 segundo es el límite para que el flujo de pensamiento del usuario no se interrumpa (NN/g).
• Los tokens de Material Design llegan como máximo a 1000 ms para las transiciones más largas (Material Components).

Así que apunta a alrededor de un segundo para la parte que retrasa la interacción. Después, el personaje puede seguir moviéndose, siempre que la interfaz a su alrededor ya se pueda usar.

Dos reglas prácticas:

• Nunca alargues un inicio rápido. Si la app está lista en 300 ms, no hagas esperar al usuario una intro completa. Deja que la animación termine sobre una interfaz ya activa o sáltala.
• No repitas una intro larga cada vez. El primer inicio puede ser especial. El uso diario debe ser rápido.

¿Cómo hago la transición de la pantalla de inicio a una intro dentro de la app?

El objetivo es una unión invisible. El usuario no debería notar dónde termina la pantalla estática del sistema operativo y dónde empieza tu animación.

• Haz coincidir el primer fotograma. Exporta el primer fotograma de tu intro como imagen de inicio, con el mismo tamaño y posición que tendrá el personaje animado en la primera vista. Usa el mismo color de fondo.
• Precarga la animación. Incluye el archivo de animación en la app en lugar de descargarlo al iniciar, para que esté listo en cuanto aparezca la vista.
• Reprodúcela una vez y termina en reposo. La intro debe terminar en la pose de reposo (idle) del personaje, que luego puede quedar en un loop tranquilo o detenerse.
• No bloquees la entrada del usuario. Haz aparecer la interfaz con un fundido durante la última parte de la intro.
• Respeta el movimiento reducido. Si el usuario tiene activado el movimiento reducido, omite la intro y muestra la pose de reposo (accessibilityReduceMotion en SwiftUI).

El set de Charmotion incluye una intro de inicio pensada para esta transición: en el archivo de Rive se reproduce una vez y termina en reposo (idle), y también hay un MP4 de 9:16 de la animación de inicio para contextos en los que quieras video, como las vistas previas de apps.

¿Cómo agrego una animación de intro a la sección hero de un sitio web?

La web no tiene pantalla de inicio del sistema operativo, pero aplica el mismo principio: la página debe poder usarse de inmediato y la animación solo la decora.

• Renderiza primero la pose estática. Coloca una imagen fija o un póster en el HTML para que la sección hero tenga contenido antes de que se ejecute cualquier script. Luego inicia la animación.
• Usa video silenciado e inline para intros simples. Los navegadores permiten la reproducción automática sin sonido; en Safari para iOS, un video también necesita playsinline para reproducirse inline (MDN). Si la promesa de play() se rechaza, mantén el póster.
• Usa Rive para intros interactivas, en las que la intro da paso a un loop en reposo que reacciona al hover o al scroll.
• Mantén la transparencia en todos los navegadores. Para un personaje transparente sobre tu fondo, ofrece primero HEVC MOV con canal alfa y después VP9 WebM con canal alfa (Jake Archibald).
• Respeta prefers-reduced-motion. Muestra el póster y omite la intro.

Consulta video con fondo transparente en un sitio web para ver el marcado completo.

Cómo agregar una animación de inicio a tu app

1. Mantén estática la pantalla de inicio del sistema. Define un color de fondo y una imagen fija con UILaunchScreen o un storyboard de inicio en iOS, y con el tema de la API SplashScreen en Android.
2. Haz coincidir el primer fotograma. Usa el primer fotograma de tu animación de intro como imagen de inicio, con el mismo tamaño y posición que en la primera vista.
3. Reproduce la intro en la primera vista. Inicia la animación en cuanto aparezca tu primera pantalla, con el archivo de animación incluido en la app.
4. Termina en una pose de reposo. Termina la intro en la pose de reposo (idle) y haz aparecer la interfaz con un fundido durante la última parte, para que los usuarios puedan interactuar de inmediato.
5. Agrega una ruta para movimiento reducido. Omite la intro y muestra la pose de reposo cuando el usuario haya activado el movimiento reducido.

Preguntas frecuentes

¿Puedo poner una animación de Lottie o Rive en la pantalla de inicio de iOS?

No. Las pantallas de inicio de iOS se definen en Info.plist o en un storyboard de inicio que solo puede usar clases estándar de UIKit, sin código personalizado. Muestra una pantalla de inicio estática que coincida con el primer fotograma de tu animación y luego reproduce la animación en tu primera vista.

¿Cuánto debe durar la animación de la splash screen en Android?

Google recomienda que la animación del ícono de la splash screen no supere los 1000 ms en teléfonos, con un retraso de inicio de hasta 166 ms. Es una recomendación, no un límite estricto. Si el arranque tarda más, Google sugiere usar una animación en loop.

¿Una splash screen es mala UX?

No se recomienda una splash screen que retrase a los usuarios solo por branding; Apple dice que la pantalla de inicio no es una oportunidad de branding. Una intro corta que se reproduce mientras la app realmente está cargando, o una sola vez en el primer inicio, está bien si nunca bloquea la interacción.

¿Qué tamaño debe tener el ícono de la splash screen en Android 12?

Con fondo de ícono, el ícono mide 240×240 dp y su contenido debe caber dentro de un círculo de 160 dp. Sin fondo, mide 288×288 dp y el contenido debe caber dentro de un círculo de 192 dp, según la documentación de Android.

Respuestas rápidas de esta guía

• ¿Se puede animar la pantalla de inicio de iOS?
• ¿Cómo debe verse una pantalla de inicio en iOS?
• ¿Cuánto debe durar la animación de la splash screen en Android?
• ¿Qué tamaño tiene el ícono de la splash screen en Android 12?

Fuentes

• 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