Interaktive Vektor-State-Machines in React erstellen
Schritt-für-Schritt-Anleitung zur Erstellung interaktiver Vektor-State-Machines in React mit ExodeUI. Verbinden Sie Klicks und Federphysik ohne Performance-Verlust.
Kernaussage
Um interaktive Vektor-State-Machines in React zu bauen, gestalten Sie Vektoren und Zustände (Ruhezustand, Hover, Aktiv, Erfolg) im visuellen Editor von ExodeUI. Exportieren Sie die .exode Datei, binden Sie das exodeui npm-Paket ein und steuern Sie die ExodeUICanvas-Komponente über deklarative Inputs. Zustandswechsel und Federphysik laufen direkt im Canvas ab, ohne aufwendige Re-Renderings des React-Komponentenbaums zu erzwingen.
Warum State Machines Boolean-Spaghetti in React ablösen
Herkömmliche React-Animationen basieren oft auf vielen useState-Flags (isHovered, isPressed, isLoading). Mit wachsender Interaktionsdichte entstehen unvermeidbare Widersprüche. Eine Finite State Machine (FSM) garantiert, dass sich eine UI-Komponente stets in genau einem wohldefinierten Zustand befindet.
- Deterministische Übergänge: Komponenten wechseln nur in Zustände, die das Regelwerk erlaubt.
- Echte Federphysik: Schnelle Klicks behalten ihren Schwung bei und federn organisch weiter.
- Kein VDOM-Overhead: Grafische Interpolationen laufen im ExodeUI-Canvas ohne unnötige React-Re-Renderings.
Gestaltung der State Machine in ExodeUI
In ExodeUI organisieren Sie Vektoren in Symbolen mit separaten Statusebenen. Sie definieren boolesche, numerische oder Trigger-Eingänge. Übergänge werden mit Steifigkeit (Stiffness), Dämpfung (Damping) und Masse justiert.
- Zustände definieren: Erstellen Sie Ruhezustand, Klick, Aktiv und Fehlerzustände.
- Übergänge verknüpfen: Verbinden Sie Zustände mit logischen Bedingungen.
- Physik feinjustieren: Stellen Sie weiches Nachschwingen oder straffes Einrasten ein.
Verbindung der State Machine mit React-Props
Die Integration in React erfolgt über wenige Zeilen mit dem exodeui Paket. Reichen Sie Zustandsvariablen über die inputs-Prop an den Canvas weiter.
Produktionsnahes Implementierungsbeispiel
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>
);
}