Animerade komponenter och stilinterpolation

react-spring tillhandahåller animerade versioner av alla HTML-element: animated.div, animated.span, animated.img, animated.button och så vidare. De är direkta ersättare för sina inbyggda motsvarigheter, med en viktig skillnad: de kan ta emot SpringValue-objekt som style-egenskaper.

Vanliga React-element tar emot style som ett vanligt objekt med statiska värden. SpringValue-objekt är specialobjekt som uppdateras vid varje animeringsbildruta utan att gå genom Reacts omrenderingscykel. Endast animated.*-komponenter vet hur de ska prenumerera på SpringValue-uppdateringar och direkt ändra DOM:ens style, vilket helt förbigår React för maximal prestanda.

Tillämpa springvärden direkt som CSS-style-egenskaper på animerade komponenter. Exempel: style={{ opacity: opacity, transform: transform }}, där opacity och transform är SpringValue-objekt från useSpring. animated.div läser av dessa värden vid varje RAF-tick (requestAnimationFrame) och tillämpar dem på DOM-noden.

SpringValue-objekt har en .to()-metod för att transformera sina utdata. Ett vanligt användningsfall är att omvandla ett numeriskt springvärde till en CSS-sträng: x.to(v => "translateX(" + v + "px)"). Funktionen tar emot det aktuella numeriska värdet och returnerar den transformerade utdatan, som tillämpas som style.

Metoden .to() accepterar även arrayer som indata för intervallmappning: x.to([0, 1], ["#ff0000", "#00ff00"]) mappar springvärdet från intervallet [0, 1] till färgintervallet från rött till grönt. På så sätt kan du interpolera numeriska springvärden till färger, strängar eller andra värden som inte kan representeras som vanliga tal.

När ett springvärde följer flera värden samtidigt kan du interpolera dem tillsammans. För ett springvärde som följer { x, y } kan du skriva: x.to((xVal, yVal) => "translate(" + xVal + "px," + yVal + "px)"). Callback-funktionen för .to() tar emot alla värden i den ordning de förekommer i spring-konfigurationen.

Du kan omsluta dina egna komponenter med animated(): const AnimatedCard = animated(Card). Den omslutna komponenten måste acceptera en style-prop och vidarebefordra den till ett DOM-element. Nu kan AnimatedCard ta emot SpringValue-objekt i sin style-prop, precis som animated.div.

Komplexa animeringar kombinerar ofta flera springs. En entréanimering kan till exempel använda ett springvärde för opacitet och ett annat för vertikal position. Du kan tillämpa båda på samma animated.div: style={{ opacity: opacitySpring.opacity, transform: positionSpring.y.to(y => "translateY(" + y + "px)") }}.

Den viktigaste prestandaegenskapen hos react-spring är att uppdateringar av animerade värden förbigår Reacts reconciler. När ett springvärde animeras renderar React INTE om komponenten vid varje bildruta. I stället uppdaterar animated.*-komponenten direkt DOM-nodens style-egenskap i varje requestAnimationFrame-callback, vilket gör animeringar med 60 bilder per sekund möjliga utan omkostnaderna för React.

Vanliga animeringsmönster med interpolering: tona in vid montering med opacity.to([0, 1], [0, 1]), skala upp vid hovring med scale.to(s => "scale(" + s + ")") och rotera vid växling med rotation.to(r => "rotate(" + r + "deg)"). Genom att kedja dessa transformationer skapar du sammansatta effekter.

Som standard kan .to() med intervallarrayer extrapolera utanför det definierade intervallet. Du kan styra detta med alternativet extrapolate: x.to({ range: [0, 1], output: [0, 100], extrapolate: "clamp" }) förhindrar att utdatan går under 0 eller över 100, även om springvärdet överskrider intervallet. Detta är användbart för förloppsindikatorer och begränsade animeringar.

animated.div, animated.span och animated(CustomComponent) är direkta ersättare som accepterar SpringValue-objekt som style-egenskaper. Metoden .to() interpolerar springvärden: mappa dem till CSS-strängar, färgintervall eller valfritt utdataformat. Flera springs kan kombineras naturligt på ett och samma element. Den viktigaste prestandafördelen är att springuppdateringar förbigår Reacts omrenderingar genom att direkt ändra DOM-stilar i RAF-callbacks.