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 →

Принцип 04 · Visual Studio и только код

Альтернатива Framer Motion: Visual Motion Canvas с чистым выводом React

Прекратите кодировать ключевые кадры анимации и параметры пружин методом проб и ошибок в окнах редактора кода. Создавайте визуальный дизайн на живом холсте и воспроизводите один и тот же файл в React и Swift.

What is Альтернатива Framer in ExodeUI?

ExodeUI — визуальная альтернатива Framer Motion для проектных и инженерных групп. В то время как Framer Motion требует от разработчиков создавать сложные варианты анимации, жестов и пружин исключительно с помощью кода JavaScript, ExodeUI предоставляет среду визуального проектирования, в которой дизайнеры создают взаимодействия и экспортируют готовые к производству компоненты React JSX и SwiftUI.

Базовая архитектура

Почему инженеры и дизайнеры выбирают ExodeUI

Design, logic and motion in one file that runs inside your app.

Визуальный вариант и государственный инспектор

Мгновенно просматривайте изменения макета, пружинящие кривые и варианты наведения без перезагрузки браузера или написания объектов JSON.

Core Architecture

Кроссплатформенный собственный экспорт

Framer Motion ограничен React в сети. ExodeUI экспортирует идентичную физику React, React Native, Reanimated и Apple SwiftUI.

Core Architecture

Непрерывная физика жестов

Создавайте сложные границы перетаскивания, скорость броска и магнитную привязку, визуально отображая их на холсте.

Core Architecture

Мультифреймворковая интеграция

Используйте вместе с существующим кодом Motion (Framer Motion): файлы ExodeUI для спроектированных компонентов, код для остальных.

Core Architecture

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

Как ExodeUI сравнивается с Framer Motion (Code Library)

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

The ExodeUI Architecture

ExodeUI

Сильные стороны
  • Создание визуального холста исключает утомительный код методом проб и ошибок.
  • Вывод на React Native и собственный SwiftUI в дополнение к React Web.
  • Дизайнеры и инженеры совместно работают над одним файлом визуального движения.
  • Легкость и возможность экспорта кода с нулевой зависимостью.
Compared with

Framer Motion (Code Library)

Trade-offs
  • Нет визуального холста для разработки: разработчикам приходится писать код с нуля
  • Конструкторы не могут проверять или корректировать кривые пружин без помощи инженеров.
  • Только для Web React: невозможно экспортировать в родной iOS SwiftUI или Android Compose.
  • Требуется большой размер пакета при объединении проекционных механизмов полной компоновки.

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

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

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>
  );
}

Почему разработчики Framer Motion любят ExodeUI

Framer Motion — это выдающаяся библиотека анимации на уровне кода для разработчиков React. Однако создание сложных движений полностью в коде имеет один существенный недостаток: вы не можете видеть анимацию во время написания кода. Разработчикам приходится корректировать значения жесткости и демпфирования, перезагружать браузер, тестировать взаимодействие и повторять десятки раз.

  • Метод проб и ошибок. Настройка физических параметров в коде требует многих часов ручных экспериментов.
  • Кроссплатформенная пустота: Framer Motion нельзя использовать в собственных приложениях iOS SwiftUI или Android.
  • Отключение дизайнеров: дизайнеры не могут изменять код Framer Motion напрямую, что приводит к бесконечным встречам по проверке.

Topic Cluster Network

Связанные понятия и инструменты

Остались вопросы?

Частые вопросы

Создавайте живые компоненты с настоящим движением.

Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.

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