Animowane komponenty i interpolacja stylów

react-spring udostępnia animowane wersje wszystkich elementów HTML: animated.div, animated.span, animated.img, animated.button i inne. Są one bezpośrednimi zamiennikami swoich natywnych odpowiedników, z jedną kluczową różnicą: mogą przyjmować obiekty SpringValue jako właściwości stylu.

Zwykłe elementy Reacta otrzymują styl jako zwykły obiekt ze statycznymi wartościami. SpringValues to specjalne obiekty, które aktualizują się przy każdej klatce animacji bez przechodzenia przez cykl ponownego renderowania Reacta. Tylko komponenty animated.* wiedzą, jak subskrybować aktualizacje SpringValue i bezpośrednio modyfikować styl DOM, całkowicie omijając Reacta dla maksymalnej wydajności.

Wartości sprężyny należy przekazywać bezpośrednio jako właściwości stylu CSS komponentów animated. Na przykład: style={{ opacity: opacity, transform: transform }}, gdzie opacity i transform są wartościami SpringValue pochodzącymi z useSpring. animated.div odczytuje te wartości przy każdym takcie RAF (requestAnimationFrame) i stosuje je do węzła DOM.

Wartości SpringValue mają metodę .to() służącą do przekształcania ich wyniku. Częstym zastosowaniem jest konwersja liczbowej wartości sprężyny na ciąg CSS: x.to(v => "translateX(" + v + "px)"). Funkcja otrzymuje bieżącą wartość liczbową i zwraca przekształcony wynik, który jest stosowany jako styl.

Metoda .to() przyjmuje również tablice jako dane wejściowe do mapowania zakresów: x.to([0, 1], ["#ff0000", "#00ff00"]) mapuje wartość sprężyny z zakresu [0, 1] na zakres kolorów od czerwonego do zielonego. W ten sposób można interpolować liczbowe wartości sprężyn do kolorów, ciągów znaków lub dowolnych wartości, których nie da się reprezentować jako zwykłej liczby.

Gdy sprężyna śledzi jednocześnie wiele wartości, można interpolować je razem. Dla sprężyny śledzącej { x, y } można napisać: x.to((xVal, yVal) => "translate(" + xVal + "px," + yVal + "px)"). Wywołanie zwrotne .to() otrzymuje wszystkie wartości w kolejności, w jakiej występują w konfiguracji sprężyny.

Własne komponenty można opakować za pomocą animated(): const AnimatedCard = animated(Card). Opakowany komponent musi przyjmować właściwość style i przekazywać ją do elementu DOM. Od tej chwili AnimatedCard może otrzymywać wartości SpringValue we właściwości style, tak jak animated.div.

Złożone animacje często łączą wiele sprężyn. Na przykład animacja wejścia może używać jednej sprężyny do sterowania przezroczystością, a drugiej do sterowania położeniem w pionie. Obie można zastosować do tego samego animated.div: style={{ opacity: opacitySpring.opacity, transform: positionSpring.y.to(y => "translateY(" + y + "px)") }}.

Najważniejszą cechą react-spring z punktu widzenia wydajności jest to, że aktualizacje animowanych wartości omijają reconciliator Reacta. Gdy sprężyna jest animowana, React NIE renderuje ponownie komponentu przy każdej klatce. Zamiast tego komponent animated.* bezpośrednio aktualizuje właściwość stylu węzła DOM w każdym wywołaniu requestAnimationFrame, dzięki czemu można tworzyć animacje 60 kl./s bez narzutu Reacta.

Typowe wzorce animacji z interpolacją to: pojawianie się przy montowaniu za pomocą opacity.to([0, 1], [0, 1]), powiększanie po najechaniu kursorem za pomocą scale.to(s => "scale(" + s + ")") oraz obracanie po przełączeniu za pomocą rotation.to(r => "rotate(" + r + "deg)"). Łączenie tych transformacji pozwala tworzyć złożone efekty.

Domyślnie metoda .to() korzystająca z tablic zakresów może ekstrapolować poza zdefiniowany zakres. Można sterować tym za pomocą opcji extrapolate: x.to({ range: [0, 1], output: [0, 100], extrapolate: "clamp" }) zapobiega wyjściu wyniku poniżej 0 lub powyżej 100, nawet jeśli sprężyna przekroczy zakres. Jest to przydatne w przypadku pasków postępu i animacji o ograniczonym zakresie.

animated.div, animated.span i animated(CustomComponent) to bezpośrednie zamienniki, które przyjmują wartości SpringValue jako właściwości stylu. Metoda .to() interpoluje wartości sprężyny, mapując je na ciągi CSS, zakresy kolorów lub dowolny format wyniku. Wiele sprężyn można naturalnie łączyć na jednym elemencie. Najważniejsza korzyść wydajnościowa polega na tym, że aktualizacje sprężyn omijają ponowne renderowanie Reacta, bezpośrednio modyfikując style DOM w wywołaniach RAF.