Hvordan bruke Reacture Spring til å animere komponenter

Reager våren kan hjelpe deg med animasjoner, som er notorisk vanskelig å implementere på nettet. CSS animasjoner er det beste valget, men skaper et jevnt resultat, krever forsiktig jonglering av klasser, varighet og arrangementer. Kaster A. Javascript-rammeverk Som reagerer i blandingen, kompliserer bare ting videre.

For animasjoner som stole på brukerinteraksjon, kan verdier beregnes gjennom JavaScript og brukes direkte på et element. Ved å ta denne manuelle tilnærmingen, ville vi trenge å beregne og bruke vår egen lettelse for å gjøre animasjonen ser mer naturlig ut.

Reagere våren er et bibliotek som er bygget for å håndtere mange av de vanlige hang-ups når det gjelder animasjon på nettet. Det tar en litt annen tilnærming, ved å fokusere på fysikk over rett varighet og definerte lettelsesfunksjoner. Dette bidrar til å holde ting som føles glatt og naturlig.

Mens det meste av tiden er brukt til visuelle effekter, vil biblioteket overgå mellom to verdier uavhengig av om denne verdien noensinne er brukt til en stil eller ikke. For eksempel kan det brukes til å telle opp en rekke registreringer for å understreke hvor stort et fellesskap er.

I denne opplæringen skal vi lage en kortkomponent som lar brukerne vurdere bilder. Kortet flips for å avsløre en stjerneklassifisering, og brukere kan klikke for å legge til sine egne. Vi vil bruke Reacture Springs nyere kroker implementering, som krever reakt versjon 16.8 eller høyere. Før du begynner, Last ned opplæringsfilene her (og tilbake dem opp i skylagring ).

Hvis du vil bygge et nettsted uten komplekse kodeprosesser, bruk en anstendig Nettstedbygger . Og vær sikker på å utforske Web Hosting. Alternativer også.

01. Installer avhengigheter

Med de lastede filene, må pakningsavhengighetene installeres før vi kan starte. Dette oppretter React App-basert prosjektet inkluderer reagere-våren Pakke og all nødvendig lokal serveroppsett som trengs for å komme i gang.

På kommandolinjen finner du prosjektfilene og installer, og kjør dem.

 & gt; garn
& gt; Garn Start 

02. Generer bilder i staten

Først trenger vi noen bilder for å vurdere. For denne opplæringen skal vi ha hard-kode noen bilder i programmet, men disse dataene kan komme fra hvilken som helst kilde. Åpne app.js og lag noen bilder med usestate. krok fra reagere. Dette vil gi hvert bilde en innledende vurdering vi kan vise og oppdatere senere.

 const [kort] = usestate ([
creadimage (image1),
creadimage (image2),
creadimage (image3)
]); 

03. Vis hvert bildekort

Siden bildene er lagret i en matrise, kan vi sløyfe over denne tilstanden og lage separate komponenter for hver. Animasjonslogikken for reakturfjæren vil leve inne i en & lt; ratingcard / & gt; Komponent som vi kan bruke hvor som helst vi trenger.

Inne i den gjengede metoden for app.js, opprett en kopi av den komponenten for hvert kort i statsarrangementet. Det vil motta hver verdi i staten, inkludert bildet og den opprinnelige vurderingen.

 {card.map ((kort, indeks) = & gt;
& lt; ratingcard nøkkel = {index} {... card} / & gt;
))} 

04. Legg til kortstruktur

Før vi kan legge til animasjonen, trenger kortet litt innhold. Hvert kort har en front og bak, som er implementert som separat & lt; div & gt; elementer lagdelt på toppen av hverandre.

Åpen Ratingcard / index.js. , og legg til strukturen på kortet. Vi må bruke bildet som bakgrunn til frontkortet, med ryggen til slutt inneholdende rating.

 & lt; div classname = "ratingcard" & gt;
& lt; div
klassenavn = "ratingscard__front"
Style = {{
Bakgrunnsbilde: `URL ($ {Image})`
}}
/ & gt;
& lt; div classname = "ratingcard__back" / & gt;
& lt; / div & gt; 

05. Påfør Hover Stiler

Eventuelle stiler som ikke er direkte oppdatert gjennom våre animasjoner, kan brukes gjennom CSS. Dette inkluderer den grunnleggende 3D-skyggeffekten for hvert kort når de svevet over. Innsiden Ratingcard / style.css , Legg til noen ekstra stiler for å få kortet til å hoppe ut av siden på svingeren ved å bruke et filter.

 .RatingScard: Hover {
Filter: Drop-Shadow (0 14px 28px
RGBA (0, 0, 0, 0.25))
Drop-Shadow (0 10px 10px
 RGBA (0, 0, 0, 0.1));
} 

06. Sett skyggen som standard

En plutselig skygge på svever er en jarring opplevelse. Vi bør derfor sakte overgå mellom stater for å holde ting glatt. Legg til en subtler drop-shadow for kortet når de ikke blir svevet over. Bruke overgang eiendom til å animere mellom de to statene.

 .RATINGSCARD {
[...]
Filter: Drop-Shadow (0 3px 6px
RGBA (0, 0, 0, 0.16))
Drop-Shadow (0 3px 6px
RGBA (0, 0, 0, 0.1));
Overgang: Filter 0,5s;
} 

07. Hold valgt tilstand

Vi må lagre og oppdatere informasjon om hvilken side av kortet vender opp. Vi kan bruke Reagens innebygde usestate. Hook for å definere en startverdi, og den har den returnerer gjeldende verdi og en metode for å oppdatere den.

Ved starten av Ratingcard. Komponentfunksjon, opprett definere dette valgt stat.

 const [valgt, setSelected]
 = usestate (false); 

08. Definer flip animasjonen

Reagerer våren er ansvarlig for overgangsnumre mellom en verdi og en annen. Dette kan gjøres med en vår og Anvendelser krok. Vi gir det noen oppsettinformasjon, og den returnerer et sett med verdier som oppdateres i henhold til sin fysikkberegninger.

Lag en vår for flip animasjonen. Denne vil falme og rotere et kort avhengig av om kortet er i sitt valgt stat.

 const {opacity, transform}
 = Usesepring ({
Opacity: Utvalgt? 1: 0,
Transform: `Rotatey (
$ {valgt? 180: 0} deg) `
}); 

09. Konverter til animert beholder

Objektene returnert av Anvendelser Definer deres animasjon, men ikke gi de numeriske verdiene vi trenger. De animert Fabrikkfunksjonen fordøyer denne informasjonen og leverer deretter verdiene som tall til komponentene.

Konvertere den Ratingcard. element å bruke animert funksjon. De animert.div. Syntaks forteller funksjonen for å returnere en & lt; div & gt; .

 & lt; animated.div classname = "ratingcard" & gt;
& lt; animert.div
klassenavn = "ratingscard__front"
Style = {{
Bakgrunnsbilde: `URL ($ {Image})`
}}
/ & gt;
& lt; animert.div klassenavn =
"Ratingcard__back" / & gt;
& lt; /animated.div> 

10. Animere fremover kortet

Reagerer våren er bare animert verdiene og gjør ingen animasjon av selve elementer. Vi kan koble disse verdiene til en stilprop og skape den animasjonen på flyet. Oppdater frontkortet for å gjøre bruk av den nye opasitet og forvandle verdier. I dette tilfellet må vi imidlertid interpolere opasitetsverdien, som vi vil adressere kort tid.

 & lt; animert.div
klassenavn = "ratingscard__front"
Style = {{
Bakgrunnsmessig: `URL ($ {Image})`,
Opacity: Opacity.Interpolate (
inverseopacity),
forvandle
}}
/ & gt; 

11. Animere bakkortet

Når du flipping av kortet, må det, uansett animasjon vi søker på et ansikt, må brukes i omvendt til den andre. Når de spilte sammen, vil de se ut som de beveger seg som ett stykke.

I dette tilfellet må vi bruke de samme stilene på baksiden, men denne gangen interpolerer forvandle verdi i stedet.

 & lt; animert.div
ClassName = "RatingsCard__back"
Style = {{
opasitet,
Transform: Transform.
.interpolat (inversetransform)
}}
/ & gt; 

12. Interpolere verdiene

I stedet for direkte å bruke verdier til CSS-egenskaper, kan vi bruke en slags funksjon til dem, for å kartlegge verdien til en annen. Denne prosessen kalles interpolering.

Definer et par interpoleringsfunksjoner mot toppen av Ratingcard / index.js. . Disse gjelder baksiden av både opasiteten og transformere animasjoner når de velger eller fjerner avvalg.

const inverseopacity = o = & gt; 1 - o;
const inversetransform = t = & gt;
 `$ {t} rotatey (180deg)`; 

13. Toggle State On Click

Flipping av kortet skal knyttes til et klikk. Som den valgt Statlig verdi bestemmer hvilket ansikt som er synlig, vi bør bytte den staten når du klikker på kortet.

Legg til en klikklytter til ytre Ratingcard. element. Når dette skjer, vil det skifte den boolske verdien som holdes i staten.

 & lt; animert.div
klassenavn = "ratingcard"
onclick = {() = & gt;
SetSelected (valgt)}
& gt; 

14. Juster kortflipfysikk

Akkurat nå fungerer vår animasjon, men det virker mer av en flyt enn en flip. Vi kan endre noen verdier på hver vår for å endre hvordan den oppfører seg. Inne i oppsettobjektet for våren, opprett en config. gjenstand for å redusere friksjonen og øke spenningen. Dette vil gi animasjonen en snappier føler.

 Usesepring ({
config: {
Friksjon: 22,
Spenning: 500.
},
[...]
}); 

15. Lag våren for tilt effekt

Mens CSS-drevne Hover-effekten fra tidligere gir litt tilbakemelding, kan vi forbedre det videre ved å ha en vippende animasjon som reagerer på markørposisjonen. Når du oppdaterer en fjær med høy frekvens, for eksempel en musflyt, kan vi få bedre ytelse ved å bruke sett funksjon som blir returnert av hver vår. Lag en ny vår for denne animasjonen og hold et tak i den returnerte funksjonen.

 Const [Props, Set] = Usesepring (() = & gt; ({
Stat: [0, 0, 1]
}
)); 

16. Påfør Tilt Styles

Reager våren kan animere mange forskjellige typer verdier, som inkluderer arrays. Lagring av verdiene våre i ett array lar oss interpolere dem alle på forvandle eiendom i ett pass.

Lage en TransForcard. interpoleringsfunksjon og bruk stilene til hoveddelen Ratingcard. element.

 const TransformCard = (x, y, skala) = & gt;
 `Perspective (1000PX) Rotatex ($ {x} DEG)
Rotatey ($ {y} deg) skala ($ {scale}) `;
[...]
& lt; animert.div
 klassenavn = "ratingcard"
 onclick = {() = & gt; SetSelected (valgt)}
 Style = {{transform:! Utvalgt & amp; & amp;
Props.State.Interpolate (
TransformCard)}} & gt; 

17. Angi verdier på musen flytte

Mushendelser gir koordinatene til markøren på den tiden. Vi er interessert i klientens koordinater for å få markørposisjonen i visningsporten. Legg til musen flytte og legg hendelser til ytre & lt; div & gt; . Vi sender koordinatene til en funksjon på å flytte og tilbakestille til standardverdiene når markøren forlater & lt; div & gt; .

 onmouseleave = {() = & gt; sett({
 Stat: 0, 0, 1]})}
onmousemove = {({clientx: x,
 Clienty: y}) = & gt; sett({
 Stat: Calculatevalues ​​(X, Y)})
} 

18. Beregn animasjonsverdier

Vi vil bare ha en liten tilt for å unngå at kortet beveger seg for mye når brukeren samhandler med den. De Calculatevalues Funksjonen vil fungere ut på siden av skjermen er markøren på og vipper den mot den retningen.

Opprett funksjonen for å fylle ut disse verdiene. Deler med 40 reduserer vippens effekt for å gjøre det mer brukbart. Den endelige verdien vil visuelt øke kortet fra skjermen.

 const calculatevalues ​​= (x, y) = & gt; [
- (Y - Window.InnerHeight / 2) / 40,
(X - Window.Innerwidth / 2) / 40,
1.1]; 

19. Vis stjernerangering

Hvert bilde har en vurdering som vi trenger å vise i stjerner på baksiden av kortet. Denne logikken holdes inne i sin egen komponent, men det må brukes til baksiden først.

Først, opprett et nytt stykke stat for å holde vurderingen, og lag deretter en & lt; starrating & gt; komponent i ryggen vendt mot & lt; div & gt; .

 Const [Currentrating, SetRating]
 = usestate (rating);
[...]
{valgt & amp; & amp; (
 & lt; starrating rating = {currentationRating}
setrating = {setrating} / & gt;
)} 

20. Lag stjerne animasjon

Stjernerangeringene kommer til å falme inn når kortet er vendt. Ved å bruke den usetrail. Hook fra React Spring, vi kan bruke fjærer til flere komponenter, en etter en annen.

Åpne opp Starrating / index.js. og legg til kroken i. Det første argumentet vil definere antall fjærer å lage.

 const animatedstars = usetraal (5, {
config: {
Friksjon: 22,
Spenning: 500.
},
Fra: {opacity: 0,
Transform: "Skala (0,8)"},
Opacity: 1,
Transform: "Skala (1)"
}); 

21. Bruk stjerner til komponent

Det siste vi trenger å gjøre er faktisk å vise de stjernene. De animatedstars Variabel inneholder nå en rekke fjærer, som vi kan iterere over og gjelder på kortet.

For hver stjerne, vis en & lt; animertstar & gt; komponent i hovedsak Starratisering div. Spred stilen rekvisitter for å bruke alle effektene til hver komponent. Når du klikket, send den nye vurderingen til foreldrene & lt; ratingcard & gt; komponent.

 {animatedstars.map ((rekvisitter, indeks) = & gt; (
& lt; animertstar
aktiv = {indeks + 1 <= = rating}
onclick = {e = & gt; {
e.Stoppropagation ();
setrating (indeks + 1);
}}
nøkkel = {indeks}
Style = {{... Props}}
/ & gt;
))} 

Denne artikkelen ble opprinnelig publisert i Creative Web Design Magazine Webdesigner . Kjøp utgave 288. eller abonnere .

Les mer:

• Utvikle gjenbrukbare reaktkomponenter
• De beste bærbare datamaskinene for programmering i 2019
• 35 Webdesign verktøy for å hjelpe deg med å jobbe smartere