Convierte el ícono de tu app en una intro de inicio

¿Qué es una intro de inicio con el ícono de la app?

Es una animación de uno a tres segundos del ícono que la persona acaba de tocar, reproducida en tu primera pantalla justo después de la pantalla de inicio estática. Es la versión honesta de un "ícono de app animado": iOS y Android no permiten animar el ícono de la pantalla de inicio del dispositivo (consulta si se puede animar el ícono de una app), pero sí dejan que tu app anime lo que quiera una vez que está en ejecución.

Las HIG de Apple dicen que la pantalla de inicio debe ser casi idéntica a tu primera pantalla y que no es una oportunidad de branding (Apple HIG). Una intro con el ícono lo respeta: la pantalla de inicio sigue siendo sencilla y el momento de marca ocurre dentro de la app, de forma breve, y termina en un estado que la siguiente pantalla puede aprovechar.

Para conocer las reglas de cada plataforma sobre las pantallas de inicio en iOS, Android y la web, lee animación de inicio y splash screen de apps. Esta guía trata del ícono en sí: qué movimiento darle y cómo hacer que los fotogramas coincidan.

¿Qué movimiento funciona para una intro con el ícono de la app?

Elige una acción clara y hazla física. Los íconos son formas pequeñas y sólidas, así que el movimiento que los trata como objetos se entiende mejor:

• Aparición con rebote: escala de alrededor del 60 % a un poco más del 100 % y luego se asienta.
• Aplastamiento y estiramiento al aterrizar: una caída o un salto corto con un aplastamiento al tocar el suelo hace que el ícono se sienta pesado y real.
• Una pequeña inclinación: unos pocos grados de rotación de ida y vuelta le dan vida sin cambiar la silueta.
• Un parpadeo, si el ícono tiene ojos: un solo parpadeo en reposo suele ser el momento más encantador.

Haz que la parte que hace esperar al usuario sea corta. Google recomienda que la animación del ícono del splash en Android no supere los 1000 ms (Android Developers), y alrededor de un segundo es el límite para que el hilo de pensamiento del usuario no se interrumpa (NN/g). Si tu intro dura más, haz aparecer la interfaz con un fundido durante su parte final para que la gente pueda actuar antes de que termine.

¿Cómo haces coincidir la intro con la pantalla de inicio estática?

La pantalla de inicio es un fotograma fijo de tu intro. Elige una de estas dos configuraciones y mantenla:

Para "el ícono cobra vida", el ícono en reposo debe tener el mismo tamaño y el mismo centro en ambos lugares. En iOS, UILaunchScreen admite un color y una imagen, y un storyboard de inicio solo puede usar clases estándar de UIKit (Apple Developer Documentation). En Android, el ícono estático del splash mide 288×288 dp con su contenido en un círculo de 192 dp, o 240×240 dp en un círculo de 160 dp si tiene fondo de ícono, así que el ícono de la intro debe dibujarse con ese tamaño visible.

Usa un color asset con nombre o un único valor hex para todos los fondos, y revisa el modo claro y el oscuro por separado. Una diferencia de un solo tono es la razón más común por la que la transición parece un parpadeo.

¿Se puede animar un ícono de app 3D o con degradado?

Sí, si lo mueves en lugar de reconstruirlo. Calcar un ícono 3D brillante, un degradado de malla o un lettering en formas vectoriales cambia su aspecto, y eso es justo lo que una marca no puede aceptar. En su lugar, trata el ícono como una sola imagen y anima su transformación: escala, rotación, posición y escala no uniforme para el squash and stretch. Los píxeles nunca cambian, así que el ícono en reposo es exactamente el ícono de la pantalla de inicio del teléfono.

Así es como Charmotion maneja estos íconos. Sube un PNG, JPEG o WebP (de al menos 512 px): la ilustración plana recibe un rig vectorial, mientras que los íconos en 3D, con degradados o con texto van al modo Motion, que elimina el fondo y anima tu ilustración exacta con compresión, estiramiento, inclinación, saltos y parpadeos donde detecta ojos. En ambos casos recibes una intro de inicio de 2.6 segundos que termina en el ícono en reposo, además de otras 16 animaciones (moods en loop y reacciones puntuales), como archivo de Rive con LaunchStateMachine, WebM y MOV HEVC transparentes, MP4, GIF y un video de inicio 9:16. Los sets vienen con los planes de pago (desde $20/mes) y normalmente tardan pocos minutos. No produce archivos Lottie ni AnimatedVectorDrawable. La vista previa gratis muestra primero tu ícono en pantallas de app y, para ilustraciones planas, un breve clip animado de prueba.

¿En qué formato conviene entregar la intro del ícono?

Sea cual sea el formato, revisa cómo sabe tu código que la intro terminó. Los reproductores de video y Lottie avisan cuando terminan. Una máquina de estados (state machine) de Rive solo informa lo que su autor incluyó, así que si tu archivo de inicio no tiene un evento de fin, espera la duración de la intro con un temporizador.

¿Cuándo debería reproducirse la intro de inicio?

• En arranques en frío, no en cada reanudación. Al volver desde segundo plano, la app debe mostrarse de inmediato.
• Intro completa en el primer inicio, más corta después. Considera la versión completa tras la instalación o una actualización, y una versión breve que se asiente rápido en los inicios diarios.
• Nunca alargues un inicio rápido. Si la app está lista, deja que la gente interactúe mientras terminan los últimos fotogramas.
• Respeta el movimiento reducido. Muestra el ícono en reposo y continúa. En SwiftUI lee accessibilityReduceMotion (Apple); en la web, prefers-reduced-motion.
• Reutilízala fuera de la app. La misma intro funciona como un primer segundo potente para la vista previa de tu app en la tienda y para tu video de lanzamiento.

Cómo convertir el ícono de tu app en una intro de inicio

1. Elige la configuración. Decide si la pantalla de inicio muestra solo tu color de fondo (revelación del ícono) o el ícono en reposo (el ícono cobra vida).
2. Anima un solo movimiento. Dale al ícono una aparición, un salto o un squash que termine exactamente en el ícono en reposo, y limita la parte que bloquea a cerca de un segundo.
3. Haz coincidir los fotogramas. Usa el mismo hex de fondo y el mismo tamaño y centro del ícono en la pantalla de inicio y en la intro.
4. Reprodúcela en la primera pantalla. Incluye el .riv o el video en la app, inícialo cuando aparezca la primera pantalla y continúa al cumplirse su duración.
5. Agrega las alternativas. Omítela con movimiento reducido y en reanudaciones en caliente, y agrega un tiempo límite de seguridad por si el archivo no carga.

Preguntas frecuentes

¿La intro de inicio debe terminar en el ícono o en la primera pantalla de la app?

Termina en el ícono en reposo y luego deja que la interfaz aparezca a su alrededor o mueve el ícono a su lugar, por ejemplo el logo de la barra de navegación. Terminar en otra pose obliga a hacer un corte, que es justamente la costura que intentas ocultar.

¿Puedo usar la misma intro del ícono en la vista previa de la App Store?

Sí, si aparece como parte de una captura de pantalla en video de tu app. La directriz 2.3.4 indica que las vistas previas solo pueden usar capturas de pantalla en video de la propia app, y se permiten narración y overlays. Una intro que tu app realmente reproduce al iniciarse cumple con esto.

¿Una intro de inicio hará más lento el arranque de mi app?

Solo agrega tiempo si haces que el usuario la espere. Carga el archivo mientras la pantalla de inicio estática sigue visible, inicia la intro cuando aparezca tu primera pantalla y deja que la interfaz acepte entradas durante su parte final. Omítela en las reanudaciones en caliente.

Fuentes

• Launching, Apple Human Interface Guidelines
• Specifying your app's launch screen, Apple Developer Documentation
• Splash screens, Android Developers
• Response Times: The 3 Important Limits, Nielsen Norman Group
• HEVC Video with Alpha (WWDC19), Apple Developer
• accessibilityReduceMotion, Apple Developer Documentation
• App Review Guidelines (2.3.4, 2.3.8, 2.5.1), Apple