Geanimeerde componenten en style-interpolatie

react-spring biedt geanimeerde versies van alle HTML-elementen: animated.div, animated.span, animated.img, animated.button enzovoort. Dit zijn directe vervangers van hun oorspronkelijke tegenhangers, met één belangrijk verschil: ze kunnen SpringValue-objecten als stijlprops accepteren.

Gewone React-elementen ontvangen de stijl als een gewoon object met statische waarden. SpringValues zijn speciale objecten die bij elk animatieframe worden bijgewerkt zonder de her-rendercyclus van React te doorlopen. Alleen animated.*-componenten weten hoe ze zich op updates van SpringValue kunnen abonneren en de DOM-stijl rechtstreeks kunnen aanpassen, waardoor React volledig wordt omzeild voor maximale prestaties.

Pas springwaarden rechtstreeks toe als CSS-stijlprops op geanimeerde componenten. Bijvoorbeeld: style={{ opacity: opacity, transform: transform }}, waarbij opacity en transform SpringValues van useSpring zijn. animated.div leest deze waarden bij elke RAF-tik (requestAnimationFrame) en past ze toe op het DOM-knooppunt.

SpringValues hebben een methode .to() om hun uitvoer te transformeren. Een veelgebruikte toepassing is een numerieke springwaarde omzetten naar een CSS-tekenreeks: x.to(v => "translateX(" + v + "px)"). De functie ontvangt de huidige numerieke waarde en retourneert de getransformeerde uitvoer, die als stijl wordt toegepast.

De methode .to() accepteert ook array-invoer voor het toewijzen van bereiken: x.to([0, 1], ["#ff0000", "#00ff00"]) wijst de springwaarde uit het bereik [0, 1] toe aan het kleurverloop van rood naar groen. Zo interpoleer je numerieke springs naar kleuren, tekenreeksen of andere waarden die niet als een gewoon getal kunnen worden weergegeven.

Wanneer een spring meerdere waarden tegelijk volgt, kun je deze samen interpoleren. Voor een spring die { x, y } volgt, kun je schrijven: x.to((xVal, yVal) => "translate(" + xVal + "px," + yVal + "px)"). De callback van .to() ontvangt alle waarden in de volgorde waarin ze in de springconfiguratie voorkomen.

Je kunt je eigen componenten omhullen met animated(): const AnimatedCard = animated(Card). De omhulde component moet een style-prop accepteren en deze doorgeven aan een DOM-element. AnimatedCard kan nu SpringValues ontvangen in zijn stijlprop, net als animated.div.

Complexe animaties combineren vaak meerdere springs. Een binnenkomstanimatie kan bijvoorbeeld één spring voor opacity en een andere voor de verticale positie gebruiken. Je kunt beide toepassen op dezelfde animated.div: style={{ opacity: opacitySpring.opacity, transform: positionSpring.y.to(y => "translateY(" + y + "px)") }}.

Het belangrijkste prestatiekenmerk van react-spring is dat updates van geanimeerde waarden de reconciler van React omzeilen. Terwijl een spring animeert, rendert React de component NIET bij elk frame opnieuw. In plaats daarvan werkt de animated.*-component de stijleigenschap van het DOM-knooppunt rechtstreeks bij in elke requestAnimationFrame-callback, waardoor animaties met 60 fps mogelijk zijn zonder extra belasting door React.

Veelvoorkomende animatiepatronen met interpolatie: geleidelijk zichtbaar worden bij het koppelen met opacity.to([0, 1], [0, 1]), groter worden wanneer je de muisaanwijzer erover beweegt met scale.to(s => "scale(" + s + ")"), en draaien bij het omschakelen met rotation.to(r => "rotate(" + r + "deg)"). Door deze transformaties te koppelen, ontstaan samengestelde effecten.

Standaard kan .to() met bereikarrays extrapoleren buiten het gedefinieerde bereik. Je kunt dit regelen met de optie extrapolate: x.to({ range: [0, 1], output: [0, 100], extrapolate: "clamp" }) voorkomt dat de uitvoer lager dan 0 of hoger dan 100 wordt, zelfs als de spring voorbij de grens schiet. Dit is handig voor voortgangsbalken en animaties met vaste grenzen.

animated.div, animated.span en animated(CustomComponent) zijn directe vervangers die SpringValues als stijlprops accepteren. De methode .to() interpoleert springwaarden: wijs ze toe aan CSS-tekenreeksen, kleurbereiken of elk ander uitvoerformaat. Meerdere springs kun je vanzelfsprekend op één element combineren. Het belangrijkste prestatievoordeel: updates van springs omzeilen her-renders van React door DOM-stijlen rechtstreeks aan te passen in RAF-callbacks.