Languageहिन्दी
स्तंभ 07 · यह कैसे चलता है
.exode से आपके ऐप तक: ExodeUI फ़ाइलें कैसे बनाई और चलाई जाती हैं
डिज़ाइन से उत्पादन तक एक खुली फ़ाइल। एक रनटाइम इसे चलाता है, आपका कोड इसे चलाता है।
What is .exode से in ExodeUI?
ExodeUI React, स्विफ्ट या 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 या मोशन जैसी लाइब्रेरी हल्की है और किसी अतिरिक्त पैकेज की आवश्यकता नहीं है। 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.