التحكم في مدخلات آلة الحالة ExodeUI من حالة React
دليل عملي لتشغيل ملف ExodeUI في React مع حزمة exodeui: إعداد المدخلات المنطقية والرقمية والمشغلة من حالة React ومعالجة الأحداث.
الوجبات الجاهزة الأساسية
قم بتثبيت الحزمة exodeui، وقم بعرض الملف باستخدام <ExodeUICanvas>، واحصل على المحرك باستخدام الخطاف useExodeUI عن طريق تمرير setEngine إلى onReady. ثم قم باستدعاء setInputBool أو setInputNumber أو fireTrigger من تأثيرات ومعالجات React لتشغيل آلة الحالة، والاستماع إلى الأحداث باستخدام onTrigger. تظل حالة React الخاصة بك هي مصدر الحقيقة؛ الملف يملك الحركة.
النموذج: الكود الخاص بك يمتلك البيانات، والملف يمتلك الحركة
يحتوي ملف ExodeUI على الطبقات والحالات والانتقالات والمدخلات التي يتم التبديل بينها. يقرر مكون React الخاص بك متى تتغير تلك المدخلات، بناءً على حالته الخاصة. يؤدي هذا الانقسام إلى إبقاء كود الرسوم المتحركة خارج مكوناتك ويتيح للمصممين تغيير الحركة دون لمس React.
يثبت
قم بتثبيت وقت التشغيل React مع تثبيت npm exodeui. إذا كنت تستخدم Vite، فأضف exodePlugin() من exodeui/vite-plugin إلى تكوين Vite الخاص بك حتى يمكن استيراد ملفات .exode مباشرة؛ وإلا قم بتمرير عنوان URL إلى الملف باستخدام الخاصية src.
- دعائم ExodeUICanvas: src (URL) أو لوح الرسم (البيانات المستوردة)، والملاءمة، والمحاذاة، والتشغيل التلقائي، وonReady، وonTrigger، وonInputUpdate.
- useExodeUI تقوم بإرجاع setEngine بالإضافة إلى setInputBool وsetInputNumber وsetInputText وsetInputNumberArray وsetInputStringArray وfireTrigger وgetInputValue.
- يجب أن تتطابق أسماء الإدخال مع الأسماء المحددة في الملف.
القيم المنطقية والأرقام والمشغلات
استخدم قيمة منطقية للحالة التي تظل قيد التشغيل، مثل التحميل. استخدم رقمًا للقيم المستمرة، مثل التقدم من 0 إلى 100. استخدم مشغلًا للحظة لمرة واحدة، مثل النجاح، الذي يتم تنشيطه مرة واحدة وإعادة تعيينه. في React، قم بتعيين القيم المنطقية والأرقام في التأثير الذي يعتمد على الحالة، ثم قم بتشغيل المشغلات في المعالج حيث يحدث الحدث.
تعود الأحداث إلى React
يمكن أن تخبر الرسوم المتحركة أيضًا التعليمات البرمجية الخاصة بك بحدوث شيء ما، على سبيل المثال، أنه تم الضغط على زر داخل الملف أو تم الانتهاء من الرسوم المتحركة الناجحة. تعامل مع هذه الأمور باستخدام onTrigger، الذي يتلقى اسم المشغل، واحتفظ بالعمل الحقيقي، مثل استدعاءات واجهة برمجة التطبيقات (API)، في كود React الخاص بك.
الاختبار وإمكانية الوصول
نظرًا لأن الحركة مدفوعة بالمدخلات، يمكنك اختبار جانب React عن طريق التحقق من المدخلات التي تم تعيينها لكل حالة. احتفظ بالأزرار والتسميات الحقيقية في DOM، أو استخدم مكون ExodeSEO، الذي يمكنه إنشاء طبقة HTML مخفية بصريًا لقارئات الشاشة. قم بتمرير قيمة منطقية ذات حركة منخفضة من إعداد نظام المستخدم إذا كان ملفك يحدد واحدًا.
مقتطف من تنفيذ الإنتاج
import { useEffect } from 'react';
import { ExodeUICanvas, useExodeUI } from 'exodeui';
import saveButton from './save-button.exode'; // needs exodePlugin() from 'exodeui/vite-plugin'
export function SaveButton({ saving, progress, justSaved, onSave }) {
const { setEngine, setInputBool, setInputNumber, fireTrigger } = useExodeUI();
// Boolean: a state that stays on while saving
useEffect(() => { setInputBool('Loading', saving); }, [saving, setInputBool]);
// Number: continuous progress, 0 to 100
useEffect(() => { setInputNumber('Progress', progress); }, [progress, setInputNumber]);
// Trigger: a one-off moment
useEffect(() => { if (justSaved) fireTrigger('Success'); }, [justSaved, fireTrigger]);
return (
<div style={{ width: 240, height: 64 }}>
<ExodeUICanvas
artboard={saveButton}
onReady={setEngine}
onTrigger={(name) => { if (name === 'Pressed') onSave(); }}
/>
</div>
);
}مفتاح Principle للتذكر
- التصيير باستخدام ExodeUICanvas وتمرير setEngine من useExodeUI إلى onReady
- القيم المنطقية للحالات المستمرة، وأرقام القيم المستمرة، ومشغلات اللحظات
- تعيين المدخلات من تأثيرات ومعالجات React؛ تظل حالة React مصدر الحقيقة
- تعامل مع الأحداث من الملف باستخدام onTrigger
- احتفظ بمنطق التطبيق في React، والحركة في الملف
الأسئلة المتداولة
المصادر
- exodeui (React runtime) — npm