Fondamentaux de React Spring : hook useSpring

Les animations CSS traditionnelles utilisent une durée fixe : l’animation se déroule pendant X millisecondes, puis s’arrête. react-spring anime les valeurs à l’aide de la physique des ressorts : l’animation est pilotée par la tension (la rigidité du ressort) et le frottement (la résistance du ressort au mouvement). Cela produit un mouvement qui ralentit naturellement et paraît plus organique.

La fonction useSpring({ from, to }) définit une valeur animée. Vous indiquez les valeurs de départ dans from et les valeurs cibles dans to. useSpring renvoie un objet de ressorts dans lequel chaque clé est une SpringValue, c’est-à-dire une version animée de la valeur numérique ou de couleur correspondante.

L’option config contrôle le comportement du ressort. La tension (170 par défaut) contrôle la rigidité : des valeurs élevées produisent un retour plus rapide. Le frottement (26 par défaut) contrôle l’amortissement : des valeurs faibles produisent davantage de rebonds. La masse (1 par défaut) ajoute de l’inertie. Ces trois valeurs définissent ensemble le caractère de l’animation.

react-spring fournit des configurations prédéfinies que vous pouvez utiliser sans les ajuster : config.default est équilibrée et polyvalente, config.gentle est lente et fluide, config.wobbly produit des rebonds avec un faible frottement, config.stiff est rapide et réactive, et config.slow est très progressive. Importez-les depuis react-spring.

Les valeurs renvoyées par useSpring sont des objets SpringValue, et non des nombres ordinaires. Vous ne pouvez pas les afficher directement dans JSX ni les utiliser dans des objets de style ordinaires. Vous devez les appliquer à des composants animated.* qui savent s’abonner aux mises à jour des ressorts et les appliquer efficacement au DOM.

Le fait de transmettre immediate: true à useSpring fait passer instantanément les valeurs à leur cible, en contournant l’animation du ressort. C’est utile pour le rendu initial, lorsqu’un utilisateur a activé « réduire les animations » dans les réglages de son OS, ou lorsque vous devez réinitialiser la position par programmation sans aucun mouvement visuel.

Vous pouvez inverser une animation de ressort en permutant les valeurs placées dans from et to. Une approche courante consiste à stocker un état booléen de bascule et à calculer from/to en fonction de celui-ci : lorsque la bascule vaut false, animez de 0 à 1 ; lorsqu’elle vaut true, animez de 1 à 0. react-spring effectue une transition fluide entre les états.

useSpring peut renvoyer un tableau à deux éléments : const [springs, api] = useSpring(() => ({ from: { x: 0 } })). L’objet api vous donne un contrôle programmatique. Appelez api.start({ x: 100 }) pour animer vers une nouvelle valeur, api.stop() pour figer l’animation et api.set({ x: 50 }) pour changer de valeur instantanément, sans animation.

Utilisez la forme déclarative useSpring({ from, to }) lorsque l’animation dépend de l’état de React qui change normalement. Utilisez la forme impérative avec api.start() lorsque vous devez déclencher des animations depuis des gestionnaires d’événements, des gestes ou des opérations asynchrones sans provoquer de nouveaux rendus de React.

useSpring accepte des rappels de cycle de vie dans sa configuration. onStart est appelé lorsque le ressort commence à s’animer. onChange est appelé à chaque image avec la valeur actuelle — ce qui est utile pour les effets secondaires qui suivent la position. onRest est appelé lorsque le ressort se stabilise à sa valeur finale, ce qui indique que l’animation est terminée.

Dans la forme déclarative, useSpring relance automatiquement l’animation lorsque les valeurs qui lui sont transmises changent. Par exemple, useSpring({ opacity: isVisible ? 1 : 0 }) anime l’opacité chaque fois que isVisible change. C’est la manière la plus simple de lier les animations de ressort à l’état d’un composant.

Dans la configuration de react-spring, que contrôlent tension et friction ?

react-spring anime selon des principes physiques : la tension (rigidité), la friction (amortissement) et la masse définissent le mouvement. useSpring({ from, to }) renvoie des objets SpringValue appliqués aux composants animated.*. Les configurations prédéfinies (douce, oscillante, rigide, lente) couvrent les cas courants. L’API impérative [ressorts, API] permet un contrôle programmatique via api.start(), api.stop() et api.set(). onRest est appelé lorsque l’animation se stabilise.