Animoidut komponentit ja tyylien interpolointi

react-spring tarjoaa animoidut versiot kaikista HTML-elementeistä: animated.div, animated.span, animated.img, animated.button ja niin edelleen. Ne ovat natiivien vastineidensa suoria korvaajia, mutta niillä on yksi ratkaiseva ero: ne voivat vastaanottaa SpringValue-olioita style-propseina.

Tavalliset React-elementit vastaanottavat stylen tavallisena oliona, jonka arvot ovat staattisia. SpringValues ovat erityisiä olioita, jotka päivittyvät jokaisella animaation framella ilman Reactin uudelleenrenderöintikiertoa. Vain animated.*-komponentit osaavat tilata SpringValue-päivityksiä ja muuttaa DOM:n style-ominaisuutta suoraan, jolloin React ohitetaan kokonaan parhaan mahdollisen suorituskyvyn saavuttamiseksi.

Välittäkää jousiarvot suoraan CSS-tyylimäärityksinä animated-komponenteille. Esimerkiksi: style={{ opacity: opacity, transform: transform }}, jossa opacity ja transform ovat useSpring-funktion palauttamia SpringValue-olioita. animated.div lukee nämä arvot jokaisella RAF (requestAnimationFrame) -tahdilla ja soveltaa ne DOM-solmuun.

SpringValue-olioilla on .to()-metodi, jolla niiden tulosta voi muuntaa. Yleinen käyttötapa on muuntaa numeerinen jousiarvo CSS-merkkijonoksi: x.to(v => "translateX(" + v + "px)"). Funktio vastaanottaa nykyisen numeerisen arvon ja palauttaa muunnetun tuloksen, jota käytetään tyylinä.

.to()-metodi hyväksyy myös taulukkomuotoiset syötteet alueiden väliseen kuvaukseen: x.to([0, 1], ["#ff0000", "#00ff00"]) kuvaa jousiarvon alueelta [0, 1] väreille punaisesta vihreään. Näin numeeriset jousiarvot voidaan interpoloida väreiksi, merkkijonoiksi tai miksi tahansa arvoiksi, joita ei voi esittää tavallisina lukuina.

Kun jousi seuraa useita arvoja samanaikaisesti, voitte interpoloida ne yhdessä. Jos jousi seuraa arvoja { x, y }, voitte kirjoittaa: x.to((xVal, yVal) => "translate(" + xVal + "px," + yVal + "px)"). .to()-takaisinkutsu vastaanottaa kaikki arvot siinä järjestyksessä, jossa ne esiintyvät jousen config-määrityksessä.

Voitte kääriä omat komponenttinne animated()-funktiolla: const AnimatedCard = animated(Card). Kääritty komponentti hyväksyy style-proพin ja välittää sen DOM-elementille. Nyt AnimatedCard voi vastaanottaa SpringValue-olioita style-propissaan aivan kuten animated.div.

Monimutkaisissa animaatioissa yhdistetään usein useita jousia. Sisääntuloanimaatiossa voidaan käyttää esimerkiksi yhtä jousta opacity-arvolle ja toista pystysuuntaiselle sijainnille. Voitte käyttää molempia samassa animated.div-elementissä: style={{ opacity: opacitySpring.opacity, transform: positionSpring.y.to(y => "translateY(" + y + "px)") }}.

react-springin tärkein suorituskykyominaisuus on, että animoitujen arvojen päivitykset ohittavat Reactin reconcilerin. Kun jousi animoi, React EI renderöi komponenttia uudelleen jokaisella framella. Sen sijaan animated.*-komponentti päivittää DOM-solmun style-ominaisuuden suoraan jokaisessa requestAnimationFrame-takaisinkutsussa, mikä mahdollistaa 60 fps:n animaatiot ilman Reactin aiheuttamaa kuormaa.

Yleisiä interpolointia hyödyntäviä animaatiomalleja ovat häivytys näkyviin komponentin luonnin yhteydessä käyttämällä opacity.to([0, 1], [0, 1])-kutsua, suurentaminen osoitinta leijutettaessa käyttämällä scale.to(s => "scale(" + s + ")")-kutsua ja kiertäminen vaihdon yhteydessä käyttämällä rotation.to(r => "rotate(" + r + "deg)")-kutsua. Näiden muunnosten ketjuttaminen luo yhdistelmävaikutuksia.

Oletusarvoisesti .to()-metodi voi alueita kuvaavien taulukoiden avulla ekstrapoloida määritetyn alueen ulkopuolelle. Voitte hallita tätä extrapolate-asetuksella: x.to({ range: [0, 1], output: [0, 100], extrapolate: "clamp" }) estää tulosta alittamasta arvoa 0 tai ylittämästä arvoa 100, vaikka jousi ylittäisi tavoitearvon. Tämä on hyödyllistä edistymispalkeissa ja rajatuissa animaatioissa.

animated.div, animated.span ja animated(CustomComponent) ovat suoria korvaajia, jotka hyväksyvät SpringValue-oliot style-propseina. .to()-metodi interpoloi jousiarvoja: se voi muuntaa ne CSS-merkkijonoiksi, väreiksi tai mihin tahansa muuhun tulostusmuotoon. Useat jouset yhdistyvät luontevasti samassa elementissä. Keskeinen suorituskykyetu on, että jousipäivitykset ohittavat Reactin uudelleenrenderöinnit muuttamalla DOM-tyylejä suoraan RAF-takaisinkutsuissa.