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 الذي يصف الطبقات والحالات والانتقالات والينابيع والمدخلات والأحداث. يمكن للمطورين قراءتها ويمكن لأدوات الذكاء الاصطناعي تحريرها.
تم تجميعها للإنتاج
يمكن تجميع نفس المشهد في ملف .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.