Una mascota de marca animada para tu app iOS, con código SwiftUI.
Subes una imagen y recibes un archivo Rive que tus vistas SwiftUI controlan con un número de estado de ánimo y triggers, archivos SwiftUI listos para el runtime de Apple heredado y el nuevo, MOV HEVC transparente para AVFoundation, Keynote y Final Cut, y una intro de inicio para tu primera pantalla.
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.
¿Cómo agrego una mascota animada en SwiftUI?
Agrega el paquete Swift de Rive, coloca el .riv de la mascota en tu bundle y muéstralo con RiveViewModel(fileName:stateMachineName:).view(). Asigna un input numérico como mood para cambiar de loop y dispara triggers para las reacciones puntuales, o usa el runtime de Apple de Rive con Data Binding. Los sets de Charmotion incluyen archivos SwiftUI listos para ambos runtimes.
import SwiftUI
import RiveRuntime // Swift Package: rive-app/rive-ios
struct MascotView: View {
@StateObject var mascot = RiveViewModel(
fileName: "mascot", // mascot.riv in your bundle
stateMachineName: "CharacterStateMachine"
)
var mood: Double = 0 // 0 idle · 1 happy · 2 wave …
var body: some View {
mascot.view()
.aspectRatio(1, contentMode: .fit)
.onAppear { mascot.setInput("mood", value: mood) }
.onChange(of: mood) { _, new in mascot.setInput("mood", value: new) }
}
func play(_ reaction: String) { mascot.triggerInput(reaction) } // "success"
}
Versión abreviada del archivo entregado, que nombra la vista, el enum de estados de ánimo y las reacciones según tu personaje.
Ambos runtimes de Apple
{Name}View.swift usa el RiveViewModel heredado con inputs de la máquina de estados. {Name}NewRuntimeView.swift usa el nuevo runtime asíncrono con Data Binding a través del view model Character.
Pantalla de inicio
Una LaunchStateMachine independiente reproduce la intro de 2.6 s una vez y se queda en reposo (idle). Muéstrala en tu primera pantalla, después de la pantalla de inicio estática. No emite ningún evento al terminar, así que sincroniza la transición con la duración de la intro.
Respeta Reducir movimiento
Comprueba accessibilityReduceMotion y mantén la mascota en reposo (o en una imagen fija) para quienes piden menos movimiento.
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 código SwiftUI, el .riv y el MOV HEVC con alfa están en todos los planes de pago, desde Starter ($20/mes). Precios en USD; Creem calcula los impuestos al pagar.
¿También recibo videos de vista previa para la App Store?
Recibes cada animación como MP4 de 1080 × 1080 más un video de inicio de 1080 × 1920. Las App Previews deben coincidir con las resoluciones exactas de los dispositivos de Apple y mostrar imágenes reales de la app, así que usa estos clips dentro de una grabación de pantalla de tu app en lugar de usarlos como la vista previa en sí.
¿Puedo usar la mascota sin agregar el SDK de Rive?
Sí. Usa el MOV HEVC transparente con AVPlayer, o los archivos MP4 y GIF. Pierdes el cambio de estados en vivo, pero tienes cada animación como archivo.
¿Puedo usar el .riv entregado en una app UIKit?
Sí. El mismo .riv se reproduce en UIKit mediante la vista de RiveViewModel o RiveView; el código entregado es SwiftUI, y los nombres de la máquina de estados y los inputs son idénticos.
¿La mascota puede aparecer en un widget o una Live Activity?
Archivo de Rive en vivo
