Hur man använder reagera våren för att animera komponenter

Reagera våren kan hjälpa dig med animationer, som är notoriskt knepiga att implementera på webben. CSS-animationer är det bästa valet, men skapar ett smidigt resultat, kräver noggrann jonglering av klasser, varaktighet och evenemang. Kasta en Javascript-ramverket Liksom reagera i blandningen komplicerar bara saker ytterligare.

För animationer som är beroende av användarinteraktion kan värdena beräknas via JavaScript och appliceras på ett element direkt. Genom att ta denna manuella tillvägagångssätt måste vi beräkna och tillämpa vår egen lättnad att göra animationen ser mer naturlig ut.

Reagera våren är ett bibliotek som är byggt för att hantera massor av de vanliga hang-upsna när det gäller animering på webben. Det tar ett lite annorlunda tillvägagångssätt, genom att fokusera på fysik över raka varaktigheter och definierade lättnadsfunktioner. Detta bidrar till att hålla sakerna att känna sig smidiga och naturliga.

Medan det mesta av tiden används för visuella effekter, kommer biblioteket att övergå mellan två värden oavsett om det här värdet någonsin används för en stil eller inte. Till exempel kan det användas för att räkna upp ett antal anmälningar för att betona hur stor en gemenskap är.

I den här handledningen kommer vi att göra en kortkomponent som tillåter användare att betygsätta bilder. Kortet vänder till att avslöja ett stjärnklassificering och användare kan klicka för att lägga till egen. Vi kommer att använda reagera vårens nyare krokar implementering, vilket kräver reagera version 16,8 eller högre. Innan du börjar, Ladda ner de handledningsfilerna här (och tillbaka dem i molnlagring ).

Om du vill bygga en webbplats utan komplexa kodprocesser, använd ett anständigt Website Builder . Och var noga med att utforska webbhotell Alternativ också.

01. Installera beroenden

Med de nedladdade filerna måste paketberoende installeras innan vi kan börja. Detta skapar reaktivt appbaserat projekt innehåller reaktionsfjäder Paket och all nödvändig lokal serveruppsättning behövs för att komma igång.

På kommandoraden, leta reda på projektfilerna och installera och kör sedan dem.

 & gt; garn
& gt; Garnstart 

02. Generera bilder i staten

Först behöver vi några bilder att betygsätta. För den här handledningen kommer vi att starta några bilder i ansökningsstatus, men dessa data kan komma från någon källa. Öppna app.js och skapa några bilder med usesestate krok från reagera. Detta ger varje bild ett första betyg som vi kan visa och uppdatera senare.

 Const [CARDS] = USESTATE ([
CreateImage (image1),
CreateImage (Image2),
CreateImage (image3)
]); 

03. Visa varje bildkort

Eftersom bilderna lagras i en array kan vi slinga över det tillståndet och skapa separata komponenter för var och en. Animationslogiken för att reagera våren kommer att leva inuti a & lt; Ratingscard / & GT; Komponent som vi kan använda var som helst vi behöver.

Inne i Rendermetoden för App.js, skapa en kopia av den komponenten för varje kort i statens array. Det kommer att få varje värde i staten, inklusive bilden och det ursprungliga betyget.

 {cards.map ((kort, index) = & gt;
& lt; Ratingscard Key = {Index} {... Kort} / & GT;
))} 

04. Lägg till kortstruktur

Innan vi kan lägga till animationen behöver kortet lite innehåll. Varje kort har en fram och bak, som implementeras som separat & lt; div & gt; element skiktade ovanpå varandra.

Öppen Ratingscard / index.js , och lägg till kortets struktur. Vi måste tillämpa bilden som bakgrund till framkortet, med ryggen som innehåller rating.

 & lt; div className = "Ratingscard" & GT;
& lt; div
ClassName = "Ratingscard__front"
stil = {{
backgroundImage: `URL ($ {image})`
}}
/ & gt;
& lt; div className = "Ratingscard__back" / & GT;
& lt; / div & gt; 

05. Applicera Hover Styles

Alla stilar som inte är direkt uppdaterade via våra animeringar kan tillämpas via CSS. Detta inkluderar den grundläggande 3D-skuggseffekten för varje kort när de svävar över. Inuti Ratingscard / Style.css Lägg till några extra stilar för att göra kortet hoppa ut ur sidan på Hover genom att applicera ett 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. Ställ in skuggan som standard

En plötslig skugga på svävar är en jarringsupplevelse. Vi bör därför sakta övergång mellan staterna för att hålla sakerna smidiga. Lägg till en subtiler drop-shadow för kortet när de inte svävar över. Använd övergång egendom att animera mellan de två staterna.

 .Ratingscard {
[...]
Filter: Drop-Shadow (0 3px 6px
RGBA (0, 0, 0, 0,16))
Drop-Shadow (0 3px 6px
RGBA (0, 0, 0, 0,1));
Övergång: Filtrera 0,5s;
} 

07. Håll vald tillstånd

Vi måste lagra och uppdatera information om vilken sida av kortet är uppåt. Vi kan använda Reages inbyggda usesestate Krok för att definiera ett startvärde och det har det returnerat det aktuella värdet och en metod för att uppdatera den.

I början av Betygsättning Komponentfunktionen, skapa definiera detta vald stat.

 Const [vald, setselected]
 = USESTATE (FALSE); 

08. Definiera flipanimationen

Reagera våren är ansvarig för övergångsnummer mellan ett värde och ett annat. Detta kan göras med en fjäder och användningspring krok. Vi tillhandahåller det en viss installationsinformation, och det returnerar en uppsättning värden som uppdateras enligt dess fysikberäkningar.

Skapa en vår för flipanimationen. Den här kommer att blekna och rotera ett kort beroende på om kortet är i sin vald stat.

 CONST {Opacity, Transform}
 = användningspring ({
Opacitet: Vald? 1: 0,
Transform: `Rotatey (
$ {valt? 180: 0} deg) `
}); 

09. Konvertera till animerad behållare

Objekten återvände av användningspring Definiera sin animering, men ge inte de numeriska värdena vi behöver. De animerad Fabriksfunktionen smälter den här informationen och levererar sedan värdena som nummer till komponenterna.

Konvertera Betygsättning element för att använda animerad fungera. De animerad.div Syntax berättar funktionen att returnera a & lt; div & gt; .

 & lt; animated.div className = "Ratingscard" & GT;
& lt; animerad.div
ClassName = "Ratingscard__front"
stil = {{
backgroundImage: `URL ($ {image})`
}}
/ & gt;
& lt; animated.div className =
"Ratingscard__back" / & GT;
& lt; /animated.div> 

10. Animera framkortet

Reagera våren animerar bara värdena och gör ingen animering av själva element. Vi kan länka dessa värden till en stil prop och skapa den animationen i flygningen. Uppdatera framkortet för att använda den nya opacitet och omvandla värden. I det här fallet måste vi interpolera det opacitetsvärde, som vi kommer att ta itu med.

 & lt; animerad.div
ClassName = "Ratingscard__front"
stil = {{
backgroundImage: `URL ($ {image})`,
Opacitet: Opacity.interpolate (
Inversepacity),
omvandla
}}
/ & GT; 

11. Animera bakkortet

När du viker på kortet måste det som helst animera vi tillämpas på ett ansikte appliceras i omvända till den andra. När de spelas tillsammans kommer de att se ut som om de rör sig som ett stycke.

I det här fallet måste vi tillämpa samma stilar på bakkortet, men den här gången interpolera omvandla värde istället.

 & lt; animerad.div
ClassName = "Ratingscard__back"
stil = {{
opacitet,
Transform: Transform
.interpolera (Inversbetansform)
}}
/ & GT; 

12. Interpolera värdena

I stället för att direkt tillämpa värden till CSS-egenskaper kan vi tillämpa någon form av funktion för dem, för att kartlägga deras värde till en annan. Denna process kallas interpolering.

Definiera ett par interpoleringsfunktioner mot toppen av Ratingscard / index.js . Dessa applicerar omvänden av både opacitet och omvandlingsanimeringar när du väljer eller avmarkerar.

const inversepacity = o = & gt; 1 - O;
const inversbetransform = t = & gt;
 `$ {t} roterande (180deg)`; 

13. Växla staten på klick

Flipping av kortet ska vara knutet till ett klick. Som den vald Statligt värde bestämmer vilket ansikte som är synligt, vi bör växla den staten när du klickar på kortet.

Lägg till en klick lyssnare till det yttre Betygsättning element. När det händer, kommer det att vaka det booleska värdet som hålls i staten.

 & lt; animerad.div
ClassName = "Ratingscard"
onclick = {() = & gt;
SETVELED (Vald)}
& GT; 

14. Justera kortflipfysik

Just nu fungerar våra animation, men det verkar mer av en flottör än en flip. Vi kan ändra vissa värden på varje vår för att ändra hur det beter sig. Inne i installationsobjektet för våren, skapa en konfigurera objekt för att minska friktionen och öka spänningen. Detta kommer att ge animationen en snappigare känsla.

 Användning ({
config: {
friktion: 22,
Spänning: 500
},
[...]
}); 

15. Skapa vår för lutningseffekt

Medan den CSS-drivna svängningseffekten från tidigare ger någon återkoppling, kan vi förbättra det ytterligare genom att ha en lutande animering som reagerar på markörpositionen. När du uppdaterar en fjäder med hög frekvens, till exempel ett musflytta, kan vi få bättre prestanda genom att använda uppsättning funktion som återlämnas av varje vår. Skapa en ny vår för den här animationen och håll en hållning av den återvända funktionen.

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

16. Applicera tilt-stilar

Reagera våren kan animera många olika typer av värden, som innehåller arrays. Att lagra våra värden i en matris tillåter oss att interpolera dem alla på omvandla egendom i ett pass.

Skapa en omvandla interpoleringsfunktion och applicera stilarna till huvudet Betygsättning element.

 const transformcard = (x, y, skalan) = & gt;
 "Perspektiv (1000px) Rotatex ($ {x} deg)
Rotatey ($ {y} deg) skala ($ {skala}) `;
[...]
& lt; animerad.div
 ClassName = "Ratingscard"
 onclick = {() = & gt; SETVELED (Vald)}
 Style = {{Transform:! vald & amp; & amp;
Props.state.interpolate (
transformcard)}} & gt; 

17. Ange värden på musen Flytta

Musevenemang ger koordinaterna på markören vid den tiden. Vi är intresserade av kundkoordinaterna för att få markörpositionen i visningsporten. Lägg till mus Flytta och lämna evenemang till det yttre & lt; div & gt; . Vi skickar koordinaterna till en funktion på Flytta och återställs till standardvärdena när markören lämnar & lt; div & gt; .

 onmouseaveave = {() = & gt; uppsättning({
 Stat: [0, 0, 1]})}
onmousemove = {({clientX: X,
 Clienty: y}) = & gt; uppsättning({
 Stat: BeräkningValues ​​(X, Y)})
} 

18. Beräkna animeringsvärden

Vi vill bara ha en liten lutning för att undvika att kortet går för mycket när användaren interagerar med den. De BeräknaValues Funktionen kommer att fungera på sidan av skärmen markören är på och lutar den mot den riktningen.

Skapa funktionen för att fylla i dessa värden. Delning med 40 minskar lutningseffekten för att göra det mer användbart. Det slutliga värdet kommer visuellt att höja kortet från skärmen.

 CONST CalculateValues ​​= (x, y) = & gt; [
- (Y - Window.innerheight / 2) / 40,
(x - window.innerwidth / 2) / 40,
1,1]; 

19. Visa stjärnbetyg

Varje bild har ett betyg som vi behöver visa i stjärnor på baksidan av kortet. Denna logik hålls inuti sin egen komponent, men det måste först appliceras på baksidan.

Skapa först en ny bit av staten för att hålla betyget och skapa en & lt; starrating & gt; Komponent inuti baksidan & lt; div & gt; .

 Const [CurrentRating, SetRating]
 = USESTATE (Rating);
[...]
{vald & amp; & amp; (
 & lt; starrating rating = {currentRating}
setrating = {setrating} / & gt;
)} 

20. Skapa stjärnanimering

Stjärnbetyg kommer att blekna in när kortet har vunnit. Genom att använda anslag Krok från reagera våren, vi kan applicera fjädrar till flera komponenter, efter varandra.

Öppna Starrating / index.js och lägg till kroken i. Det första argumentet kommer att definiera antalet fjädrar att göra.

 const animatesstars = Usetrail (5, {
config: {
friktion: 22,
Spänning: 500
},
Från: {Opacity: 0,
Transform: "Skala (0.8)"},
opacitet: 1,
Transform: "Skala (1)"
}); 

21. Applicera stjärnor till komponent

Det sista vi behöver göra är faktiskt visa de här stjärnorna. De animatstars Variabeln innehåller nu en mängd fjädrar, som vi kan iterera över och applicera på kortet.

För varje stjärna, visa en & lt; animatesstar & gt; Komponent inuti huvudet Stjärnbetyg div. Sprid stilprogrammen för att tillämpa alla effekter på varje komponent. När du klickade, skicka det nya betyget till föräldern & lt; betygsättning & gt; komponent.

 {AnimatedStars.Map ((Props, Index) = & GT;
& lt; animatesstar
aktiv = {index + 1 & lt; = betyg}
onclick = {e = & gt; {
e.stopppropagation ();
setrating (index + 1);
}}
nyckel = {index}
Style = {{... props}}
/ & gt;
))} 

Den här artikeln publicerades ursprungligen i kreativ webbdesignmagasin Webbdesigner . Köp utgåva 288 eller prenumerera .

Läs mer:

• Utveckla återanvändbara reaktionskomponenter
• De bästa bärbara datorerna för programmering 2019
• 35 Webbdesignverktyg som hjälper dig att arbeta smartare