LanguageTürkçe
Sütun 07 · Nasıl çalışıyor
.exode'ten Uygulamanıza: ExodeUI Dosyaları Nasıl Oluşturulur ve Oynatılır
Tasarımdan üretime kadar tek bir açık dosya. Bir çalışma zamanı onu oynatır, kodunuz onu yönlendirir.
What is .exode'ten Uygulamanıza: in ExodeUI?
ExodeUI, React, Swift veya Flutter kaynak kodunu oluşturmaz. Açık bir .exode JSON dosyasında tasarım yaparsınız; üretim için daha küçük bir .bexode dosyası halinde derlenebilir ve çerçeveniz için bir çalışma zamanı paketi onu tuvalde oynatır. Kodunuz, girişleri ayarlayarak ve olayları dinleyerek onu kontrol eder. ExodeUI yapıyoruz.
Temel mimari
Mühendisler ve tasarımcılar neden ExodeUI seçiyor
Design, logic and motion in one file that runs inside your app.
Kaynak dosyayı aç
.exode dosyası, katmanları, durumları, geçişleri, yayları, girişleri ve olayları tanımlayan JSON'tir. Geliştiriciler bunu okuyabilir ve yapay zeka araçları düzenleyebilir.
Üretim için derlendi
Aynı sahne, uygulamanıza gönderilmek üzere daha küçük bir .bexode dosyasında derlenebilir.
Çerçeve başına çalışma zamanı
React, Vue, Svelte, Angular, Solid, React Native, SwiftUI ve Flutter için çalışma zamanı paketleri dosyayı oynatır.
Kodunuz tarafından kontrol ediliyor
Boole değerlerini, sayıları ve tetikleyicileri uygulama durumundan ayarlayın ve animasyonun geri gönderdiği olayları dinleyin.
Nesnel değerlendirme
ExodeUI şununla nasıl karşılaştırılır: Rebuilding motion by hand
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- Tasarlanan dosya gönderilen dosyadır, dolayısıyla aktarım sırasında hiçbir şey kaybolmaz
- Animasyonla durumlar ve mantık yolculuğu
- Bir dosya sekiz çerçeve çalışma zamanında çalışır
- Girdiler ve olaylar aynı kalırsa tasarımcılar kod değişikliği olmadan zamanlamayı değiştirebilir
Rebuilding motion by hand
- Geliştiriciler her geçişi bir referanstan yeniden oluşturur
- Her tasarım değişikliği başka bir kod değişikliğine ihtiyaç duyar
- Her platform ayrı ayrı yeniden inşa edilir
- Elle yazılan kod tam kontrol sağlar ve fazladan çalışma süresi gerektirmez; bu bazen doğru bir tercihtir
Geliştirmeye devir
Kodunuzda kullanma
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>
);
}Düzenleyici ile uygulamanız arasında ne olur?
Bir ExodeUI bileşeni dört adımdan geçer:
- 1. Tasarım: Tarayıcıda veya masaüstü düzenleyicide katmanlar, durumlar, geçişler, yaylar ve mantık oluşturursunuz. Çalışma açık bir .exode JSON dosyası olarak kaydedilir.
- 2. Derleyin (isteğe bağlı): üretim için sahne daha küçük bir .bexode dosyasına derlenebilir.
- 3. Oynat: çerçeveniz için bir çalışma zamanı paketi dosyayı yükler ve onu bir tuval üzerine çizer.
- 4. Kontrol: kodunuz, Yükleme boole değeri veya Başarı tetikleyicisi gibi girdileri ayarlar ve animasyonun gönderdiği olayları dinler.
Elle yazılan kod daha iyi bir seçim olduğunda
Bir çalışma zamanı her zaman doğru değildir. Tek bir geçiş veya basit bir vurgu için CSS veya Motion gibi bir kitaplık daha hafiftir ve ekstra bir pakete ihtiyaç duymaz. ExodeUI, tasarımcıların düzenlemeye devam etmek istediği çeşitli durumlara, fiziğe veya mantığa sahip bileşenler için en kullanışlıdır.
Topic Cluster Network
İlgili kavramlar ve araçlar
Sorunuz mu var?
Sık sorulan sorular
Gerçek hareketle yaşayan bileşenler oluşturun.
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.