LanguageΕλληνικά
Pillar 07 · Πώς λειτουργεί
Από το .exode στην εφαρμογή σας: Πώς δημιουργούνται και παίζονται τα αρχεία ExodeUI
Ένα ανοιχτό αρχείο από το σχεδιασμό μέχρι την παραγωγή. Ένας χρόνος εκτέλεσης το παίζει, ο κώδικάς σας το οδηγεί.
What is Από το 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 αναπαράγουν το αρχείο.
Ελέγχεται από τον κωδικό σας
Ορίστε booleans, αριθμούς και ενεργοποιητές από την κατάσταση της εφαρμογής και ακούστε τα συμβάντα που στέλνει η κινούμενη εικόνα.
Αντικειμενική Αξιολόγηση
Πώς συγκρίνεται το ExodeUI με Rebuilding motion by hand
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- Το αρχείο που σχεδιάστηκε είναι το αρχείο που έχει αποσταλεί, επομένως τίποτα δεν χάνεται κατά την παράδοση
- Οι καταστάσεις και η λογική ταξιδεύουν με το animation
- Ένα αρχείο λειτουργεί σε οκτώ χρόνους εκτέλεσης πλαισίου
- Οι σχεδιαστές μπορούν να αλλάξουν το χρόνο χωρίς αλλαγή κώδικα, εάν οι είσοδοι και τα συμβάντα παραμένουν ίδια
Rebuilding motion by hand
- Οι προγραμματιστές αναδημιουργούν κάθε μετάβαση από μια αναφορά
- Κάθε αλλαγή σχεδιασμού χρειάζεται άλλη αλλαγή κώδικα
- Κάθε πλατφόρμα ανακατασκευάζεται ξεχωριστά
- Ο χειρόγραφος κώδικας παρέχει πλήρη έλεγχο και χωρίς επιπλέον χρόνο εκτέλεσης, κάτι που μερικές φορές είναι ο σωστός συμβιβασμός
Προγραμματιστής Handoff
Χρησιμοποιώντας το στον Κώδικά σας
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. Compile (προαιρετικό): για παραγωγή, η σκηνή μπορεί να μεταγλωττιστεί σε μικρότερο αρχείο .bexode.
- 3. Παίξτε: ένα πακέτο χρόνου εκτέλεσης για το πλαίσιο σας φορτώνει το αρχείο και το σχεδιάζει σε καμβά.
- 4. Έλεγχος: ο κώδικάς σας ορίζει εισόδους, όπως έναν Boolean Loading ή έναν κανόνα Success, και ακούει τα συμβάντα που στέλνει η κινούμενη εικόνα.
Όταν ο χειρόγραφος κώδικας είναι η καλύτερη επιλογή
Ο χρόνος εκτέλεσης δεν είναι πάντα σωστός. Για ένα μόνο fade ή ένα απλό hover, το 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.