Comment concevoir des machines à états vectorielles interactives sous React
Guide complet pour créer des machines à états vectorielles sous React avec ExodeUI. Intégrez événements tactiles et physiques de ressorts sans ralentir le rendu.
À retenir
Pour concevoir des machines à états vectorielles interactives en React, créez vos graphismes et déclarez vos états (Repos, Survol, Actif, Succès) dans l'éditeur ExodeUI. Exportez le fichier .exode, installez le package npm exodeui et intégrez le composant ExodeUICanvas avec des entrées déclaratives. Les transitions et ressorts physiques s'exécutent directement dans le canvas sans déclencher de re-rendus React superflus.
Pourquoi les machines à états surpassent les variables booléennes en React
Les animations React classiques reposent souvent sur une multiplication d'états useState (isHovered, isPressed, isLoading). Lorsque les états se multiplient, des états conflictuels apparaissent inévitablement. Une machine à états finis garantit qu'un composant n'occupe qu'un seul état valide à la fois.
- Transitions déterministes : Le composant ne peut basculer que vers des états prévus par sa logique.
- Ressorts physiques intégrés : Les transitions conservent la vitesse initiale pour un retour naturel lors d'un clic interrompu.
- Aucun impact sur le VDOM : L'interpolation graphique s'exécute dans la boucle du canvas sans solliciter React.
Conception de la machine à états dans ExodeUI
Dans ExodeUI, vos tracés vectoriels sont regroupés en symboles avec des couches d'états dédiées. Vous définissez des entrées booléennes, numériques ou des déclencheurs. Les transitions se paramètrent avec raideur (stiffness), amorti (damping) et masse.
- Définissez vos états : Repos, Clic, Actif et Erreur.
- Reliez les transitions : Ajoutez des conditions d'activation logiques.
- Calibrez la physique : Ajustez le rebond de vos ressorts en direct.
Connexion de la machine à états aux props React
L'intégration dans React s'effectue en quelques lignes grâce au package officiel exodeui. Reliez vos variables d'état à la prop inputs pour animer vos composants de manière fluide.
Extrait d’implémentation en production
import React, { useState } from 'react';
import { ExodeUICanvas } from 'exodeui';
export function InteractiveToggle() {
const [enabled, setEnabled] = useState(false);
return (
<div className="flex items-center gap-3 p-4 bg-neutral-900 rounded-xl">
<ExodeUICanvas
src="/assets/toggle_machine.exode"
inputs={{ active: enabled }}
onEvent={(event) => {
if (event === 'click') setEnabled((prev) => !prev);
}}
style={{ width: 64, height: 36 }}
/>
<span className="text-white font-medium">
{enabled ? 'Active State' : 'Idle State'}
</span>
</div>
);
}