React Spring i praksis: useSpring-hook

Traditionelle CSS-animationer bruger en fast varighed: animationen afspilles i X millisekunder og stopper derefter. react-spring animerer værdier ved hjælp af fjederfysik — animationen styres af tension (fjederens stivhed) og friction (hvor meget fjederen modstår bevægelse). Det giver en naturligt aftagende bevægelse, der føles organisk.

Hooket useSpring({ from, to }) definerer en animeret værdi. Du angiver startværdierne i from og mål værdierne i to. useSpring returnerer et springs-objekt, hvor hver nøgle er en SpringValue — en animeret version af den tilsvarende numeriske værdi eller farveværdi.

Indstillingen config styrer fjederens adfærd. tension (standardværdien er 170) styrer stivheden — højere værdier giver et hurtigere snap. friction (standardværdien er 26) styrer dæmpningen — lavere værdier giver mere hoppende bevægelser. mass (standardværdien er 1) tilføjer træghed. Tilsammen definerer disse tre værdier animationens karakter.

react-spring leveres med forudindstillede konfigurationer, som du kan bruge uden selv at finjustere dem: config.default er afbalanceret og velegnet til generelle formål, config.gentle er langsom og jævn, config.wobbly hopper med lav friktion, config.stiff er hurtig og kontant, og config.slow er meget gradvis. Importér dem fra react-spring.

De værdier, som useSpring returnerer, er SpringValue-objekter, ikke almindelige tal. Du kan ikke gengive dem direkte i JSX eller bruge dem i almindelige style-objekter. De skal anvendes på animated.*-komponenter, som ved, hvordan de abonnerer på opdateringer fra spring-animationen og effektivt anvender dem på DOM'en.

Når du sender immediate: true til useSpring, springer værdierne øjeblikkeligt til deres mål og omgår spring-animationen. Det er nyttigt ved den første rendering, når du har aktiveret "reduceret bevægelse" i operativsystemets indstillinger, eller når du programmatisk skal nulstille en position uden synlig bevægelse.

Du kan vende en spring-animation ved at skifte om på, hvilke værdier der står i from og to. Et almindeligt mønster er at gemme en boolesk toggle-tilstand og beregne from/to ud fra den: når toggle er false, animeres der fra 0 til 1; når den er true, animeres der fra 1 til 0. react-spring skifter jævnt mellem tilstandene.

useSpring kan returnere et array med to elementer: const [springs, api] = useSpring(() => ({ from: { x: 0 } })). Objektet api giver dig programmatisk kontrol. Kald api.start({ x: 100 }) for at animere til en ny værdi, api.stop() for at fastfryse animationen og api.set({ x: 50 }) for at springe direkte til værdien uden animation.

Brug den deklarative form useSpring({ from, to }), når animationen afhænger af React-tilstand, der ændres på normal vis. Brug den imperative form med api.start(), når du skal udløse animationer fra hændelseshandlere, gestus eller asynkrone operationer uden at få React til at gengive komponenten igen.

useSpring accepterer callbacks for livscyklussen i sin konfiguration. onStart udløses, når spring-animationen begynder. onChange udløses ved hvert billede med den aktuelle værdi – det er nyttigt til sideeffekter, der følger positionen. onRest udløses, når springet falder til ro ved sin endelige værdi, hvilket signalerer, at animationen er fuldført.

I den deklarative form kører useSpring automatisk animationen igen, når de værdier, der sendes til den, ændres. For eksempel animerer useSpring({ opacity: isVisible ? 1 : 0 }) opaciteten, hver gang isVisible ændres. Det er den enkleste måde at knytte spring-animationer til komponentens tilstand.

react-spring animerer ved hjælp af fysik: tension (stivhed), friction (dæmpning) og mass bestemmer bevægelsen. useSpring({ from, to }) returnerer SpringValue-objekter, som anvendes på animated.*-komponenter. Forudindstillede konfigurationer (gentle, wobbly, stiff, slow) dækker almindelige scenarier. Den imperative API [springs, api] giver programmatisk kontrol via api.start(), api.stop() og api.set(). onRest udløses, når animationen falder til ro.