React Springin perusteet: useSpring-hook

Perinteiset CSS-animaatiot käyttävät kiinteää kestoa: animaatio toistuu X millisekunnin ajan ja päättyy. react-spring animoi arvoja jousifysiikan avulla — animaatiota ohjaavat tension (jousen jäykkyys) ja friction (kuinka paljon jousi vastustaa liikettä). Tämä tuottaa luonnollisesti hidastuvan ja orgaaniselta tuntuvan liikkeen.

useSpring({ from, to })-hook määrittää animoidun arvon. Määrität aloitusarvot from-objektissa ja kohdearvot to-objektissa. useSpring palauttaa springs-olion, jossa kukin avain on SpringValue eli vastaavan numeerisen tai väriarvon animoitu versio.

config-optio ohjaa jousen toimintaa. tension (oletusarvo 170) määrittää jäykkyyden — suuremmat arvot saavat liikkeen pysähtymään nopeammin. friction (oletusarvo 26) määrittää vaimennuksen — pienemmillä arvoilla on enemmän pomppimista. mass (oletusarvo 1) lisää inertiaa. Nämä kolme arvoa määrittävät yhdessä animaation luonteen.

react-spring sisältää valmiita config-määrityksiä, joita voi käyttää ilman säätämistä: config.default on tasapainoinen ja yleiskäyttöinen, config.gentle on hidas ja sulava, config.wobbly pomppii vähäisen friction-arvon vuoksi, config.stiff on nopea ja napakka ja config.slow on hyvin asteittainen. Tuo ne react-springistä.

useSpring-funktion palauttamat arvot ovat SpringValue-olioita, eivät tavallisia lukuja. Niitä ei voi renderöidä suoraan JSX:ssä eikä käyttää tavallisissa style-olioissa. Ne on liitettävä animated.*-komponentteihin, jotka osaavat tilata jousen päivityksiä ja soveltaa niitä DOM:iin tehokkaasti.

Kun välität immediate: true-asetuksen useSpringille, arvot siirtyvät heti kohdearvoihinsa ja ohittavat jousianimaation. Tämä on hyödyllistä ensimmäisessä renderöinnissä, kun käyttäjä on ottanut käyttöjärjestelmän asetuksissa käyttöön liikkeen vähentämisen tai kun sijainti on palautettava ohjelmallisesti ilman näkyvää liikettä.

Voitte kääntää jousianimaation vaihtamalla sen perusteella, mitkä arvot ovat from- ja to-määrityksissä. Yleinen toimintatapa on tallentaa totuusarvona vaihtotila ja laskea from- ja to-arvot sen perusteella: kun toggle on false, animoidaan arvosta 0 arvoon 1, ja kun se on true, arvosta 1 arvoon 0. react-spring siirtyy sulavasti tilojen välillä.

useSpring voi palauttaa kaksialkioisen taulukon: const [springs, api] = useSpring(() => ({ from: { x: 0 } })). api-olio antaa ohjelmallisen hallinnan animaatiosta. Kutsukaa api.start({ x: 100 }), kun haluatte animoida uuteen arvoon, api.stop(), kun haluatte pysäyttää animaation, ja api.set({ x: 50 }), kun haluatte siirtyä arvoon ilman animaatiota.

Käyttäkää deklaratiivista muotoa useSpring({ from, to }), kun animaatio perustuu normaalisti muuttuvaan React-tilaan. Käyttäkää imperatiivista muotoa ja api.start()-kutsua, kun animaatio on käynnistettävä tapahtumankäsittelijöistä, eleistä tai asynkronisista toiminnoista ilman Reactin uudelleenrenderöintejä.

useSpring hyväksyy määrityksessään elinkaaren callback-funktioita. onStart suoritetaan, kun jousi aloittaa animoinnin. onChange suoritetaan jokaisella framella nykyisen arvon kanssa, joten se sopii sijaintia seuraaviin sivuvaikutuksiin. onRest suoritetaan, kun jousi asettuu lopulliseen arvoonsa ja animaatio on valmis.

Deklaratiivisessa muodossa useSpring käynnistää animaation automaattisesti uudelleen, kun sille välitetyt arvot muuttuvat. Esimerkiksi useSpring({ opacity: isVisible ? 1 : 0 }) animoi opacity-arvon aina, kun isVisible muuttuu. Tämä on yksinkertaisin tapa sitoa jousianimaatiot komponentin tilaan.

react-spring animoi fysiikan avulla: tension (jäykkyys), friction (vaimennus) ja mass määrittävät liikkeen. useSpring({ from, to }) palauttaa SpringValue-olioita, jotka liitetään animated.*-komponentteihin. Esiasetetut config-määritykset (gentle, wobbly, stiff, slow) kattavat yleiset käyttötapaukset. Imperatiivinen API [springs, api] mahdollistaa ohjelmallisen hallinnan kutsuilla api.start(), api.stop() ja api.set(). onRest suoritetaan, kun animaatio asettuu.