Lottie vs Rive vs video para animar un splash screen
Por el equipo de Charmotion · Actualizado el
En la splash del sistema operativo, solo el AnimatedVectorDrawable de Android puede animarse; la pantalla de inicio de iOS sigue siendo estática. Para la intro de tu primera pantalla, Lottie sirve para una animación vectorial lineal que ya tengas, Rive para una intro que da paso a una mascota de marca interactiva, y el video con fondo transparente para íconos 3D o rasterizados con mucho detalle. Todos necesitan la misma transición de lo estático a lo animado.
Puntos clave
- Dentro de una splash del sistema solo se anima un AVD, y únicamente en Android 12+.
- Lottie y el video avisan cuando terminan; una máquina de estados (state machine) de Rive solo informa lo que su autor haya incluido.
- Rive gana cuando el personaje del inicio sigue vivo en la app después.
- El video gana con íconos 3D, con degradados o fotográficos: HEVC con alfa para Apple, VP9 con alfa para Chrome.
- Charmotion exporta Rive y formatos de video, no Lottie ni AVD.
¿Qué formatos se pueden reproducir en cada lugar al iniciar?
| Formato | Splash del sistema | Intro en la primera pantalla | Reacciona después del inicio | Arte 3D o rasterizado | Sabe cuándo termina |
|---|---|---|---|---|---|
| AnimatedVectorDrawable | Solo Android 12+ | Solo Android | No | No | Duración fija |
| Lottie | No | Sí (biblioteca) | Limitado (segmentos, marcadores) | Mal | Callback al terminar |
| Rive | No | Sí (runtime) | Sí (máquina de estados) | Solo imágenes incrustadas | Solo si el archivo dispara un evento |
| Video con fondo transparente (MOV HEVC, WebM VP9) | No | Yes | No | Yes | Evento de fin del reproductor |
| MP4 opaco | No | Sí, sobre un color que coincida | No | Yes | Evento de fin del reproductor |
La pantalla de inicio de iOS no acepta ningún formato animado: un storyboard de inicio solo puede usar clases estándar de UIKit, sin clases personalizadas ni conexiones con código (Apple Developer Documentation). En Android, la splash del sistema solo anima un AVD (Android Developers). Todos los demás formatos se reproducen en tu primera pantalla.
¿Cuándo es Lottie la opción correcta para una intro de splash?
Cuando un diseñador ya hizo la intro en After Effects y se reproduce de principio a fin. Lottie es vectorial, liviano para formas simples, y todos sus runtimes te avisan cuando termina: LottieView en iOS tiene un modificador animationDidFinish (lottie-ios), y LottieAnimationView en Android acepta animator listeners (lottie-android). Así, sincronizar la transición es trivial.
Los límites aparecen después del inicio. Si el mismo personaje debe quedarse en reposo, mostrar una carga o celebrar más adelante, con Lottie necesitas archivos o segmentos separados y que tu código elija entre ellos, y las transiciones entre ellos se cortan. Tampoco es adecuado para arte 3D o rasterizado complejo.
Para la comparación general de formatos más allá de las splash screens, consulta Rive vs Lottie, y para detalles multiplataforma, Lottie vs Rive en React Native y Flutter.
¿Cuándo es mejor opción Rive?
Cuando la intro de inicio es la primera aparición de un personaje que sigue trabajando en la app. Un solo archivo .riv puede contener la intro, un loop en reposo (idle), la carga y las reacciones, y una máquina de estados pasa de una a otra desde cualquier fotograma. La intro termina en idle, y la misma vista puede cambiar a un estado de ánimo de carga en cuanto empieza la primera solicitud.
Dos notas prácticas:
- Final. Una máquina de estados solo informa los eventos que su autor agregó. Revisa el archivo: si no tiene un evento de fin, espera la duración de la intro con un temporizador en lugar de esperar un callback.
- Configuración. Rive necesita su runtime en tu app; en Expo eso implica una development build en lugar de Expo Go (Rive).
¿Cuándo conviene usar video para la intro de la splash?
Cuando el ícono tiene mucho detalle: 3D brillante, degradados de malla, lettering, textura fotográfica. El video reproduce cada píxel y no exige trabajo de renderizado más allá de la decodificación. Para tener transparencia sobre tu fondo, las plataformas de Apple admiten HEVC con alfa (WWDC19) y Chrome admite VP9 con alfa en WebM (Chrome for Developers).
La opción más simple y robusta en todas las plataformas es un clip opaco cuyo fondo sea exactamente el color de tu splash: no tienes que preocuparte por el soporte de alfa, y la unión es invisible siempre que los valores hexadecimales coincidan. Las desventajas son el peso del archivo y la falta de interacción: el clip se reproduce, termina y listo.
¿Vale la pena usar un AnimatedVectorDrawable?
Sí, pero solo para su única función: el splash del sistema en Android 12+. Mantenlo corto (Google recomienda no más de 1000 ms) y simple, ya que anima trazados y grupos vectoriales, no arte detallado. En versiones anteriores a Android 12 se muestra como un ícono estático, incluso con la biblioteca de compatibilidad (referencia de androidx).
El inicio más sólido en Android combina dos formatos: una pequeña aparición con AVD en el splash del sistema y, después, la intro completa en Rive o en video en la primera pantalla, sobre el mismo fondo. Más detalles en la guía del ícono animado en el splash screen de Android.
¿Cuáles de estos formatos exporta Charmotion?
Para ser directos: Charmotion exporta Rive y video, y no exporta Lottie JSON, dotLottie ni AnimatedVectorDrawable XML. A partir de una imagen de tu ícono o mascota recibes un .riv con LaunchStateMachine (intro de 2.6 segundos, sin evento final), CharacterViewModelMachine y CharacterStateMachine para los estados dentro de la app, además de MP4 a 1080×1080, un video de inicio 9:16, GIF, WebM VP9 y MOV HEVC transparentes y código web, React y SwiftUI. Todo viene con los planes de pago.
Si tu stack requiere Lottie, o necesitas un AVD para el splash del sistema de Android, tendrás que obtenerlos con otra herramienta o con un diseñador. Los consejos sobre la transición de esta guía aplican en cualquier caso.
Preguntas frecuentes
¿Qué pesa menos para una animación de splash: Rive o Lottie?
Depende más del arte que del formato. Las formas vectoriales simples pesan poco en ambos. La ventaja de Rive es que un mismo archivo puede contener también tus estados de reposo y de carga, así evitas incluir varios archivos Lottie. Mide tus exportaciones reales en lugar de fiarte de proporciones generales.
¿Puedo usar un video con fondo transparente como splash screen en Android?
No en el splash del sistema, que solo anima un AnimatedVectorDrawable. En tu primera pantalla sí puedes reproducir video; un clip opaco sobre el mismo color de fondo es la opción más confiable, porque la unión queda invisible sin necesidad de soporte de canal alfa.
¿Charmotion exporta Lottie para splash screens?
No. Charmotion exporta archivos Rive, MP4, un video de inicio en 9:16, GIF, WebM y MOV HEVC con fondo transparente, y ejemplos de código. No exporta Lottie ni AnimatedVectorDrawable. Su intro de inicio se reproduce en tu primera pantalla, después de una pantalla de inicio estática.
Respuestas rápidas de esta guía
Fuentes
- Specifying your app's launch screen, Apple Developer Documentation
- Splash screens, Android Developers
- SplashScreen (androidx.core:core-splashscreen), Android Developers
- lottie-ios, Airbnb on GitHub
- lottie-android, Airbnb on GitHub
- Adding Rive to Expo, Rive
- HEVC Video with Alpha (WWDC19), Apple Developer
- Alpha transparency in Chrome video, Chrome for Developers
Guías relacionadas
- Rive vs Lottie: cuál usar en 2026
- Lottie vs Rive en React Native y Flutter (2026)
- Ícono animado del splash screen en Android: especificaciones, XML y transición
- Guía de animaciones de inicio y splash screen para apps
- Splash screen animado en Expo y React Native
- Splash screen animado en Flutter (y FlutterFlow)