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 →

Filar 04 · Visual Studio a tylko kod

Alternatywa Framer Motion: płótno wizualne z czystym wyjściem React

Zatrzymaj kodowanie klatek kluczowych animacji i parametrów sprężyny metodą prób i błędów w oknach edytora kodu. Projektuj wizualnie na żywym płótnie i odtwarzaj ten sam plik w React i Swift.

What is Alternatywa Framer in ExodeUI?

ExodeUI to wizualna alternatywa dla Framer Motion dla zespołów projektowych i inżynieryjnych. Podczas gdy Framer Motion wymaga od programistów tworzenia złożonych wariantów animacji, gestów i sprężyn całkowicie za pomocą kodu JavaScript, ExodeUI zapewnia środowisko projektowania wizualnego, w którym projektanci tworzą interakcje i eksportują gotowe do produkcji komponenty React JSX i SwiftUI.

Architektura rdzenia

Dlaczego inżynierowie i projektanci wybierają ExodeUI

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

Inspektor ds. wariantów wizualnych i stanu

Natychmiast przeglądaj podgląd zmian układu, krzywizn sprężystych i wariantów najechania kursorem, bez konieczności ponownego ładowania przeglądarki lub pisania obiektów JSON.

Core Architecture

Eksport natywny między platformami

Framer Motion jest ograniczony do React w Internecie. ExodeUI eksportuje identyczną fizykę do React, React Native Reanimated i Apple SwiftUI.

Core Architecture

Ciągła fizyka gestów

Autor skomplikowanych ograniczeń przeciągania, prędkości rzucania i przyciągania magnetycznego wizualnie na płótnie.

Core Architecture

Integracja wielu platform

Używaj razem z istniejącym kodem Motion (Framer Motion): pliki ExodeUI dla zaprojektowanych komponentów, kod dla reszty.

Core Architecture

Obiektywna ocena

Jak ExodeUI porównuje się z Framer Motion (Code Library)

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

The ExodeUI Architecture

ExodeUI

Mocne strony
  • Tworzenie kanw wizualnych eliminuje żmudne próby i błędy kodu
  • Wyjścia do React Native i natywnego SwiftUI oprócz React Web
  • Projektanci i inżynierowie współpracują nad tym samym plikiem ruchu wizualnego
  • Lekka konstrukcja z opcjami eksportu kodu o zerowej zależności
Compared with

Framer Motion (Code Library)

Trade-offs
  • Brak kanwy do tworzenia wizualizacji: programiści muszą pisać kod od zera
  • Projektanci nie mogą sprawdzać ani regulować krzywizn sprężyn bez pomocy inżyniera
  • Tylko Web React: nie można eksportować do natywnego iOS SwiftUI ani Android Compose
  • Wymaga dużego rozmiaru pakietu w przypadku łączenia silników projekcji pełnego układu

Przekazanie dewelopera

Używanie go w swoim kodzie

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

Dlaczego programiści Framer Motion uwielbiają ExodeUI

Framer Motion to wyjątkowa biblioteka animacji na poziomie kodu dla programistów React. Jednak tworzenie złożonych ruchów w całości w kodzie wiąże się z poważnym problemem: podczas pisania kodu nie można zobaczyć animacji. Programiści muszą dostosować wartości sztywności i tłumienia, ponownie załadować przeglądarkę, przetestować interakcję i powtórzyć dziesiątki razy.

  • Metoda prób i błędów: poprawianie parametrów fizycznych w kodzie wymaga godzin ręcznych eksperymentów.
  • Pustka międzyplatformowa: Framer Motion nie można używać w natywnych aplikacjach iOS SwiftUI lub Android.
  • Rozłączenie projektanta: projektanci nie mogą bezpośrednio modyfikować kodu Framer Motion, co prowadzi do niekończących się spotkań przeglądowych.

Topic Cluster Network

Poznaj połączone koncepcje i narzędzia

Masz pytania?

Często zadawane pytania

Buduj żywe komponenty za pomocą prawdziwego ruchu.

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

Wypróbuj za darmo