React Spring Core: useSpring-hook

Traditionele CSS-animaties hebben een vaste duur: de animatie wordt gedurende X milliseconden afgespeeld en stopt dan. react-spring animeert waarden met veerfysica — de animatie wordt gestuurd door tension (de stijfheid van de veer) en friction (hoe sterk de veer beweging tegenhoudt). Dit levert een natuurlijk afremmende, organisch aanvoelende beweging op.

De hook useSpring({ from, to }) definieert een geanimeerde waarde. Je geeft de beginwaarden op in from en de doelwaarden in to. useSpring geeft een springs-object terug waarin elke sleutel een SpringValue is — een geanimeerde versie van de bijbehorende numerieke of kleurwaarde.

De optie config bepaalt het gedrag van de veer. tension (standaard 170) bepaalt de stijfheid — hogere waarden schieten sneller naar hun doel. friction (standaard 26) bepaalt de demping — lagere waarden stuiteren meer. mass (standaard 1) voegt traagheid toe. Samen bepalen deze drie waarden het karakter van de animatie.

react-spring wordt geleverd met vooraf ingestelde configuraties die je kunt gebruiken zonder ze af te stemmen: config.default is evenwichtig en geschikt voor algemeen gebruik, config.gentle is langzaam en soepel, config.wobbly stuitert door de lage wrijving, config.stiff is snel en direct en config.slow verloopt zeer geleidelijk. Importeer deze uit react-spring.

De waarden die useSpring retourneert, zijn SpringValue-objecten, geen gewone getallen. Je kunt ze niet rechtstreeks in JSX renderen of in gewone stijlobjecten gebruiken. Je moet ze toepassen op animated.*-componenten, die weten hoe ze zich op updates van springs kunnen abonneren en die efficiënt op de DOM kunnen toepassen.

Wanneer je immediate: true aan useSpring meegeeft, springen de waarden onmiddellijk naar hun doelwaarde en slaan ze de springanimatie over. Dit is handig bij de eerste render, wanneer je in de instellingen van je besturingssysteem "bewegingsreductie" hebt ingeschakeld, of wanneer je de positie programmatisch opnieuw moet instellen zonder enige visuele beweging.

Je kunt een springanimatie omkeren door te wisselen welke waarden in from en to staan. Een veelgebruikt patroon is om een booleaanse schakelstatus op te slaan en from/to op basis daarvan te berekenen: wanneer de schakelstatus false is, animeer je van 0 naar 1; wanneer deze true is, animeer je van 1 naar 0. react-spring schakelt soepel tussen de statussen.

useSpring kan een array met twee elementen retourneren: const [springs, api] = useSpring(() => ({ from: { x: 0 } })). Het object api geeft je programmatische controle. Roep api.start({ x: 100 }) aan om naar een nieuwe waarde te animeren, api.stop() om de animatie stil te zetten en api.set({ x: 50 }) om zonder animatie naar een waarde te springen.

Gebruik de declaratieve vorm useSpring({ from, to }) wanneer de animatie afhankelijk is van React-status die op de normale manier verandert. Gebruik de imperatieve vorm met api.start() wanneer je animaties wilt starten vanuit gebeurtenishandlers, gebaren of asynchrone bewerkingen zonder React opnieuw te laten renderen.

useSpring accepteert callbacks voor de levenscyclus in de configuratie. onStart wordt aangeroepen wanneer de springanimatie begint. onChange wordt bij elk frame aangeroepen met de huidige waarde — handig voor bijwerkingen die de positie volgen. onRest wordt aangeroepen wanneer de springanimatie tot rust komt op de eindwaarde en aangeeft dat de animatie is voltooid.

In de declaratieve vorm voert useSpring de animatie automatisch opnieuw uit wanneer de waarden die je eraan doorgeeft veranderen. Zo animeert useSpring({ opacity: isVisible ? 1 : 0 }) de doorzichtigheid telkens wanneer isVisible verandert. Dit is de eenvoudigste manier om springanimaties aan de status van een component te koppelen.

react-spring animeert op basis van fysica: tension (stijfheid), friction (demping) en mass bepalen de beweging. useSpring({ from, to }) retourneert SpringValue-objecten die je toepast op animated.*-componenten. Voorinstellingen (gentle, wobbly, stiff, slow) dekken veelvoorkomende situaties. Met de imperatieve API [springs, api] krijg je programmatische controle via api.start(), api.stop() en api.set(). onRest wordt aangeroepen wanneer de animatie tot rust komt.