Von Lottie zu ExodeUI migrieren: Interaktive Zustände ohne After Effects
Schritt-für-Schritt-Anleitung zur Migration von passiven Lottie-Animationen zu interaktiven ExodeUI State Machines mit Federphysik ohne After Effects.
Kernaussage
Die Migration von Lottie zu ExodeUI ersetzt passive Zeitleistenschleifen durch interaktive Vektor-State-Machines und physikalische Federn. Importieren Sie bestehende SVG-Vektoren in den ExodeUI-Editor, definieren Sie Eingaben und tauschen Sie lottie-react gegen das offizielle exodeui Paket in Ihrem Frontend aus.
Die Grenzen von Lottie in modernen Benutzeroberflächen
Lottie revolutionierte die Webanimation durch das Abspielen von After-Effects-Zeitleisten über JSON. Moderne UIs verlangen jedoch echte Zwei-Wege-Interaktivität: Buttons, die auf Wischgeschwindigkeiten reagieren, und Schalter, die mitten im Flug umkehren. In Lottie erfordert dies unflexibles Abspielen von Segmenten (playSegments), was zu harten Sprüngen führt.
- Passive Wiedergabe: Lottie-Dateien laufen starr von Frame 0 bis N ohne interne Logik.
- Abhängigkeit von After Effects: Jede Designanpassung erfordert eine teure Adobe-Lizenz und manuellen Export.
- Keine Federphysik: Bewegungen sind auf starre Keyframes fixiert und können Schwung nicht auffangen.
Schritt 1: Vektoren importieren und State Machine einrichten
Exportieren Sie Vektoren aus Figma oder extrahieren Sie Formen aus Ihren Lottie-Dateien. Ziehen Sie das SVG in ExodeUI und konfigurieren Sie interaktive Zustände mit Federphysik im offenen .exode Format.
Schritt 2: Runtime-Paket im Frontend ersetzen
Ersetzen Sie in Ihrem Webprojekt die bisherige Lottie-Komponente durch ExodeUICanvas aus dem exodeui Paket, um interaktive Steuerung zu aktivieren.
Produktionsnahes Implementierungsbeispiel
// BEFORE: Rigid Lottie timeline
// import Lottie from 'lottie-react';
// <Lottie animationData={likeAnim} loop={false} />
// AFTER: Interactive ExodeUI State Machine
import React, { useState } from 'react';
import { ExodeUICanvas } from 'exodeui';
export function LikeButton() {
const [liked, setLiked] = useState(false);
return (
<button
onClick={() => setLiked(!liked)}
className="p-2 rounded-full hover:bg-neutral-800 transition"
aria-label={liked ? 'Unlike' : 'Like'}
>
<ExodeUICanvas
src="/assets/like_button.exode"
inputs={{ isLiked: liked }}
style={{ width: 32, height: 32 }}
/>
</button>
);
}