Cómo crear máquinas de estados vectoriales interactivas en React
Tutorial paso a paso para construir máquinas de estados vectoriales en React con ExodeUI. Conecta eventos de ratón, entradas y físicas de muelles sin re-renders.
Idea clave
Para construir máquinas de estados vectoriales interactivas en React, diseña tus vectores y estados (Reposo, Hover, Activo, Éxito) en el editor visual de ExodeUI. Exporta el archivo .exode, instala el paquete npm exodeui y renderiza el componente ExodeUICanvas con entradas declarativas. Las transiciones y físicas de muelles se ejecutan de forma nativa en el canvas sin provocar re-renders pesados en el árbol de componentes de React.
Por qué las máquinas de estados superan al código espagueti con booleanos
Las animaciones tradicionales en React suelen depender de múltiples banderas de useState (isHovered, isPressed, isLoading). Conforme aumentan los estados, las combinaciones incompatibles causan errores visuales. Una máquina de estados finitos (FSM) garantiza que el componente esté exactamente en un estado válido a la vez.
- Transiciones deterministas: El componente solo transita a estados permitidos por su configuración.
- Físicas de muelles integradas: Las transiciones conservan la velocidad previa para una respuesta táctil natural.
- Cero impacto en el VDOM: La interpolación gráfica corre dentro del canvas de ExodeUI sin re-renderizar React.
Diseño de la máquina de estados en ExodeUI
En ExodeUI agrupas capas vectoriales en símbolos y configuras capas de estados. Defines entradas booleanas, numéricas o disparadores. Las transiciones se parametrizan con rigidez (stiffness), amortiguación (damping) y masa.
- Crea estados: Define Reposo, Presionado, Activo y Error.
- Conecta transiciones: Vincula estados con reglas de entrada condicionales.
- Configura físicas: Ajusta el rebote táctil en tiempo real.
Conexión de la máquina de estados con props de React
Integrar el componente en React requiere pocas líneas de código gracias al paquete oficial exodeui. Pasa variables de estado a la prop inputs y escucha eventos mediante callbacks.
Fragmento de implementación en producción
import React, { useState } from 'react';
import { ExodeUICanvas } from 'exodeui';
export function InteractiveToggle() {
const [enabled, setEnabled] = useState(false);
return (
<div className="flex items-center gap-3 p-4 bg-neutral-900 rounded-xl">
<ExodeUICanvas
src="/assets/toggle_machine.exode"
inputs={{ active: enabled }}
onEvent={(event) => {
if (event === 'click') setEnabled((prev) => !prev);
}}
style={{ width: 64, height: 36 }}
/>
<span className="text-white font-medium">
{enabled ? 'Active State' : 'Idle State'}
</span>
</div>
);
}