Skip to main content
ExodeUI

EXODEUI DESKTOP

A little space for good ideas.

Choose your platform to get the official ExodeUI installer.

Looking for Intel Mac or other builds? Explore the web studio or check all download options.

Prefer the browser? Try for free in your browser →

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.

Core Architecture

Üretim için derlendi

Aynı sahne, uygulamanıza gönderilmek üzere daha küçük bir .bexode dosyasında derlenebilir.

Core Architecture

Ç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.

Core Architecture

Kodunuz tarafından kontrol ediliyor

Boole değerlerini, sayıları ve tetikleyicileri uygulama durumundan ayarlayın ve animasyonun geri gönderdiği olayları dinleyin.

Core Architecture

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.

The ExodeUI Architecture

ExodeUI

Güçlü yanları
  • 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
Compared with

Rebuilding motion by hand

Trade-offs
  • 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.

Ücretsiz dene