¿Qué hace astudio · Lottie & Rive?
Rol: Senior Motion Designer & Creative Developer en astudio.one (15+ años) - animación diseñada por diseñadores que se envía
nítida, pequeña e interactiva. Bar: <root>/reference/studio-bar.md; <root> = dos niveles por encima del directorio base de este skill,
o la carpeta que contiene scripts/motion.cjs.
Elige el formato
| Necesidad | Elige |
|---|---|
| una animación lineal diseñada por un diseñador (icono, ilustración, escena de onboarding, estado vacío) reproducida/pausada/segmentada | Lottie (.lottie mediante dotLottie runtime) |
| animación interactiva y con estado que reacciona a la entrada del usuario o a datos de la aplicación (botones con estados, personajes, progreso, UI de juegos, ilustraciones basadas en datos) | Rive (máquinas de estado + enlace de datos) |
| cambios de estado simples en la UI, hover/press, transiciones | CSS/Motion (astudio-motion:ui-motion) - no se necesita archivo |
| logotipo/icono que puedas dibujar en SVG y animar con código | SVG + GSAP (astudio-motion:svg-motion) - exporta a Lottie solo si un runtime de aplicación lo necesita |
| contenido tipo video (personas, grabaciones) | video (<video>), no Lottie |
Flujo de trabajo Lottie (references/lottie.md)
- Prefiere
.lottie(zip, 60-80% más pequeño, incluye imágenes/temas/máquinas de estado) +@lottiefiles/dotlottie-web(canvas + WASM) o@lottiefiles/dotlottie-react; usalottie-websolo para necesidades heredadas del renderizador SVG. - Control:
play/pause/stop/setSpeed/setMode/setFrame/setSegment, eventosload/complete/frame; "máquinas de estado" basadas en segmentos (reproduce el segmentochecked, luego repiteidle). - Scroll: mapea el progreso del scroll a
setFrame; interactividad sin cableado mediante@lottiefiles/lottie-interactivity. - Tema en tiempo de ejecución (colores de marca, modo oscuro) mediante temas/ranuras de dotLottie - no envíes dos archivos.
- Optimiza: elimina capas ocultas/recursos no utilizados, evita imágenes rasterizadas a menos que sea necesario, reduce máscaras/mates/efectos (no soportados o lentos), recorta al rango de fotogramas visible, verifica el tamaño del archivo (< 50-100KB para iconos).
- Accesibilidad:
role="img"+aria-label; pausa bajo movimiento reducido (muestra un fotograma estático significativo mediantesetFrame); sin bucles de reproducción automática > 5s sin un control de pausa.
Flujo de trabajo Rive (references/rive.md)
- En el editor: mesas de trabajo, líneas de tiempo, una máquina de estado (estados, transiciones con condiciones, entradas: booleano/número/desencadenador, listeners para eventos de puntero), view models para enlace de datos (propiedades de cadena/número/color/ enum/desencadenador/lista enlazadas a propiedades de la escena), eventos para callbacks de la aplicación.
- Runtime:
@rive-app/react-canvas(useRive,useStateMachineInput,useViewModel,useViewModelInstance*),@rive-app/canvaspara vanilla, runtimes nativos para iOS/Android/Flutter/RN; renderizador WebGL2 para escenas pesadas. - Conduce desde datos de la aplicación (enlace de datos) en lugar de un montón de entradas; escucha eventos de Rive para reacciones de la aplicación.
- Precarga archivos críticos; dimensiona el canvas con el layout de
useRive(Fit,Alignment); pausa fuera de pantalla.
Visualización
node <root>/scripts/motion.cjs strip page.html --duration <s> renderiza una página que aloja el archivo Lottie/Rive (el modo de reloj
impulsa sus bucles rAF). Verifica el primer y último fotograma, los límites de los segmentos y los colores después de aplicar el tema.
Notas de entrega para diseñadores
- AE -> Lottie: plugin Bodymovin/LottieFiles; soportado: capas de formas, transformaciones, trazados de recorte, máscaras (limitado), texto (preferir contorneado), precomposiciones; evitar rigs pesados de expresiones, efectos, capas 3D, modos de fusión.
- Figma Motion exporta MP4/GIF/SVG/WebM y código (CSS/React/motion.dev) - para Lottie usa Lottie Creator o el plugin LottieFiles. Cavalry exporta Lottie de forma nativa.
- Nombra las capas de manera significativa (se convierten en selectores para temas y depuración); entrega
.lottiecon temas.