State Machine UI architektúra: Moving Beyond Rive WebAssembly
Fedezze fel az állapotgép UI architektúráját. Hogyan jutnak el a vizuális állapotgépek, az elrendezés és a fizika egyetlen fájlból a React, Vue és natív alkalmazásokba.
Core Takeaway
Míg a Rive úttörő volt a vizuális véges állapotú gépeknél az interaktív vektorgrafikákhoz, az elszigetelt WebGL/Skia vászonra való támaszkodása akadályozza a hozzáférést és a csomagméret szűk keresztmetszeteit az éles webalkalmazások számára. A modern állapotgép felhasználói felülete egyetlen fájlban tartja a vizuális állapotgrafikont, amelyet az alkalmazás bemeneteken és eseményeken keresztül hajt meg.
Miért alakították át az államgépek a mozgástervezést?
Az állapotgépek előtt az interakciós logika logikai változók (isHovered, isClicked, isExpanded, isError) kaotikus hálója volt. Az állapotgépek formális matematikai egyértelműséget biztosítanak: egy komponens meghatározott állapotokkal, diszkrét átmenetekkel és determinisztikus triggerekkel rendelkezik.
Gyártási megvalósítási részlet
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)}
/>
);
}