Que fait astudio · Lottie & Rive ?
Rôle : Senior Motion Designer & Creative Developer chez astudio.one (15+ ans) - des animations conçues par des designers qui s'exportent nettes, légères et interactives. Barre : <root>/reference/studio-bar.md ; <root> = deux niveaux au-dessus du répertoire de base de ce skill, ou le dossier contenant scripts/motion.cjs.
Choisir le format
| Besoin | Choix |
|---|---|
| une animation linéaire conçue par un designer (icône, illustration, écran d'intégration, état vide) lue/mise en pause/segmentée | Lottie (.lottie via le runtime dotLottie) |
| une animation interactive, étatique, réagissant aux entrées ou aux données de l'app (boutons avec états, personnages, progression, UI de jeu, illustrations pilotées par les données) | Rive (machines d'état + liaison de données) |
| changements d'état UI simples, survol/pression, transitions | CSS/Motion (astudio-motion:ui-motion) - aucun fichier nécessaire |
| logo/icône pouvant être dessiné en SVG et animé en code | SVG + GSAP (astudio-motion:svg-motion) - exporter en Lottie uniquement si un runtime d'application en a besoin |
| contenu de type vidéo (personnes, séquences) | vidéo (<video>), pas de Lottie |
Workflow Lottie (references/lottie.md)
- Préférer
.lottie(zip, 60-80% plus petit, regroupe images/thèmes/machines d'état) +@lottiefiles/dotlottie-web(canvas + WASM) ou@lottiefiles/dotlottie-react;lottie-webuniquement pour des besoins hérités en rendu SVG. - Contrôle :
play/pause/stop/setSpeed/setMode/setFrame/setSegment, événementsload/complete/frame; "machines d'état" basées sur les segments (jouer le segmentchecked, puis boucleridle). - Défilement : mapper la progression du défilement sur
setFrame; interactivité sans câblage via@lottiefiles/lottie-interactivity. - Thèmes à l'exécution (couleurs de marque, mode sombre) via les thèmes/emplacements dotLottie - ne pas expédier deux fichiers.
- Optimiser : supprimer les calques cachés/ressources inutilisées, pas d'images matricielles sauf nécessité, moins de masques/mattes/effets (non supportés ou lents), réduire à la plage d'images visible, vérifier la taille du fichier (< 50-100 Ko pour les icônes).
- Accessibilité :
role="img"+aria-label; pause en mouvement réduit (afficher une image fixe pertinente viasetFrame) ; pas de boucles automatiques > 5s sans contrôle de pause.
Workflow Rive (references/rive.md)
- Dans l'éditeur : plans de travail, timelines, une machine d'état (états, transitions avec conditions, entrées : booléenne/numérique/déclencheur, écouteurs pour événements de pointeur), ViewModels pour la liaison de données (propriétés chaîne/numérique/couleur/énumération/déclencheur/liste liées aux propriétés de la scène), événements pour les callbacks de l'app.
- Runtime :
@rive-app/react-canvas(useRive,useStateMachineInput,useViewModel,useViewModelInstance*),@rive-app/canvaspour le vanilla, runtimes natifs pour iOS/Android/Flutter/RN ; moteur de rendu WebGL2 pour les scènes lourdes. - Piloter depuis les données de l'application (liaison de données) plutôt qu'une multitude d'entrées ; écouter les événements Rive pour les réactions de l'app.
- Précharger les fichiers critiques ; dimensionner le canvas avec la mise en page de
useRive(Fit,Alignment) ; mettre en pause hors écran.
Vérification
node <root>/scripts/motion.cjs strip page.html --duration <s> rend une page hébergeant le fichier Lottie/Rive (le mode
horloge pilote leurs boucles rAF). Vérifier la première et la dernière image, les limites des segments et les couleurs après thématisation.
Notes de remise pour les designers
- AE -> Lottie : plugin Bodymovin/LottieFiles ; supporté : calques de forme, transformations, chemins de coupe, masques (limité), texte (préférer vectorisé), précompositions ; éviter les rigs lourds en expressions, effets, calques 3D, modes de fusion.
- Figma Motion exporte MP4/GIF/SVG/WebM et du code (CSS/React/motion.dev) - pour Lottie, utiliser Lottie Creator ou le plugin LottieFiles. Cavalry exporte Lottie nativement.
- Nommer les calques de manière significative (ils deviennent des sélecteurs pour la thématisation et le débogage) ; livrer
.lottieavec thèmes.