Convierte un PNG en un archivo Rive con 17 animaciones.
Sube un PNG, JPEG o WebP de tu personaje. Recibes un .riv ya riggeado, con keyframes y conectado: un número mood para 10 loops, triggers para 6 reacciones puntuales y una intro de inicio, listo para web, iOS, Android, Flutter y React Native.
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.
¿Cuáles son las mejores herramientas para pasar de PNG a animación Rive?
Las opciones principales son el editor de Rive (importas el PNG, agregas mallas y huesos y armas tú la máquina de estados), el AI Agent integrado en el editor de Rive en los planes de pago, un generador como Charmotion que entrega un .riv con 17 animaciones a partir de una imagen, y Rive Experts contratados a través de Contra para trabajos a medida.
CharacterViewModelMachine se controla con el view model Character (Data Binding): el número mood y un trigger por cada reacción. Lo exige el nuevo runtime de Apple de Rive y se recomienda en todas las plataformas.
CharacterStateMachine es el mismo grafo con inputs clásicos, para runtimes y código que todavía los usan.
LaunchStateMachine reproduce la intro una vez y se queda en reposo (idle).
Reacciones puntuales (triggers): success · error · yes · no · enter · exit. Cada una se reproduce una vez y luego vuelve al estado de ánimo actual.
Inicio: una intro de 2.6 s que termina en reposo (idle).
El arte plano se vectoriza en partes (nuestros .riv de demostración pesan entre 36 y 41 KB); el arte 3D o con mucho detalle conserva sus píxeles, así que su archivo pesa más (unos 1.0 MB en nuestra demo de logo 3D).
Intégralo en tu app
import { Rive } from "@rive-app/canvas";
const r = new Rive({
src: "/mascot.riv",
canvas: document.querySelector("canvas"),
stateMachine: "CharacterViewModelMachine",
autoBind: true, // binds the Character view model
autoplay: true,
onLoad: () => {
const vm = r.viewModelInstance;
vm.number("mood").value = 5; // loading
vm.trigger("success").trigger(); // plays once, back to mood
},
});
Los snippets para web y React usan Data Binding; también se incluye un archivo SwiftUI para cada runtime de Apple.
¿Prefieres hacerlo tú mismo?
Puedes hacer lo mismo a mano en el editor de Rive: importa el PNG, agrega mallas y huesos, crea keyframes para cada estado y conecta la máquina de estados. Nuestra guía de PNG a Rive lo explica paso a paso. Charmotion es para cuando prefieres dedicar esos días a tu producto.
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 archivo .riv está en todos los planes de pago, desde Starter ($20/mes). Los sets de personaje empiezan en Starter. Precios en USD; Creem calcula los impuestos al pagar.
¿Recibo el archivo de Rive editable o solo el .riv para runtime?
Recibes el .riv exportado que reproducen los runtimes de Rive, con todas las máquinas de estados y el view model Character. Las ediciones de la animación en sí no forman parte del set.
¿Qué runtimes de Rive pueden reproducir el archivo entregado?
Web (canvas y WebGL), React, iOS (el runtime nuevo de Apple y el heredado), Android, Flutter y React Native. Usa CharacterViewModelMachine con runtimes compatibles con Data Binding y CharacterStateMachine con código basado en inputs.
¿Puedo convertir varios PNG en un solo .riv?
Cada set es un personaje a partir de una imagen. Starter incluye 3 sets al mes y Todo en uno, 10; cada set es su propio .riv.
¿Y si mi PNG tiene fondo?
Un fondo liso se elimina automáticamente. Los fondos recargados, las fotos y las vistas de perfil no se animan bien, así que prueba primero la vista previa gratis para revisar tu imagen.
Archivo de Rive en vivo
