คลัสเตอร์ Riveอ่าน 10 นาที·โดยทีม ExodeUI
สถาปัตยกรรม UI ของเครื่องสถานะ: ก้าวไปไกลกว่า Rive WebAssembly
สำรวจสถาปัตยกรรม UI ของเครื่องสถานะ วิธีที่เครื่องแสดงสถานะภาพ เลย์เอาต์ และฟิสิกส์ส่งจากไฟล์เดียวไปยัง React, Vue และแอปเนทีฟ
สรุปโดยตรงและคำจำกัดความ
หลัก Takeaway
ในขณะที่ Rive บุกเบิกเครื่องสถานะจำกัดการมองเห็นสำหรับกราฟิกเวกเตอร์เชิงโต้ตอบ การพึ่งพาผ้าใบ WebGL/Skia ที่แยกออกมาทำให้เกิดการเข้าถึงและปัญหาคอขวดของขนาดมัดสำหรับเว็บแอปที่ใช้งานจริง UI ของเครื่องสถานะสมัยใหม่เก็บกราฟสถานะภาพไว้ในไฟล์เดียวที่แอปขับเคลื่อนผ่านอินพุตและเหตุการณ์
เหตุใด State Machines จึงเปลี่ยนการออกแบบการเคลื่อนไหว
ก่อนเครื่องสถานะ ตรรกะการโต้ตอบเป็นเว็บที่วุ่นวายของตัวแปรบูลีน (isHovered, isClicked, isExpanded, isError) สเตทแมชชีนให้ความชัดเจนทางคณิตศาสตร์อย่างเป็นทางการ: ส่วนประกอบได้กำหนดสถานะ การเปลี่ยนแบบไม่ต่อเนื่อง และทริกเกอร์ที่กำหนด
ตัวอย่างการใช้งานการผลิต
การใช้งานส่วนประกอบแบบโต้ตอบ
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)}
/>
);
}