useTrail et useChain pour les séquences

useTrail(count, config) crée count ressorts qui s’animent en séquence, avec un délai configurable entre chacun. Lorsque la séquence commence, le premier élément s’anime immédiatement, le deuxième démarre un peu plus tard, le troisième après lui, et ainsi de suite, ce qui crée un effet de déploiement ou de cascade.

useTrail renvoie un tableau d’objets de ressort, un pour chaque élément de la séquence. Chaque ressort a la même structure (les mêmes clés), mais commence son animation avec un décalage temporel différent. Vous parcourez simultanément le tableau trail et votre tableau d’éléments pour afficher chaque élément animé avec le ressort qui lui correspond.

Affichez une liste animée en parcourant le tableau trail : trail.map((spring, i) => React.createElement(animated.div, { style: spring, key: items[i].id }, items[i].content)). Chaque animated.div reçoit son propre objet de ressort, de sorte que les éléments s’animent en séquence. Les ressorts s’exécutent dans l’ordre des indices : 0, 1, 2, 3...

useTrail prend en charge un schéma de bascule pour les animations vers l’avant et en sens inverse. Transmettez un état booléen open pour contrôler la direction : lorsque open vaut true, la séquence passe de l’état masqué à l’état visible ; lorsqu’il vaut false, elle s’inverse et passe du visible au masqué. La séquence inverse automatiquement l’ordre : les éléments sortent dans l’ordre inverse, le dernier entré étant le premier à sortir.

L’objet de configuration de useTrail est le même que celui de useSpring : tension, friction et masse. Le délai entre les éléments dépend du temps nécessaire à chaque ressort pour démarrer, lequel est contrôlé par la physique globale du ressort. Des ressorts plus rigides, avec une tension plus élevée, créent un décalage plus rapide ; des ressorts plus doux créent des cascades plus longues.

useSpringRef() crée une référence que vous attachez à un crochet de ressort via son option ref. Cette référence permet à useChain de contrôler le moment où le ressort démarre. Créez une référence pour chaque ressort ou séquence que vous souhaitez ordonner : const springRef = useSpringRef(), puis transmettez-la : useSpring({ ref: springRef, ... }).

useChain([ref1, ref2, ref3], [0, 0.5, 0.8]) ordonne plusieurs ressorts ou séquences. Le premier argument est un tableau de springRefs dans l’ordre de lecture souhaité. Le deuxième argument est un tableau d’horodatages compris entre 0 et 1, qui indique le moment où chaque ressort démarre, sous forme de fraction de la durée totale.

Dans useChain, des horodatages comme [0, 0.5] signifient que le premier ressort démarre à 0 % de la séquence et que le deuxième démarre à 50 %. Le troisième argument facultatif est la durée totale en millisecondes (1000 ms par défaut). Ainsi, avec [0, 0.5] et 2000 ms, le premier ressort démarre à 0 ms et le deuxième à 1000 ms.

Un schéma courant consiste à animer l’agrandissement d’un conteneur (useSpring pour la taille), puis à faire apparaître progressivement les éléments qu’il contient (useTrail pour la liste). Attachez des références aux deux éléments, puis utilisez useChain([sizeRef, trailRef], [0, 0.5]) afin que le conteneur s’agrandisse d’abord, puis que les éléments apparaissent à mi-parcours. Vous obtenez ainsi une animation d’entrée cinématographique en deux phases.

useChain convient parfaitement aux transitions entre les pages. Lorsque vous naviguez d’une page à une autre, enchaînez l’animation de sortie de l’ancienne page avec l’animation d’entrée de la nouvelle. La sortie se termine d’abord (horodatage 0), puis l’entrée commence (horodatage 0,6). Cela crée un passage fluide plutôt qu’un changement abrupt.

useTrail peut créer des effets de parallaxe au défilement en animant les éléments à des vitesses différentes selon leur position dans la séquence. Les éléments les plus éloignés dans la séquence démarrent plus tard et peuvent avoir une configuration différente (une tension plus faible), ce qui les fait se déplacer plus lentement. Cette synchronisation fondée sur la profondeur simule l’effet de parallaxe d’objets situés à des distances différentes.

useTrail(count, config) crée count ressorts qui s’animent en séquence, ce qui produit des apparitions décalées dans une liste. Parcourez simultanément trail et les éléments pour les afficher. useSpringRef() crée des références que useChain utilise pour ordonner les animations. useChain([ref1, ref2], [0, 0.5]) orchestre plusieurs ressorts avec des horodatages fractionnaires. Ensemble, ces outils permettent de créer des séquences complexes en plusieurs phases, comme des animations où un élément s’agrandit puis révèle son contenu.