React Spring-grunder: useSpring-hooken

Traditionella CSS-animeringar använder en fast tidslängd: animeringen pågår i X millisekunder och stannar sedan. react-spring animerar värden med hjälp av springfysik — animeringen styrs av tension (fjäderns styvhet) och friction (hur mycket fjädern motstår rörelse). Det ger en naturligt avtagande rörelse som känns organisk.

Hooken useSpring({ from, to }) definierar ett animerat värde. Ni anger startvärden i from och målvärden i to. useSpring returnerar ett springs-objekt där varje nyckel är ett SpringValue — en animerad variant av motsvarande numeriska värde eller färgvärde.

Alternativet config styr spring-beteendet. tension (standardvärde 170) styr styvheten — högre värden gör att animeringen snäpper tillbaka snabbare. friction (standardvärde 26) styr dämpningen — lägre värden ger mer studs. mass (standardvärde 1) tillför tröghet. Tillsammans definierar dessa tre värden animeringens karaktär.

react-spring levereras med förinställda konfigurationer som ni kan använda utan att finjustera dem: config.default är balanserad och allmänt användbar, config.gentle är långsam och mjuk, config.wobbly studsar med låg friktion, config.stiff är snabb och snärtig och config.slow är mycket gradvis. Importera dem från react-spring.

Värdena som returneras av useSpring är SpringValue-objekt, inte vanliga tal. Du kan inte rendera dem direkt i JSX eller använda dem i vanliga style-objekt. De måste tillämpas på animated.*-komponenter som vet hur de ska prenumerera på springuppdateringar och tillämpa dem effektivt på DOM:en.

När immediate: true skickas till useSpring hoppar värdena direkt till sina målvärden och springanimeringen förbigås. Detta är användbart vid den första renderingen, när användaren har aktiverat "minska rörelse" i operativsystemets inställningar eller när du behöver återställa positionen programmässigt utan någon visuell rörelse.

Du kan vända en springanimering genom att växla vilka värden som finns i from och to. Ett vanligt mönster är att lagra ett booleskt växlingstillstånd och beräkna from/to utifrån det: när toggle är false animerar du från 0 till 1, och när det är true animerar du från 1 till 0. react-spring gör en mjuk övergång mellan tillstånden.

useSpring kan returnera en array med två element: const [springs, api] = useSpring(() => ({ from: { x: 0 } })). Objektet api ger dig programmatisk kontroll. Anropa api.start({ x: 100 }) för att animera till ett nytt värde, api.stop() för att frysa animeringen och api.set({ x: 50 }) för att hoppa till värdet utan animering.

Använd den deklarativa formen useSpring({ from, to }) när animeringen beror på React-tillstånd som ändras på vanligt sätt. Använd den imperativa formen med api.start() när du behöver utlösa animeringar från händelsehanterare, gester eller asynkrona åtgärder utan att orsaka omrenderingar i React.

useSpring accepterar livscykel-callbacks i sin konfiguration. onStart körs när springanimeringen börjar. onChange körs vid varje bildruta med det aktuella värdet och är användbart för bieffekter som följer positionen. onRest körs när springanimeringen har stabiliserats vid sitt slutliga värde, vilket signalerar att animeringen är klar.

I den deklarativa formen kör useSpring automatiskt om animeringen när värdena som skickas till den ändras. Exempelvis animerar useSpring({ opacity: isVisible ? 1 : 0 }) opaciteten varje gång isVisible ändras. Detta är det enklaste sättet att koppla springanimeringar till komponentens tillstånd.

react-spring animerar med fysik: tension (styvhet), friction (dämpning) och mass definierar rörelsen. useSpring({ from, to }) returnerar SpringValue-objekt som tillämpas på animated.*-komponenter. Förinställda konfigurationer (gentle, wobbly, stiff, slow) täcker vanliga användningsfall. Det imperativa API:et [springs, api] möjliggör programmatisk kontroll via api.start(), api.stop() och api.set(). onRest körs när animeringen har stabiliserats.