useTrail i useChain do sekwencji

useTrail(count, config) tworzy count sprężyn, które są animowane kolejno, z konfigurowalnym opóźnieniem między nimi. Gdy rozpoczyna się trail, pierwszy element jest animowany od razu, drugi zaczyna chwilę później, trzeci jeszcze później i tak dalej — tworząc efekt wachlarza lub kaskady.

useTrail zwraca tablicę obiektów sprężyn, po jednym dla każdego elementu trail. Każda sprężyna ma taki sam kształt (te same klucze), ale rozpoczyna animację z innym przesunięciem czasowym. Podczas renderowania należy jednocześnie iterować po tablicy trail i tablicy elementów, aby każdy animowany element otrzymał odpowiadającą mu sprężynę.

Listę z efektem trail można renderować, iterując po tablicy trail: trail.map((spring, i) => React.createElement(animated.div, { style: spring, key: items[i].id }, items[i].content)). Każdy animated.div otrzymuje własny obiekt sprężyny, dzięki czemu elementy są animowane kolejno. Sprężyny są uruchamiane w kolejności indeksów: 0, 1, 2, 3...

useTrail obsługuje wzorzec przełączania między animacją do przodu i do tyłu. Należy przekazać stan logiczny open, aby sterować kierunkiem: gdy open ma wartość true, trail przechodzi od ukrycia do widoczności, a gdy ma wartość false — od widoczności do ukrycia. Kolejność trail jest automatycznie odwracana, więc elementy znikają w odwrotnej kolejności (ostatni wchodzi, pierwszy wychodzi).

Obiekt konfiguracji useTrail jest taki sam jak w useSpring: tension, friction, mass. Opóźnienie między elementami zależy od czasu potrzebnego każdej sprężynie na rozpoczęcie działania, który jest określany przez ogólną fizykę sprężyny. Sztywniejsze sprężyny z większą wartością tension tworzą szybsze stopniowanie, a delikatniejsze sprężyny tworzą dłuższe kaskady.

useSpringRef() tworzy referencję, którą należy dołączyć do hooka sprężyny za pomocą jego opcji ref. Referencja umożliwia useChain sterowanie momentem rozpoczęcia działania sprężyny. Należy utworzyć po jednej referencji dla każdej sprężyny lub animacji trail, które mają być sekwencjonowane: const springRef = useSpringRef(), a następnie ją przekazać: useSpring({ ref: springRef, ... }).

useChain([ref1, ref2, ref3], [0, 0.5, 0.8]) porządkuje sekwencję wielu sprężyn lub animacji trail. Pierwszym argumentem jest tablica springRefów w kolejności, w jakiej mają być odtwarzane. Drugim argumentem jest tablica znaczników czasu z zakresu od 0 do 1, określających moment rozpoczęcia każdej sprężyny jako ułamek całkowitego przedziału czasowego.

W useChain znaczniki czasu takie jak [0, 0.5] oznaczają, że sprężyna 1 rozpoczyna działanie na początku sekwencji, czyli przy 0%, a sprężyna 2 przy 50%. Opcjonalny trzeci argument określa całkowity czas trwania w milisekundach (domyślnie 1000 ms). Zatem przy wartościach [0, 0.5] i czasie 2000 ms sprężyna 1 rozpoczyna działanie po 0 ms, a sprężyna 2 po 1000 ms.

Często stosowany wzorzec polega na animowaniu rozwijania kontenera (useSpring sterujący rozmiarem), a następnie pojawiania się elementów wewnątrz (useTrail dla listy). Należy dołączyć referencje do obu animacji, a następnie użyć useChain([sizeRef, trailRef], [0, 0.5]), aby najpierw rozwinąć kontener, a następnie rozpocząć pojawianie się elementów w połowie sekwencji. Tworzy to efektowną, dwufazową animację wejścia.

useChain doskonale nadaje się do przejść między stronami. Podczas nawigowania między stronami należy połączyć animację wyjścia starej strony z animacją wejścia nowej. Najpierw kończy się animacja wyjścia (znacznik czasu 0), a następnie rozpoczyna się animacja wejścia (znacznik czasu 0.6). Tworzy to płynne przekazanie zamiast nagłego przełączenia.

useTrail może tworzyć efekty przewijania z paralaksą, animując elementy z różnymi prędkościami zależnie od ich pozycji w trail. Elementy znajdujące się dalej w trail rozpoczynają animację później i mogą mieć inną konfigurację (niższe tension), przez co poruszają się wolniej. Takie oparte na głębi różnice w czasie symulują efekt paralaksy obiektów znajdujących się w różnych odległościach.

W jaki sposób useTrail tworzy stopniowane opóźnienie między elementami animacji?

useTrail(count, config) tworzy count sprężyn, które są animowane kolejno, tworząc stopniowane pojawianie się elementów listy. Aby renderować elementy, należy jednocześnie iterować po trail i tablicy elementów. useSpringRef() tworzy referencje, których useChain używa do ustalania kolejności. useChain([ref1, ref2], [0, 0.5]) steruje sekwencją wielu sprężyn za pomocą ułamkowych znaczników czasu. Razem mechanizmy te umożliwiają tworzenie złożonych, wielofazowych sekwencji, takich jak animacje „rozwiń, a następnie pokaż”.