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 →

Стълб 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, който описва слоеве, състояния, преходи, пружини, входове и събития. Разработчиците могат да го четат, а AI инструментите могат да го редактират.

Core Architecture

Компилиран за производство

Същата сцена може да бъде компилирана в по-малък .bexode файл, който да бъде изпратен във вашето приложение.

Core Architecture

Време за изпълнение на рамка

Пакетите за изпълнение за React, Vue, Svelte, Angular, Solid, React Native, SwiftUI и Flutter възпроизвеждат файла.

Core Architecture

Управлява се от вашия код

Задайте булеви стойности, числа и тригери от състоянието на приложението и слушайте за събития, които анимацията изпраща обратно.

Core Architecture

Обективна оценка

Как ExodeUI се сравнява с Rebuilding motion by hand

Where ExodeUI is stronger, and what to weigh before you switch.

The ExodeUI Architecture

ExodeUI

Силни страни
  • Проектираният файл е изпратеният файл, така че нищо не се губи при предаване
  • Състояния и логически пътувания с анимацията
  • Един файл работи в осем работни среди на рамка
  • Дизайнерите могат да променят времето без промяна на кода, ако входовете и събитията останат същите
Compared with

Rebuilding motion by hand

Trade-offs
  • Разработчиците пресъздават всеки преход от справка
  • Всяка промяна на дизайна изисква друга промяна на кода
  • Всяка платформа се преустройва отделно
  • Ръчно написаният код дава пълен контрол и без допълнително време за изпълнение, което понякога е правилният компромис

Разработчик 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. Компилиране (по избор): за производство, сцената може да бъде компилирана в по-малък .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.

Опитайте безплатно