Architettura dell'interfaccia utente della macchina a stati: andare oltre Rive WebAssembly
Esplora l'architettura dell'interfaccia utente della macchina a stati. Come le macchine a stati visivi, il layout e la fisica vengono spediti da un file in React, Vue e nelle app native.
Punto chiave
Sebbene Rive sia stato il pioniere delle macchine visive a stati finiti per la grafica vettoriale interattiva, la sua dipendenza da un canvas WebGL/Skia isolato crea colli di bottiglia in termini di accessibilità e dimensioni del bundle per le app Web di produzione. La moderna interfaccia utente della macchina a stati mantiene il grafico dello stato visivo in un unico file che l'app guida attraverso input ed eventi.
Perché le macchine a stati hanno trasformato il motion design
Prima delle macchine a stati, la logica di interazione era una rete caotica di variabili booleane (isHovered, isClicked, isExpanded, isError). Le macchine a stati forniscono chiarezza matematica formale: un componente ha stati definiti, transizioni discrete e trigger deterministici.
Estratto di implementazione in produzione
import { ExodeUICanvas } from 'exodeui';
// Springs, states and timing live in the .exode file (designed in the
// editor). Your code passes inputs in and hears events back.
export function CheckoutButton() {
return (
<ExodeUICanvas
src="/checkout.bexode"
onTrigger={(name) => console.log('ExodeUI event:', name)}
/>
);
}