Cómo crear una mascota de marca animada para tu app
Por el equipo de Charmotion · Actualizado el
Para crear una mascota de marca animada para tu app, diseña un personaje de frente con formas planas y bien separadas, define qué estados de la app debe cubrir y luego anima esos estados como loops y reacciones puntuales. Puedes contratar a un animador, riggearlo tú mismo en Rive o After Effects, o usar un servicio automatizado.
Puntos clave
- Diseña pensando primero en el movimiento: las formas planas, las partes separadas (ojos, boca, brazos) y una vista frontal son mucho más fáciles de riggear.
- Planifica los estados antes de animar. La mayoría de las apps necesitan reposo (idle), carga, éxito, error, un estado vacío y un saludo.
- Entrega un archivo interactivo (Rive o dotLottie) para usar dentro de la app y archivos de video para marketing y vistas previas en las tiendas de apps.
- El costo y el tiempo dependen de la cantidad de estados y de cuánto trabajo artesanal lleve el movimiento, no del tamaño del personaje.
¿Ya tienes un personaje o logo? Mira tu personaje en pantallas reales de una app: pantallas de splash, onboarding, carga y estado vacío. Es gratis, funciona en tu navegador y no sube nada.
¿Por qué las apps usan mascotas animadas?
Una mascota de marca le da una cara a tu producto en momentos que, de otro modo, serían esperas vacías o malas noticias. Un spinner dice "espera". Un personaje que se ve ocupado dice "estamos en eso". Una pantalla de error con un gesto comprensivo se percibe menos como un fallo grave y más como un pequeño tropiezo.
El ejemplo más conocido es Duolingo. Su equipo creó la sincronización labial de sus personajes con máquinas de estados de Rive, de modo que los mismos personajes pueden reaccionar y hablar en todos los cursos sin un video aparte para cada frase (blog de Duolingo).
No necesitas la escala de Duolingo para aprovecharlo. Una app pequeña suele obtener la mayor parte del valor con unos pocos estados ubicados donde los usuarios ya hacen una pausa:
- Esperas: carga, subida de archivos, generación.
- Todavía no hay nada: listas vacías, primer inicio, búsquedas sin resultados.
- Resultados: una compra completada, un archivo guardado, una solicitud fallida.
- Saludos y despedidas: onboarding, inicio de sesión, un recorrido por las funciones.
La mascota debe apoyar la interfaz, nunca reemplazarla. Deja que las etiquetas de texto y los botones hagan el trabajo real, y que el personaje marque el tono.
¿Cómo diseñar una mascota para que sea fácil de animar?
La mayoría de los problemas de animación vienen de decisiones tomadas en la etapa de dibujo. Un personaje que se ve genial como ilustración puede ser muy difícil de mover. Antes de decidirte por un diseño, revísalo con esta lista:
- Pose de frente. Una vista frontal o casi frontal permite que los ojos, la boca y los brazos se muevan de forma simétrica. Las vistas de perfil y de tres cuartos necesitan dibujos adicionales para cada estado.
- Formas planas y sólidas. Los rellenos sólidos y los contornos limpios se deforman sin problemas. Las texturas recargadas, el detalle fotográfico y los degradados complejos dificultan el rigging.
- Partes separadas. Mantén el cuerpo, los ojos, la boca, los brazos y los accesorios en sus propias capas o grupos. Si los ojos están integrados en la cabeza, el personaje no puede parpadear.
- Silueta simple. Un contorno legible entre 48 y 64 px significa que el personaje sigue funcionando en una barra de herramientas o en una fila de una lista.
- Espacio para moverse. Deja espacio alrededor del personaje en el lienzo para que un salto o un saludo no queden recortados.
- Fondo liso. Entrega el personaje sobre un fondo transparente o de un solo color, no dentro de una escena.
Si ya tienes una mascota de marca que no cumple algunas de estas reglas, igual se puede animar. Solo limita qué técnicas funcionan, como se explica más abajo en la sección sobre PNG.
¿Qué estados debe tener la mascota de una app?
Piensa en dos tipos de animación. Los loops se reproducen mientras se cumpla una condición, como la carga o la escucha. Las reacciones puntuales se reproducen una vez en respuesta a un evento, como un éxito o un error, y luego vuelven al loop que estaba activo.
Un set inicial práctico:
| Estado | Tipo | Uso habitual |
|---|---|---|
| Idle | Loop | Pose de reposo predeterminada con parpadeos |
| Carga / pensando | Loop | Solicitudes, cargas, generación con IA |
| Durmiendo o en calma | Loop | Estados vacíos |
| Attention | Loop | Algo nuevo que mirar |
| Success | Reacción puntual | Acción completada |
| Error | Reacción puntual | Acción fallida |
| Saludo / entrada | Reacción puntual o loop | Onboarding y saludos |
Agrega estados de escucha y de habla si la mascota acompaña una función de chat o de voz. La guía sobre estados de animación de una mascota relaciona cada uno con eventos concretos de la app.
Decide desde el principio cómo termina cada reacción puntual. La regla más limpia es que una reacción siempre vuelva al loop que estaba activo antes, de modo que un éxito durante la carga regresa a la carga, y un éxito durante el reposo regresa al reposo. Deja esa regla por escrito para quien anime el personaje, porque determina cómo deben verse el primer y el último fotograma de cada reacción puntual.
¿Qué opciones tienes para animar una mascota?
Hay cuatro caminos realistas. Cada uno equilibra dinero, tiempo y control de forma distinta.
| Opción | Ideal cuando | Ventajas y desventajas |
|---|---|---|
| Contratar a un animador de personajes | La mascota es central para tu marca y quieres una actuación a medida | El costo más alto y el plazo más largo; las revisiones se acumulan |
| Riggearla tú en el editor de Rive | Alguien del equipo va a aprender rigging y máquinas de estados | Poco gasto de dinero, curva de aprendizaje real |
| Lottie con After Effects | Tus diseñadores ya trabajan en After Effects | Muy bueno para movimiento lineal; la interactividad vive en las máquinas de estados de dotLottie |
| Servicio automatizado | Necesitas rápido un set completo de estados a partir de una imagen existente | Actuación menos personalizada que un set animado a mano |
Lottie reproduce animaciones de After Effects exportadas como JSON con el plugin Bodymovin (lottie-web). El formato dotLottie, más reciente, puede reunir varias animaciones y máquinas de estados en un solo archivo (dotLottie). Rive está construido en torno a las máquinas de estados desde el principio, lo que se adapta bien a una mascota que cambia entre muchos estados; consulta Rive vs Lottie.
Charmotion es un ejemplo de la vía automatizada. Subes la imagen de una mascota y recibes 17 animaciones, normalmente en pocos minutos: diez loops seleccionados con un número mood (0–9), seis triggers puntuales y una intro de inicio. En los planes de pago vienen como un solo archivo de Rive (unos 40 KB para una mascota plana, más para renders 3D, como alrededor de 1.0 MB para un logo 3D) además de archivos MP4, GIF y WebM y MOV transparentes.
¿Puedo animar una mascota que ya tengo en PNG?
Sí, pero el método depende de lo que contenga el PNG.
El arte plano de estilo vectorial (rellenos sólidos, contornos definidos) se puede separar en partes, ya sea redibujándolo como formas vectoriales o recortando las capas. Una vez que el cuerpo, los ojos, la boca y los brazos están separados, un animador puede riggear cada parte con huesos e intercambiar formas de boca para el habla.
El arte pintado, renderizado en 3D o con muchos degradados es más difícil de dividir. Redibujarlo como vector suele hacer que pierda su aspecto. La alternativa es conservar los píxeles originales y deformarlos: quitar el fondo, colocar una malla sobre la imagen, vincularla a unos pocos huesos y doblar el arte para lograr squash, stretch, inclinaciones y saltos. Los parpadeos se pueden agregar ubicando los ojos y animando solo esa zona.
Elijas el camino que elijas, la imagen de origen importa:
- Usa la mayor resolución que tengas, idealmente 1000 px o más en el lado corto.
- Prefiere un personaje de frente sobre un fondo liso.
- Evita fotos de personas u objetos reales y vistas de perfil, que la mayoría de los métodos de rigging manejan mal.
Las mismas técnicas se aplican a los logos; consulta cómo animar un logo a partir de un PNG.
¿Qué formato debo usar: Rive, Lottie o video?
Usa un formato interactivo dentro del producto y video en todo lo demás.
- En la app o la aplicación web: un archivo de Rive o de dotLottie. Un solo archivo contiene todos los estados y tu código cambia entre ellos. Los runtimes oficiales de Rive son de código abierto con licencia MIT (documentación de Rive).
- En un sitio web de marketing: el video con fondo transparente funciona bien para una sola animación en loop en la sección hero. Usa WebM VP9 con alfa para Chrome, Edge y Firefox, y HEVC con alfa para Safari, que descarta el canal alfa de WebM (Jake Archibald).
- Publicaciones en redes, vistas previas en tiendas de apps, presentaciones: MP4.
- Correo y documentos: GIF, solo como vista previa de respaldo.
El video es fácil de insertar, pero cada estado es un archivo aparte, y cambiar entre clips nunca es tan fluido como cambiar de estado en una máquina de estados. Para una comparación completa, lee GIF vs WebM vs MP4 vs Rive.
¿Cuánto tiempo lleva y cuánto cuesta animar una mascota?
No existe una lista de precios fiable en la industria, así que desconfía de quien te dé una sola cifra. Lo que determina el costo y el tiempo, en cambio, es predecible:
- Cantidad de estados. Cada loop y cada reacción puntual es un trabajo en sí mismo. Diez estados cuestan mucho más que tres.
- Esfuerzo de rigging. Un personaje diseñado con partes separadas se riggea rápido. Una ilustración aplanada puede tener que redibujarse primero.
- Calidad de la actuación. Un movimiento a medida, con timing hecho a mano y personalidad, lleva más tiempo que un set de movimientos reutilizables.
- Interactividad. Conectar una máquina de estados y probar cada transición suma tiempo más allá de dibujar fotogramas.
- Revisiones. Acuerda desde el principio la cantidad de rondas de revisión.
Para mantener el proyecto acotado, empieza con idle, loading, success y error. Publícalos, observa dónde ven realmente los usuarios a la mascota y luego agrega estados. Una mascota que aparece en cuatro lugares bien elegidos es mejor que una con veinte animaciones que nadie dispara.
Cómo crear una mascota de marca animada para tu app
- Diseña pensando en el movimiento. Dibuja un personaje de frente, con formas planas y partes separadas para el cuerpo, los ojos, la boca y los brazos, sobre un fondo liso.
- Haz una lista de tus estados. Elige los momentos de la app que cubrirá la mascota y marca cada uno como loop (carga, reposo) o reacción puntual (éxito, error).
- Elige una vía de producción. Contrata a un animador, riggéala tú en Rive o After Effects, o usa un servicio automatizado, según tu presupuesto y tus plazos.
- Anima y conecta los estados. Construye los loops y las reacciones puntuales en un solo archivo interactivo y conéctalos a los eventos de la app mediante inputs o Data Binding.
- Exporta para cada canal. Usa Rive o dotLottie en el producto, WebM con fondo transparente más MOV HEVC en la web, y MP4 para redes y vistas previas en tiendas.
- Prueba con movimiento reducido. Comprueba que la app muestre una pose estática cuando el usuario haya pedido al sistema reducir el movimiento.
Preguntas frecuentes
¿Cuál es la forma más fácil de animar la mascota de una app?
La forma más fácil es partir de un personaje plano, de frente y con partes separadas, y usar una herramienta construida en torno a estados, como el editor de Rive o un servicio automatizado. Evita empezar con una ilustración pintada de perfil, que requiere mucho más trabajo manual para riggear y que a menudo hay que redibujar primero.
¿Mi mascota debe ser vectorial o rasterizada?
El vector es más fácil de animar porque cada parte se puede mover y deformar limpiamente a cualquier tamaño. El arte rasterizado también se puede animar deformando sus píxeles con una malla y huesos, lo que conserva el sombreado 3D y los degradados que se perderían al vectorizarlo.
¿Cuántas animaciones necesita la mascota de una app?
La mayoría de las apps necesitan cuatro estados para empezar: idle, loading, success y error. Después agrega un loop para estados vacíos, un saludo para el onboarding y attention para las notificaciones. Los asistentes de chat y de voz también necesitan listening y talking. Agrega estados nuevos solo donde la mascota vaya a aparecer realmente en tu app.
¿Qué es mejor para una mascota, Rive o Lottie?
Ambos funcionan. Rive está diseñado en torno a las máquinas de estados, lo que se adapta bien a una mascota que cambia entre muchos estados. Lottie conviene a equipos que ya animan en After Effects, y dotLottie ahora también admite máquinas de estados. Elige el que tu equipo pueda producir y mantener.
Respuestas rápidas de esta guía
Fuentes
- How Duolingo's characters lip sync (visemes), Duolingo Blog
- Runtimes: getting started, Rive
- lottie-web, Airbnb on GitHub
- dotLottie, LottieFiles
- Video with alpha transparency on the web, Jake Archibald
- prefers-reduced-motion, MDN Web Docs