การควบคุมอินพุตเครื่องสถานะ ExodeUI จากสถานะ React
คำแนะนำที่เป็นประโยชน์สำหรับการเล่นไฟล์ ExodeUI ใน React ด้วยแพ็คเกจ exodeui: การตั้งค่าบูลีน ตัวเลข และอินพุตทริกเกอร์จากสถานะ React และการจัดการเหตุการณ์
หลัก Takeaway
ติดตั้งแพ็คเกจ 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 prop
- อุปกรณ์ประกอบฉาก 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>
);
}คีย์ Principles ที่ต้องจำ
- เรนเดอร์ด้วย ExodeUICanvas และส่ง setEngine จาก useExodeUI เป็น onReady
- บูลีนสำหรับสถานะต่อเนื่อง ตัวเลขสำหรับค่าต่อเนื่อง ทริกเกอร์สำหรับช่วงเวลา
- ตั้งค่าอินพุตจากเอฟเฟกต์และตัวจัดการ React สถานะ React ยังคงเป็นแหล่งที่มาของความจริง
- จัดการเหตุการณ์จากไฟล์ด้วย onTrigger
- เก็บตรรกะของแอปไว้ใน React การเคลื่อนไหวในไฟล์
คำถามที่พบบ่อย
แหล่งที่มา
- exodeui (React runtime) — npm