Migrer de Lottie vers ExodeUI : Des états interactifs sans After Effects
Guide pas à pas pour remplacer les animations passives Lottie par des machines à états interactives dotées de ressorts physiques sous ExodeUI sans After Effects.
À retenir
Migrer de Lottie à ExodeUI remplace des boucles linéaires passives par des machines à états vectorielles et des ressorts physiques interactifs. Importez vos tracés SVG dans ExodeUI, définissez des entrées interactives et remplacez lottie-react par le package officiel exodeui dans votre code source.
Les limites de Lottie dans le design d'interaction moderne
Lottie a popularisé l'animation web en transposant After Effects en JSON. Cependant, les interfaces modernes réclament une véritable réactivité : boutons sensibles à la vitesse du doigt, bascules interrompables et mascottes réactives. Sous Lottie, cette dynamique impose de découper laborieusement des segments (playSegments), créant des transitions saccadées.
- Lecture passive : Les animations Lottie défilent de manière linéaire sans intelligence d'état.
- Dépendance lourde à After Effects : Le moindre ajustement nécessite une licence Adobe et un export Bodymovin.
- Absence de ressorts physiques : Les mouvements sont figés dans des images-clés incapables d'absorber l'élan de l'utilisateur.
Étape 1 : Importer vos vecteurs et bâtir la machine à états
Exportez vos visuels depuis Figma ou Illustrator, ou extrayez les tracés de vos fichiers Lottie existants. Glissez vos SVG dans ExodeUI pour configurer des états et des ressorts physiques au format ouvert .exode.
Étape 2 : Remplacer le package runtime
Dans votre projet, substituez le lecteur Lottie par le composant ExodeUICanvas issu de la bibliothèque exodeui pour piloter vos entrées déclaratives.
Extrait d’implémentation en production
// 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>
);
}