الكتلة Rive10 دقائق قراءة·بواسطة فريق ExodeUI
هندسة واجهة المستخدم لآلة الحالة: الانتقال إلى ما بعد Rive WebAssembly
استكشف بنية واجهة المستخدم الخاصة بجهاز الحالة. كيف يتم نقل أجهزة الحالة المرئية والتخطيط والفيزياء من ملف واحد إلى React وVue والتطبيقات الأصلية.
ملخص وتعريف مباشر
الوجبات الجاهزة الأساسية
في حين كانت Rive رائدة في أجهزة الحالة المرئية المحدودة للرسومات المتجهة التفاعلية، فإن اعتمادها على لوحة WebGL/Skia المعزولة يخلق إمكانية الوصول واختناقات في حجم الحزمة لتطبيقات الويب الخاصة بالإنتاج. تحافظ واجهة مستخدم جهاز الحالة الحديثة على الرسم البياني للحالة المرئية في ملف واحد يقوده التطبيق عبر المدخلات والأحداث.
لماذا حولت آلات الدولة تصميم الحركة؟
قبل أجهزة الحالة، كان منطق التفاعل عبارة عن شبكة فوضوية من المتغيرات المنطقية (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)}
/>
);
}