Architektura interfejsu użytkownika maszyny stanowej: wyjście poza zestaw WebAssembly Rive
Poznaj architekturę interfejsu użytkownika maszyny stanowej. Jak maszyny stanu wizualnego, układ i fizyka są przesyłane z jednego pliku do React, Vue i aplikacji natywnych.
Rdzeń na wynos
Chociaż Rive jest pionierem wizualnych maszyn skończonych dla interaktywnej grafiki wektorowej, jego poleganie na izolowanym kanwie WebGL/Skia stwarza wąskie gardła w zakresie dostępności i rozmiaru pakietu dla produkcyjnych aplikacji internetowych. Nowoczesny interfejs użytkownika maszyny stanowej przechowuje wykres stanu wizualnego w jednym pliku, który aplikacja obsługuje poprzez dane wejściowe i zdarzenia.
Dlaczego maszyny stanowe zmieniły projektowanie ruchu
Przed maszynami stanów logika interakcji była chaotyczną siecią zmiennych logicznych (isHovered, isClicked, isExpanded, isError). Maszyny stanowe zapewniają formalną matematyczną przejrzystość: komponent ma zdefiniowane stany, dyskretne przejścia i deterministyczne wyzwalacze.
Fragment wdrożenia produkcyjnego
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)}
/>
);
}