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 →

Pilier 04 · Visual Studio vs iba kód

Alternatíva Framer Motion: Visual Motion Canvas s čistým výstupom React

Zastavte kódovanie kľúčových snímok animácie a pružinových parametrov metódou pokus-omyl v oknách editora kódu. Navrhnite vizuálne na živom plátne a prehrajte rovnaký súbor v React a Swift.

What is Alternatíva Framer in ExodeUI?

ExodeUI je vizuálna alternatíva k Framer Motion pre dizajnérske a inžinierske tímy. Zatiaľ čo Framer Motion vyžaduje, aby vývojári tvorili komplexné varianty animácií, gest a pružín výhradne prostredníctvom kódu JavaScript, ExodeUI poskytuje prostredie vizuálneho dizajnu, kde dizajnéri vytvárajú interakcie a exportujú komponenty React JSX a SwiftUI pripravené na výrobu.

Základná architektúra

Prečo si inžinieri a dizajnéri vyberajú ExodeUI

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

Vizuálny variant a štátny inšpektor

Okamžite si zobrazte ukážky posunov rozloženia, pružiacich kriviek a variantov vznášania bez opätovného načítania prehliadača alebo zapisovania objektov JSON.

Core Architecture

Natívny export naprieč platformami

Framer Motion je na webe obmedzené na React. ExodeUI exportuje identickú fyziku do React, React Native Reanimated a Apple SwiftUI.

Core Architecture

Fyzika súvislých gest

Vizuálne vytvorte na plátne komplexné hranice ťahu, rýchlosť odletu a magnetické zachytenie.

Core Architecture

Integrácia viacerých rámcov

Použite spolu s existujúcim kódom Motion (Framer Motion): súbory ExodeUI pre navrhnuté komponenty, kód pre zvyšok.

Core Architecture

Objektívne hodnotenie

Ako ExodeUI v porovnaní s Framer Motion (Code Library)

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

The ExodeUI Architecture

ExodeUI

Silné stránky
  • Tvorba vizuálneho plátna eliminuje únavné pokusy a omyly kódu
  • Výstupy do React Native a natívneho SwiftUI okrem React Web
  • Dizajnéri a inžinieri spolupracujú na rovnakom súbore vizuálneho pohybu
  • Ľahký pôdorys s možnosťami exportu kódu s nulovou závislosťou
Compared with

Framer Motion (Code Library)

Trade-offs
  • Žiadne vizuálne autorské plátno: vývojári musia písať kód od začiatku
  • Dizajnéri nemôžu kontrolovať alebo upravovať krivky pružín bez technickej pomoci
  • Len web React: nemožno exportovať do natívneho systému iOS SwiftUI alebo Android Compose
  • Vyžaduje veľkú veľkosť balíka pri spájaní projekčných modulov s úplným rozložením

Developer Handoff

Použitie vo vašom kóde

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

Prečo vývojári Framer Motion milujú ExodeUI

Framer Motion je vynikajúca knižnica animácií na úrovni kódu pre vývojárov React. Tvorba komplexného pohybu úplne v kóde však trpí veľkým problémom: počas písania kódu nevidíte animáciu. Vývojári musia upraviť hodnoty tuhosti a tlmenia, znova načítať prehliadač, otestovať interakciu a opakovať desiatky krát.

  • Trenie typu pokus-chyba: Vylepšovanie fyzikálnych parametrov v kóde trvá hodiny manuálneho experimentovania.
  • Void medzi platformami: Framer Motion nie je možné použiť v natívnych aplikáciách iOS SwiftUI alebo Android.
  • Odpojenie dizajnéra: Dizajnéri nemôžu priamo upravovať kód Framer Motion, čo vedie k nekonečným kontrolným stretnutiam.

Topic Cluster Network

Preskúmajte prepojené koncepty a nástroje

Máte otázky?

Často kladené otázky

Zostavte živé komponenty skutočným pohybom.

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

Vyskúšajte zadarmo