Sådan bruges reagerer forår til animerede komponenter

Reaktionsfjeder kan hjælpe dig med animationer, som er notorisk vanskelige at implementere på nettet. CSS animationer. er det bedste valg, men skaber et glat resultat, kræver omhyggelig jonglering af klasser, varigheder og arrangementer. Kaste A. JavaScript Framework. Ligesom reagere i blandingen komplicerer kun tingene yderligere.

For animationer, der stole på brugerinteraktion, kan værdier beregnes via JavaScript og påføres direkte på et element. Ved at tage denne manuelle tilgang, skal vi beregne og anvende vores egen lempelse for at gøre animationen se mere naturligt ud.

Reagere forår Er et bibliotek, der er bygget til at håndtere masser af de fælles hang-ups, når det kommer til animation på nettet. Det kræver en lidt anden tilgang ved at fokusere på fysik over lige varigheder og definerede lette funktioner. Dette hjælper med at holde tingene, der føles glat og naturligt.

Mens det meste af tiden er brugt til visuelle effekter, overfører biblioteket mellem to værdier, uanset om denne værdi nogensinde bruges til en stil eller ej. For eksempel kan det bruges til at tælle en række tilmeldinger for at understrege, hvor stort et samfund er.

I denne vejledning vil vi lave en kortkomponent, der giver brugerne mulighed for at bedømme billeder. Kortet flipper for at afsløre en stjerneklassifikation og brugere kan klikke for at tilføje deres egne. Vi vil bruge React Springs nyere kroge implementering, som kræver reaktionsversion 16.8 eller derover. Før du starter, Download vejledningsfilerne her (og tilbage dem op i Sky lagring ).

Hvis du vil bygge et websted uden komplekse kodeprocesser, skal du bruge en anstændig Website Builder. . Og sørg for at udforske Web Hosting. Indstillinger også.

01. Installer afhængigheder

Med de downloadede filer skal pakkeafhængighederne installeres, før vi kan starte. Dette skaber reaktion App-baseret projekt indeholder reaktionsfjeder Pakke og alle de nødvendige lokale server, der er nødvendige for at komme i gang.

På kommandolinjen skal du finde projektfilerne og installere, og derefter køre dem.

 & GT; garn.
& gt; Garn Start 

02. Generer billeder i staten

For det første har vi brug for nogle billeder til at bedømme. For denne vejledning kommer vi til hard-kode nogle billeder i applikationstilstanden, men disse data kunne komme fra enhver kilde. Åbn app.js og lav nogle billeder med usestate. krog fra reagerer. Dette vil give hvert billede en indledende rating, vi kan vise og opdatere senere.

 Const [Cards] = Usestate ([
CreateImage (image1),
CreateImage (image2),
CreateImage (image3)
]); 

03. Vis hvert billedkort

Da billederne gemmes i en matrix, kan vi sløjfe over den pågældende tilstand og skabe separate komponenter for hver. Animationslogikken for React Spring vil leve inde en & lt; ratingscard / & gt; Komponent, som vi kan bruge overalt, vi har brug for.

Inde i Render-metoden til APP.JS, opret en kopi af den pågældende komponent for hvert kort i statens array. Det vil modtage enhver værdi i staten, herunder billedet og den oprindelige bedømmelse.

 {cards.map ((kort, indeks) = & gt; (
& lt; ratingScard nøgle = {index} {... kort} / & gt;
))} 

04. Tilføj kortstruktur

Før vi kan tilføje animationen, har kortet brug for noget indhold. Hvert kort har en for- og ryg, som implementeres som separat & lt; div & gt; elementer lagdelt oven på hinanden.

Åben RatingCard / index.js. , og tilføj kortets struktur. Vi skal anvende billedet som baggrund for frontkortet, med bagsiden til sidst, der indeholder bedømmelsen.

 & lt; div classname = "ratingscard" & gt;
& lt; div
ClassName = "RATINGSCARD__FRONT"
Style = {{
Baggrundsbillede: `URL ($ {image})`
}}
/ & gt;
& lt; div classname = "ratingcard__back" / & gt;
& lt; / div & gt; 

05. Anvend Hover Styles

Eventuelle stilarter, der ikke er direkte opdateret via vores animationer, kan anvendes via CSS. Dette omfatter den grundlæggende 3D skyggeeffekt for hvert kort, når de svæver over. Inde RATERINGSCARD / STYLE.CSS. , tilføj nogle ekstra stilarter for at få kortet til at hoppe ud af siden på Hover ved at anvende 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. Indstil skygge som standard

En pludselig skygge på svævefly er en ødelæggende oplevelse. Vi bør derfor langsomt overgå mellem stater for at holde tingene glat. Tilføj en subtler drop-shadow for kortet, når det ikke bliver svævet over. Brug Overgang ejendom til at animere mellem de to stater.

 .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: Filtrer 0,5s;
} 

07. Hold valgt tilstand

Vi skal gemme og opdatere oplysninger om hvilken side af kortet vender opad. Vi kan bruge Reacts indbyggede usestate. Hook for at definere en startværdi, og den har den returnere den aktuelle værdi og en metode til at opdatere den.

I starten af RatingCard. Komponentfunktion, Opret definere dette valgte stat.

 CONST [Valgt, Setselected]
 = usestat (falsk); 

08. Definer flip animationen

Reaktionsfjederen er ansvarlig for overgangstal mellem en værdi og en anden. Dette kan gøres med en forår og usespring. krog. Vi giver det nogle installationsoplysninger, og det returnerer et sæt værdier, der opdaterer i henhold til fysikberegninger.

Opret en fjeder til flip animationen. Denne vil falme og rotere et kort afhængigt af om kortet er i dets valgte stat.

 const {opacity, transform}
 = Usepring ({
Opacitet: Udvalgt? 1: 0,
Transform: `Rotatey (
$ {valgte? 180: 0} DEG) `
}); 

09. Konverter til animeret container

De objekter, der returneres af usespring. Definer deres animation, men giv ikke de numeriske værdier, vi har brug for. Det animeret Fabriksfunktionen fordøjer disse oplysninger og leverer derefter værdierne som tal til komponenterne.

Konvertere RatingCard. element til at bruge animeret fungere. Det animeret.div. Syntaks fortæller funktionen at returnere en & lt; div & gt; .

 & lt; animated.div classname = "RatingScard" & GT;
& lt; animated.div
ClassName = "RATINGSCARD__FRONT"
Style = {{
Baggrundsbillede: `URL ($ {image})`
}}
/ & gt;
& lt; animated.div classname =
"RATERINGSCARD__BACK" / & GT;
& lt; /animated.div> 

10. Animere frontkortet

Reaktionsfjederen animerer kun værdierne og gør ikke nogen animation af selve elementer. Vi kan forbinde disse værdier til en stil prop og skabe den animation på flugt. Opdater frontkortet for at gøre brug af den nye Gennemsigtighed og transformation værdier. I dette tilfælde skal vi interpolere opacitetsværdien, som vi snart vil adressere.

 & lt; animated.div
ClassName = "RATINGSCARD__FRONT"
Style = {{
Baggrundsbillede: `URL ($ {image})`,
Opacitet: Opacity.interpolate (
inverseopacity),
transformation
}}
/ & gt; 

11. Animere bagkortet

Når du springer kortet, skal uanset animation vi anvender på et ansigt, skal anvendes omvendt til det andet. Når de spilles sammen, vil de se ud som om de bevæger sig som et stykke.

I dette tilfælde skal vi anvende de samme stilarter til bagkortet, men denne gang interpolerer transformation værdi i stedet.

 & lt; animated.div
ClassName = "RATINGSCARD__BACK"
Style = {{
Gennemsigtighed,
Transform: Transform
.interpolere (inversetransform)
}}
/ & gt; 

12. Interpolere værdierne

I stedet for at anvende direkte værdier til CSS egenskaber kan vi anvende en slags funktion til dem for at kortlægge deres værdi til en anden. Denne proces kaldes interpolation.

Definer et par interpolationsfunktioner mod toppen af RatingCard / index.js. . Disse påfører omvendt af både opacitet og transformation animationer, når du vælger eller fravælger.

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

13. Skift tilstand på klik

Kortets flipping skal være bundet til et klik. Som valgte Statens værdi bestemmer, hvilket ansigt der er synligt, vi skal skifte den tilstand, når du klikker på kortet.

Tilføj en klik lytter til ydersiden RatingCard. element. Når dette sker, vil det skifte den boolske værdi, der holdes i staten.

 & lt; animated.div
ClassName = "RATERINGSCARD"
onclick = {() = & gt;
Setselected (! valgt)}
& gt; 

14. Juster kortflipfysik

Lige nu virker vores animation, men det virker mere af en flyde end en flip. Vi kan ændre nogle værdier på hver forår for at ændre, hvordan det opfører sig. Inde i installationsobjektet for foråret, opret en config. objekt for at reducere friktionen og øge spændingen. Dette vil give animationen en snappier føler.

 Usespring ({
CONFIG: {
Friktion: 22,
Spænding: 500.
},
[...]
}); 

15. Opret fjeder for tilt effekt

Mens CSS-drevet svingeffekt fra tidligere giver nogle feedback, kan vi forbedre det yderligere ved at have en vippe animation, der reagerer på markørpositionen. Når du opdaterer en fjeder med høj frekvens, som f.eks. En mus flytte, kan vi få bedre ydeevne ved at bruge sæt funktion, der returneres af hver forår. Opret en ny forår til denne animation og hold en hold på den returnerede funktion.

 CONST [PROPS, SET] = USESPRING (() = & GT; ({
Stat: [0, 0, 1]
}
)); 

16. Anvend vippestile

Reaktionsfjeder kan animere mange forskellige typer værdier, som omfatter arrays. Opbevaring af vores værdier i et array giver os mulighed for at interpolere dem alle på transformation ejendom i et pas.

Lave en TransformCard. interpolationsfunktion og påfør stilarterne til hovedet RatingCard. element.

 Const transformCard = (x, y, skala) = & gt;
 `perspektiv (1000px) Rotatex ($ {X} DEG)
ROTATEY ($ {Y} DEG) skala ($ {Scale}) `;
[...]
& lt; animated.div
 ClassName = "RATERINGSCARD"
 onclick = {() = & gt; Setselected (! valgt)}
 Style = {{transform:! valgt & amp; & amp;
Props.state.interpolate (
transformkort)}} & gt; 

17. Indstil værdier på musens bevægelse

Mushændelser giver koordinaterne for markøren på det tidspunkt. Vi er interesserede i kundens koordinater for at få markørpositionen i visningsporten. Tilføj musen flytte og forlade begivenheder til ydersiden & lt; div & gt; . Vi sender koordinaterne til en funktion på Flyt og nulstilles til standardværdierne, når markøren forlader & lt; div & gt; .

 Onmousleave = {() = & gt; sæt({
 Stat: [0, 0, 1]})}
onmouseemove = {({clientx: x,
 Clienty: Y}) = & GT; sæt({
 Stat: CalculateValues ​​(x, y)})
} 

18. Beregn animationsværdier

Vi vil kun have en lille vippe for at undgå, at kortet bevæger sig for meget, når brugeren interagerer med det. Det calculateevalues. Funktionen vil fungere ud af skærmen. Markøren er tændt og vippe den mod den retning.

Opret funktionen for at udfylde disse værdier. Opdeling af 40 mindsker tilt effekten for at gøre den mere brugbar. Den endelige værdi vil visuelt hæve kortet fra skærmen.

 const calculateevalues ​​= (x, y) = & gt; [
- (Y-vindue.innerheight / 2) / 40,
(x - vindue.innerwidth / 2) / 40,
1.1]; 

19. Vis stjerneklassifikation

Hvert billede har en bedømmelse, som vi skal vise i stjerner på bagsiden af ​​kortet. Denne logik holdes inde i sin egen komponent, men det skal først anvendes på bagsiden.

For det første oprette et nyt stykke tilstand for at holde rating, og lav derefter en & lt; Starrating & GT; komponent inde i ryggen vendt & lt; div & gt; .

 CONST [Registrering, SETRATING]
 = usestat (rating);
[...]
{valgt & amp; & amp; (
 & lt; Starrating rating = {Controlrating}
SETRATING = {SETRATING} / & GT;
)} 

20. Opret stjerne animation

Stjerne ratings vil falme, når kortet er vendt. Ved at bruge usetrail. Hook fra React Fjeder, vi kan anvende fjedre til flere komponenter, den ene efter den anden.

Åben op Starrating / index.js. og tilføj krogen i. Det første argument vil definere antallet af fjedre, der skal gøres.

 CONST ANIMATEDSTARS = USETRAIL (5, {
CONFIG: {
Friktion: 22,
Spænding: 500.
},
Fra: {Opacitet: 0,
Transform: "Skala (0,8)"},
Opacitet: 1,
Transform: "Scale (1)"
}); 

21. Anvend stjerner til komponent

Det sidste, vi skal gøre, er faktisk at vise de stjerner. Det animeredeStars. Variabel indeholder nu en række fjedre, som vi kan itere over og anvende på kortet.

For hver stjerne, vis en & lt; animatedstar & gt; komponent inde i hovedet Starrating. Div. Spred stilen rekvisitter for at anvende alle virkningerne på hver komponent. Når du klikkes, skal du sende den nye rating til forældrene & lt; ratingcard & gt; komponent.

 {animatedStars.map ((rekvisitter, indeks) = & gt; (
& lt; animatedstar
Aktiv = {Index + 1 & LT; = Vurdering}
onclick = {e = & gt; {
e.stoppropagation ();
SETRATING (indeks + 1);
}}
Key = {Index}
Style = {{... Props}}
/ & gt;
))} 

Denne artikel blev oprindeligt offentliggjort i Creative Web Design Magazine Webdesigner . Køb udgave 288. eller abonnere .

Læs mere:

• Udvikle genanvendelige reagerkomponenter
• De bedste bærbare computere til programmering i 2019
• 35 Web Design Tools til at hjælpe dig med at arbejde klogere