Una animación de inicio a partir del ícono de tu app, lista para tu primera pantalla.
Sube el ícono de tu app, tu logo o tu mascota de marca. Obtienes una intro de inicio de unos 2.6 segundos que termina con tu personaje en reposo y luego da paso a idle o loading mientras la app se prepara. Se entrega como LaunchStateMachine de Rive, MOV HEVC y WebM transparentes, un video de 1080 × 1920 y código para web, React y SwiftUI.
Este es el .riv real que entrega nuestro motor, reproduciéndose en tu navegador. Es la misma máquina de estados que controlas desde tu app con un input numérico y un trigger por cada reacción puntual.
Dónde se reproduce la intro: justo después del splash nativo
1. El splash nativo queda estático
iOS muestra una pantalla de inicio estática antes de que se ejecute tu código, y la API SplashScreen de Android 12 solo anima un ícono AnimatedVectorDrawable. Mantén ambos estáticos, con el mismo color de fondo y la misma posición del ícono que tu primera pantalla.
2. Tu primera pantalla reproduce la intro
LaunchStateMachine reproduce la intro una vez y se queda en reposo (idle). No dispara ningún evento de fin, así que ajusta la transición a la duración de la intro (unos 2.6 s) o continúa en cuanto la app esté lista.
3. Pasa a la carga o a la pantalla principal
Cambia a CharacterViewModelMachine y asigna mood a 5 (loading) mientras cargan los datos, o ve directo a tu pantalla principal. El personaje nunca se detiene en un fotograma extraño.
Qué usar en cada plataforma
Plataforma
Archivo
Cómo
iOS (SwiftUI, UIKit)
.riv o MOV HEVC con alfa
Vista SwiftUI incluida, o AVPlayer para el MOV
Android
.riv
rive-android en tu primera activity, después del splash del sistema
Flutter
.riv + README
Paquete rive; quita flutter_native_splash cuando empiece la intro
React Native, Expo
.riv + README
@rive-app/react-native en un development build
Web y PWA
.riv o WebM transparente + MOV
Código web y React incluido
No incluye: archivos Lottie, un splash nativo animado del sistema operativo (el de Android necesita un AnimatedVectorDrawable) ni íconos animados en la pantalla principal (no están disponibles para apps de terceros en iOS ni en Android).
Resultados reales
Archivos entregados, tal como los descargarías.
MP4 Cada set
1080 × 1080 a 60 cuadros por segundo. Aquí: el saludo de Gummo, de un set entregado.
WebM y MOV transparentes Cada set
Incluye canal alfa, por eso se ve el fondo de cuadros. El MOV es HEVC con alfa para apps y editores de Apple.
GIF Cada set
Vistas previas ligeras para documentación, correo y chat. El loop “thinking” de Kiko.
Video de inicio en 9:16 Cada set
1080 × 1920 para historias y splash screens. La intro de inicio de 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, se reproduce una vez
Máquina de estados (state machine) de Rive Cada set
Un solo archivo pequeño en lugar de 17 videos. Es lo que hace funcionar la demo de la parte superior de esta página.
Diseña, anima y obtén enlaces de descarga en el chat
Incluido
Planes
Empieza gratis. Mejora tu plan cuando necesites más.
El .riv, el MOV y el WebM transparentes y el código están en todos los planes de pago, desde Starter ($20/mes). Cada set también incluye el inicio en MP4, GIF y un video 9:16, ideal para la ficha de una tienda de apps o una publicación en redes. Precios en USD; Creem calcula los impuestos al pagar.
¿Se puede animar la propia pantalla de inicio de iOS?
No. La Launch Screen de Apple es un storyboard estático que iOS muestra antes de que se ejecute tu código. Reproduce la intro en tu primera vista de SwiftUI o UIKit, dibujada sobre el mismo fondo, para que el paso de la pantalla de inicio a la animación no se note.
¿La intro de inicio funciona con la SplashScreen API de Android 12?
No dentro de ella: la SplashScreen API solo anima un ícono AnimatedVectorDrawable, y nosotros no lo producimos. Deja ahí un ícono estático, cierra rápido el splash del sistema y luego reproduce la intro de Rive en tu primera pantalla, sobre el mismo fondo.
¿Puedo usar la animación de splash en Flutter, React Native o Expo?
Sí, con el .riv y su README; los fragmentos de código incluidos son solo para web, React y SwiftUI. En Flutter, deja flutter_native_splash estático y quítalo cuando empiece la intro. En Expo, llama a SplashScreen.preventAutoHideAsync() y luego a hideAsync() en cuanto la vista de Rive esté dibujando; Rive necesita un development build, no Expo Go.
¿Cuánto debe durar una animación de splash screen?
Poco. Nuestra intro de inicio dura unos 2.6 segundos y termina en reposo (idle), y puedes pasar a la carga o a tu pantalla principal en cuanto la app esté lista. Si tu app arranca rápido, considera reproducirla solo en el primer inicio y no en cada arranque en frío.
¿Una animación de inicio hace más lento el arranque de la app?
No, siempre que se ejecute en paralelo con el trabajo de arranque y no antes. Inicia las tareas de red y base de datos mientras se reproduce la intro y haz la transición en cuanto ambas terminen. El .riv de arte plano pesa unos 40 KB, pero el runtime de Rive aumenta el tamaño de tu app, así que revisa esa cifra si el espacio es limitado.
¿La animación de splash se entrega en Lottie o en Rive?
En Rive, además de video con fondo transparente. Rive es ideal para una intro que da paso a una mascota interactiva en el mismo archivo; los íconos 3D detallados también funcionan como MOV HEVC o WebM, sin runtime. No entregamos Lottie JSON. Más información en Lottie vs Rive para splash screens.
Archivo de Rive en vivo
