Languageไทย
เสาหลัก 07 · มันวิ่งอย่างไร
จาก .exode สู่แอปของคุณ: วิธีสร้างและเล่นไฟล์ ExodeUI
ไฟล์เดียวที่เปิดตั้งแต่การออกแบบจนถึงการผลิต รันไทม์เล่นโค้ดของคุณขับเคลื่อนมัน
What is จาก .exode in ExodeUI?
ExodeUI ไม่ได้สร้างซอร์สโค้ด React, Swift หรือ Flutter คุณออกแบบในไฟล์ .exode JSON แบบเปิด สำหรับการใช้งานจริงสามารถคอมไพล์เป็นไฟล์ .bexode ที่เล็กกว่าได้ และแพ็คเกจรันไทม์สำหรับเฟรมเวิร์กของคุณจะแสดงบนแคนวาส รหัสของคุณควบคุมโดยการตั้งค่าอินพุตและฟังเหตุการณ์ เราทำ ExodeUI
สถาปัตยกรรมหลัก
เหตุใดวิศวกรและนักออกแบบจึงเลือก ExodeUI
Design, logic and motion in one file that runs inside your app.
ไฟล์โอเพ่นซอร์ส
ไฟล์ .exode คือ JSON ที่อธิบายเลเยอร์ สถานะ การเปลี่ยนภาพ สปริง อินพุต และเหตุการณ์ นักพัฒนาสามารถอ่านได้และเครื่องมือ AI ก็สามารถแก้ไขได้
เรียบเรียงเพื่อการผลิต
ฉากเดียวกันสามารถรวบรวมเป็นไฟล์ .bexode ขนาดเล็กเพื่อจัดส่งในแอปของคุณได้
รันไทม์ต่อเฟรมเวิร์ก
แพ็กเกจรันไทม์สำหรับ React, Vue, Svelte, Angular, Solid, React Native, SwiftUI และ Flutter จะเล่นไฟล์
ควบคุมโดยรหัสของคุณ
ตั้งค่าบูลีน ตัวเลข และทริกเกอร์จากสถานะแอป และฟังเหตุการณ์ที่แอนิเมชันส่งกลับ
การประเมินวัตถุประสงค์
ExodeUI เปรียบเทียบกับอย่างไร Rebuilding motion by hand
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- ไฟล์ที่ออกแบบเป็นไฟล์ที่จัดส่ง ดังนั้นจึงไม่มีอะไรสูญหายไปในการแฮนด์ออฟ
- รัฐและตรรกะเดินทางไปพร้อมกับแอนิเมชั่น
- ไฟล์หนึ่งไฟล์ใช้งานได้กับรันไทม์ของเฟรมเวิร์กทั้งแปด
- นักออกแบบสามารถเปลี่ยนเวลาได้โดยไม่ต้องเปลี่ยนโค้ด หากอินพุตและเหตุการณ์ยังคงเหมือนเดิม
Rebuilding motion by hand
- นักพัฒนาสร้างการเปลี่ยนแปลงแต่ละครั้งจากข้อมูลอ้างอิง
- การเปลี่ยนแปลงการออกแบบทุกครั้งจำเป็นต้องเปลี่ยนโค้ดอีกครั้ง
- แต่ละแพลตฟอร์มถูกสร้างขึ้นใหม่แยกกัน
- โค้ดที่เขียนด้วยลายมือให้การควบคุมเต็มรูปแบบและไม่ต้องรันไทม์เพิ่มเติม ซึ่งบางครั้งก็เป็นการแลกเปลี่ยนที่ถูกต้อง
นักพัฒนาแฮนด์ออฟ
ใช้ในรหัสของคุณ
Your app loads the compiled file through the ExodeUI runtime and talks to it through inputs and events.
// Playing an ExodeUI file in React with the exodeui package.
// The animation, its states and springs live in save-button.exode;
// your code only sets inputs and listens for events.
import { useEffect } from 'react';
import { ExodeUICanvas, useExodeUI } from 'exodeui';
import saveButton from './save-button.exode'; // read by exodePlugin() from 'exodeui/vite-plugin'
export function SaveButton({ saving, onSave }) {
const { setEngine, setInputBool } = useExodeUI();
// Drive the "Loading" state from app data
useEffect(() => {
setInputBool('Loading', saving);
}, [saving, setInputBool]);
return (
<div style={{ width: 220, height: 64 }}>
<ExodeUICanvas
artboard={saveButton}
onReady={setEngine}
onTrigger={(name) => {
if (name === 'Pressed') onSave();
}}
/>
</div>
);
}จะเกิดอะไรขึ้นระหว่างตัวแก้ไขและแอปของคุณ
ส่วนประกอบ ExodeUI ต้องผ่านสี่ขั้นตอน:
- 1. การออกแบบ: คุณสร้างเลเยอร์ สถานะ การเปลี่ยนภาพ สปริง และตรรกะในเบราว์เซอร์หรือโปรแกรมแก้ไขเดสก์ท็อป งานจะถูกบันทึกเป็นไฟล์ .exode JSON ที่เปิดอยู่
- 2. คอมไพล์ (เป็นทางเลือก): สำหรับการผลิต ฉากสามารถคอมไพล์เป็นไฟล์ .bexode ที่เล็กกว่าได้
- 3. เล่น: แพ็คเกจรันไทม์สำหรับเฟรมเวิร์กของคุณจะโหลดไฟล์และวาดลงบนผืนผ้าใบ
- 4. การควบคุม: อินพุตชุดโค้ดของคุณ เช่น บูลีนการโหลดหรือทริกเกอร์ความสำเร็จ และคอยฟังเหตุการณ์ที่แอนิเมชั่นส่ง
เมื่อโค้ดที่เขียนด้วยลายมือเป็นทางเลือกที่ดีกว่า
รันไทม์ไม่ถูกต้องเสมอไป สำหรับเฟดเดียวหรือโฮเวอร์ธรรมดา CSS หรือไลบรารี เช่น Motion จะเบากว่าและไม่จำเป็นต้องมีแพ็คเกจเพิ่มเติม ExodeUI มีประโยชน์มากที่สุดสำหรับส่วนประกอบที่มีสถานะ ฟิสิกส์ หรือตรรกะหลายแบบที่นักออกแบบต้องการแก้ไขต่อไป
Topic Cluster Network
สำรวจแนวคิดและเครื่องมือที่เชื่อมต่อกัน
มีคำถามใช่ไหม?
คำถามที่พบบ่อย
สร้างส่วนประกอบที่มีชีวิตด้วยการเคลื่อนไหวจริง
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.