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

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
  • Разработчики воссоздают каждый переход по эталону.
  • Каждое изменение дизайна требует еще одного изменения кода.
  • Каждая платформа перестраивается отдельно
  • Написанный вручную код дает полный контроль и не требует дополнительного времени выполнения, что иногда является правильным компромиссом.

Передача разработке

Как использовать в коде

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.

Попробовать бесплатно