Podstawy React Spring: hook useSpring

Tradycyjne animacje CSS korzystają ze stałego czasu trwania: animacja odtwarza się przez X milisekund, a następnie się zatrzymuje. react-spring animuje wartości z wykorzystaniem fizyki sprężyny — przebieg animacji zależy od tension (sztywności sprężyny) i friction (oporu sprężyny wobec ruchu). Zapewnia to naturalne wyhamowanie i bardziej organiczny charakter ruchu.

Hook useSpring({ from, to }) definiuje animowaną wartość. W from należy określić wartości początkowe, a w to wartości docelowe. useSpring zwraca obiekt springs, w którym każdy klucz jest wartością SpringValue — animowaną wersją odpowiadającej jej wartości liczbowej lub koloru.

Opcja config steruje działaniem sprężyny. tension (domyślnie 170) określa sztywność — wyższe wartości powodują szybsze przyciąganie do celu. friction (domyślnie 26) określa tłumienie — niższe wartości powodują silniejsze odbijanie. mass (domyślnie 1) dodaje bezwładność. Te trzy wartości wspólnie określają charakter animacji.

react-spring zawiera gotowe konfiguracje, których można używać bez dostrajania: config.default jest zrównoważona i uniwersalna, config.gentle jest powolna i płynna, config.wobbly zapewnia odbijanie przy niskim tarciu, config.stiff jest szybka i dynamiczna, a config.slow działa bardzo stopniowo. Należy importować je z react-spring.

Wartości zwracane przez useSpring to obiekty SpringValue, a nie zwykłe liczby. Nie można renderować ich bezpośrednio w JSX ani używać ich w zwykłych obiektach stylów. Należy je przekazywać do komponentów animated.*, które potrafią subskrybować aktualizacje sprężyny i wydajnie stosować je do DOM.

Przekazanie immediate: true do useSpring powoduje, że wartości natychmiast przeskakują do wartości docelowych, z pominięciem animacji sprężynowej. Jest to przydatne podczas pierwszego renderowania, gdy użytkownik włączył opcję „reduce motion” w ustawieniach systemu operacyjnego lub gdy trzeba programowo zresetować położenie bez żadnego ruchu widocznego na ekranie.

Animację sprężyny można odwrócić, przełączając wartości znajdujące się w from i to. Często stosuje się wzorzec polegający na przechowywaniu logicznego stanu przełącznika i obliczaniu wartości from/to na jego podstawie: gdy przełącznik ma wartość false, animacja przebiega od 0 do 1, a gdy ma wartość true — od 1 do 0. react-spring płynnie przechodzi między tymi stanami.

useSpring może zwrócić tablicę dwuelementową: const [springs, api] = useSpring(() => ({ from: { x: 0 } })). Obiekt api zapewnia programową kontrolę. Wywołanie api.start({ x: 100 }) rozpoczyna animację do nowej wartości, api.stop() zatrzymuje animację, a api.set({ x: 50 }) zmienia wartość natychmiast, bez animacji.

Formy deklaratywnej useSpring({ from, to }) należy używać, gdy animacja zależy od stanu Reacta, który zmienia się w zwykły sposób. Formy imperatywnej z użyciem api.start() należy używać, gdy trzeba uruchamiać animacje z obsługi zdarzeń, gestów lub operacji asynchronicznych bez powodowania ponownego renderowania Reacta.

useSpring przyjmuje wywołania zwrotne cyklu życia w swojej konfiguracji. onStart jest wywoływane, gdy sprężyna rozpoczyna animację. onChange jest wywoływane przy każdej klatce i otrzymuje bieżącą wartość — jest przydatne do efektów ubocznych śledzących położenie. onRest jest wywoływane, gdy sprężyna osiąga stan spoczynku przy wartości końcowej, sygnalizując zakończenie animacji.

W formie deklaratywnej useSpring automatycznie ponownie uruchamia animację, gdy przekazane do niego wartości ulegają zmianie. Na przykład useSpring({ opacity: isVisible ? 1 : 0 }) będzie animować przezroczystość za każdym razem, gdy zmieni się isVisible. Jest to najprostszy sposób powiązania animacji sprężynowych ze stanem komponentu.

Co kontrolują wartości tension i friction w konfiguracji react-spring?

react-spring wykorzystuje fizykę do animowania: tension (sztywność), friction (tłumienie) i mass określają ruch. useSpring({ from, to }) zwraca obiekty SpringValue, które są przekazywane do komponentów animated.*. Gotowe konfiguracje (gentle, wobbly, stiff, slow) obejmują typowe przypadki. Imperative API [springs, api] umożliwia programową kontrolę za pomocą api.start(), api.stop() i api.set(). onRest jest wywoływane, gdy animacja osiąga stan spoczynku.