Migrar de Lottie a ExodeUI: Estados interactivos sin After Effects
Guía paso a paso para migrar animaciones pasivas Lottie a máquinas de estados interactivas con físicas de muelles en ExodeUI sin depender de After Effects.
Idea clave
Migrar de Lottie a ExodeUI sustituye bucles lineales pasivos por máquinas de estados vectoriales y físicas de muelles en tiempo real. Importa tus capas SVG existentes en el editor de ExodeUI, define entradas interactivas (booleanos, números, triggers) y sustituye lottie-react por el paquete oficial exodeui en tu código frontend.
Las limitaciones de Lottie en el diseño interactivo moderno
Lottie transformó la animación web al renderizar cronogramas de After Effects mediante JSON. Sin embargo, las interfaces modernas exigen reactividad bidireccional: botones que reaccionan a la velocidad del arrastre o interruptores reversibles en pleno vuelo. En Lottie, esto requiere reproducir fragmentos rígidos con playSegments, generando cortes abruptos.
- Reproducción pasiva: Los archivos Lottie se reproducen linealmente sin lógica interna de decisión.
- Flujo dependiente de After Effects: Cada cambio requiere licencias de Adobe, exportación con Bodymovin y traspaso manual.
- Sin físicas de muelles: Los movimientos están congelados en fotogramas clave incapaces de absorber inercia táctil.
Paso 1: Importar vectores y configurar la máquina de estados
Exporta tus gráficos vectoriales desde Figma o Illustrator, o extrae las formas de tu archivo Lottie JSON actual. Arrastra el SVG directamente a ExodeUI. Organiza las capas en símbolos y configura estados con transiciones elásticas en un archivo abierto .exode.
Paso 2: Sustituir el paquete de runtime en tu código
En tu proyecto, reemplaza el reproductor de Lottie por el componente ExodeUICanvas del paquete exodeui, pasando entradas declarativas y controlando eventos con facilidad.
Fragmento de implementación en producción
// 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>
);
}