Composants animés et interpolation des styles

react-spring fournit des versions animées de tous les éléments HTML : animated.div, animated.span, animated.img, animated.button, etc. Il s’agit de remplacements directs de leurs équivalents natifs, avec une différence essentielle : ils peuvent accepter des objets SpringValue comme propriétés de style.

Les éléments React ordinaires reçoivent le style sous la forme d’un objet simple contenant des valeurs statiques. Les SpringValues sont des objets spéciaux qui se mettent à jour à chaque image d’animation sans passer par le cycle de nouveau rendu de React. Seuls les composants animated.* savent s’abonner aux mises à jour des SpringValue et modifier directement le style du DOM, en contournant entièrement React pour offrir des performances maximales.

Appliquez directement les valeurs de ressort comme propriétés de style CSS sur des composants animés. Par exemple : style={{ opacity: opacity, transform: transform }}, où opacity et transform sont des SpringValues provenant de useSpring. animated.div lit ces valeurs à chaque battement de RAF (requestAnimationFrame) et les applique au nœud du DOM.

Les SpringValues disposent d’une méthode .to() pour transformer leur résultat. Un cas d’utilisation courant consiste à convertir une valeur numérique de ressort en chaîne CSS : x.to(v => "translateX(" + v + "px)"). La fonction reçoit la valeur numérique actuelle et renvoie le résultat transformé, qui est appliqué comme style.

La méthode .to() accepte également des entrées sous forme de tableaux pour mapper des plages : x.to([0, 1], ["#ff0000", "#00ff00"]) associe la valeur du ressort de la plage [0, 1] à la plage de couleurs allant du rouge au vert. C’est ainsi que vous pouvez interpoler des ressorts numériques vers des couleurs, des chaînes ou toute valeur qui ne peut pas être représentée par un simple nombre.

Lorsqu’un ressort suit plusieurs valeurs simultanément, vous pouvez les interpoler ensemble. Pour un ressort qui suit { x, y }, vous pouvez écrire : x.to((xVal, yVal) => "translate(" + xVal + "px," + yVal + "px)"). Le rappel .to() reçoit toutes les valeurs dans l’ordre où elles apparaissent dans la configuration du ressort.

Vous pouvez encapsuler vos propres composants avec animated() : const AnimatedCard = animated(Card). Le composant encapsulé doit accepter une propriété style et la transmettre à un élément du DOM. AnimatedCard peut alors recevoir des SpringValues dans sa propriété de style, tout comme animated.div.

Les animations complexes combinent souvent plusieurs ressorts. Par exemple, une animation d’entrée peut utiliser un ressort pour l’opacité et un autre pour la position verticale. Vous pouvez appliquer les deux au même animated.div : style={{ opacity: opacitySpring.opacity, transform: positionSpring.y.to(y => "translateY(" + y + "px)") }}.

La caractéristique de performance la plus importante de react-spring est que les mises à jour des valeurs animées contournent le réconciliateur de React. Lorsqu’un ressort s’anime, React n’effectue NOT pas de nouveau rendu du composant à chaque image. À la place, le composant animated.* met directement à jour la propriété de style du nœud DOM dans chaque rappel de requestAnimationFrame, ce qui permet d’obtenir des animations à 60 images par seconde sans la surcharge de React.

Quelques schémas d’animation courants avec l’interpolation : faire apparaître progressivement un composant lors de son montage avec opacity.to([0, 1], [0, 1]), l’agrandir au survol avec scale.to(s => "scale(" + s + ")") et le faire pivoter lors d’une bascule avec rotation.to(r => "rotate(" + r + "deg)"). En enchaînant ces transformations, vous créez des effets composés.

Par défaut, .to() avec des tableaux de plages peut extrapoler au-delà de la plage définie. Vous pouvez contrôler ce comportement avec l’option extrapolate : x.to({ range: [0, 1], output: [0, 100], extrapolate: "clamp" }) empêche le résultat de descendre sous 0 ou de dépasser 100, même si le ressort dépasse sa cible. Cela est utile pour les barres de progression et les animations bornées.

Pourquoi devez-vous utiliser animated.div au lieu d’un simple div lorsque vous appliquez des valeurs de ressort ?

animated.div, animated.span et animated(CustomComponent) sont des remplacements directs qui acceptent des SpringValues comme propriétés de style. La méthode .to() interpole les valeurs de ressort : elle les convertit en chaînes CSS, en plages de couleurs ou en tout autre format de sortie. Plusieurs ressorts se combinent naturellement sur un même élément. Le principal avantage en matière de performances est que les mises à jour des ressorts contournent les nouveaux rendus de React en modifiant directement les styles du DOM dans les rappels de RAF.