Cum se utilizează arcul reacționează la componente animate

Reack Spring vă poate ajuta cu animații, care sunt notorii complicate pentru a implementa pe web. CSS animații sunt cea mai bună alegere, dar crearea unui rezultat bun, necesită o jonglerie atentă a claselor, duratei și evenimentelor. Aruncând a. Cadrul JavaScript Ca să reacționeze în amestec numai complică lucrurile mai departe.

Pentru animațiile care se bazează pe interacțiunea utilizatorilor, valorile pot fi calculate prin JavaScript și aplicate direct unui element. Prin luarea acestei abordări manuale, ar trebui să calculăm și să aplicăm relația noastră de a face animația să arate mai naturală.

Reacționează în primăvara este o bibliotecă care este construită pentru a face față multă blocare comună atunci când vine vorba de animație pe web. Este nevoie de o abordare ușor diferită, concentrându-se asupra fizicii pe durata dreaptă și pe funcțiile de relaxare definite. Acest lucru vă ajută să păstrați lucrurile să se simtă netede și naturale.

În timp ce de cele mai multe ori acest lucru este folosit pentru efecte vizuale, biblioteca va tranziționa între două valori, indiferent dacă valoarea respectivă este utilizată vreodată pentru un stil sau nu. De exemplu, ar putea fi folosit pentru a număra un număr de semne pentru a sublinia cât de mare este o comunitate.

În acest tutorial, vom face o componentă de card care permite utilizatorilor să evalueze imaginile. Cardul se strecoară pentru a dezvălui un rating de stele, iar utilizatorii pot face clic pentru a adăuga propriile lor. Vom folosi implementarea Cârligelor React Spring, care necesită reacția versiunii 16.8 sau mai sus. Inainte sa incepi, Descărcați fișierele Tutorial aici (și înapoi Stocare in cloud ).

Dacă doriți să construiți un site fără procese complexe de cod, utilizați un decent Builder de site-uri web . Și asigurați-vă că explorați web hosting De asemenea, opțiuni.

01. Instalați dependențele

Cu fișierele descărcate, dependențele de pachete trebuie să fie instalate înainte de a putea începe. Acest proiect de creare a aplicațiilor React include react-primăvara Pachetul și toate setările locale necesare pentru a începe.

În linia de comandă, localizați fișierele de proiect și instalați, apoi executați-le.

 & gt; fire
& gt; Start fire 

02. Generați imagini în stat

În primul rând, avem nevoie de unele imagini pentru a evalua. Pentru acest tutorial, mergem la codul greu de cod în statul de aplicare, dar aceste date ar putea proveni de la orice sursă. Deschideți App.Js și creați câteva imagini cu USESTATE. cârlig de la reacție. Acest lucru va oferi fiecărei imagini un rating inițial pe care îl putem afișa și actualiza mai târziu.

 const [carduri] = UseState ([
Creați (imagine1),
Creați (imagine2),
Creați (imagine3)
]); 

03. Afișați fiecare carte de imagine

Pe măsură ce imaginile sunt stocate într-o matrice, putem bucura peste acel stat și creăm componente separate pentru fiecare. Logica de animație pentru primăvara reacțională va trăi în interiorul a & lt; ratingscard / & gt; Componenta pe care o putem folosi oriunde trebuie.

În interiorul metodei de predare a App.js, creați o copie a componentei respective pentru fiecare carte din matricea de stat. Acesta va primi fiecare valoare din stat, inclusiv imaginea și evaluarea inițială.

 {cards.map ((card, index) = & gt; (
& lt; ratingscard Key = {index} {... card} / & gt;
))} 

04. Adăugați structura cardului

Înainte de a adăuga animația, cardul are nevoie de un anumit conținut. Fiecare carte are o față și înapoi, care sunt implementate ca separate & Lt; div & gt; elemente stratificate unul peste celălalt.

Deschis Evaluare / index.js. și adăugați structura cardului. Trebuie să aplicăm imaginea ca fundal pe placa din față, cu spatele în cele din urmă conținând ratingul.

 & lt; div CLASSNAME = "ratingscard" & gt;
& lt; div
CLASSNAME = "EvaluareCard__Front"
stil = {{{{{{
Backgroximage: `URL ($ {imagine})`
}}
/ & gt;
& lt; div clasaname = "ratingscard__back" / & gt;
& lt; / div & gt; 

05. Aplicați stiluri de hover

Orice stiluri care nu sunt actualizate direct prin animațiile noastre pot fi aplicate prin CSS. Aceasta include efectul de umbră 3D de bază pentru fiecare card atunci când este rotit peste. Interior RatingScard / stil.css. , adăugați câteva stiluri suplimentare pentru a face cardul să sară din pagină pe Hover prin aplicarea unui filtru.

 .Retingscard: Hover {
Filtru: Drop-umbra (0 14px 28px
RGBA (0, 0, 0, 0.25))
Drop-umbra (0 10px 10px
 RGBA (0, 0, 0, 0,1));
} 

06. Setați umbra în mod implicit

O umbră bruscă pe Hover este o experiență jarring. Prin urmare, ar trebui să trecem încet între state pentru a menține lucrurile netede. Adăugați o umbră subtilă pentru card atunci când nu este plină de acoperire. Folosește tranziție proprietate pentru a anima între cele două state.

 .RANGARD {
[...]
Filtru: Drop-umbra (0 3px 6px
RGBA (0, 0, 0, 0.16))
Drop-umbra (0 3px 6px
RGBA (0, 0, 0, 0,1));
Tranziție: Filtru 0,5s;
} 

07. Țineți starea selectată

Trebuie să stocăm și să actualizăm informații despre ce parte a cardului este în sus. Putem folosi Built-in React USESTATE. cârlig pentru a defini o valoare de start și a returna valoarea curentă și o metodă de actualizare a acesteia.

La începutul Remorsed. Funcția componentă, creați definiți acest lucru selectat stat.

 const [selectat, setselectat]
 = USESState (FALSE); 

08. Definiți animația Flip

Reactivul de primăvară este responsabil pentru trecerea numerelor între o singură valoare și altul. Acest lucru se poate face cu un izvor și cu USESPRING. cârlig. Oferim informații de configurare și returnează un set de valori care actualizează în funcție de calculele sale de fizică.

Creați un izvor pentru animația Flip. Aceasta va dispărea și roti un card în funcție de faptul dacă cardul este în ea selectat stat.

 const {opacitate, transformare}
 = userspring ({{
Opacitate: selectat? 1: 0,
Transformați: "Rotatey (
$ {selectat? 180: 0} Deg) `
}); 

09. Conversia la recipientul animat

Obiectele s-au întors USESPRING. Definiți animația lor, dar nu furnizați valorile numerice de care avem nevoie. animat Funcția din fabrică digeră aceste informații și apoi furnizează valorile ca numere la componente.

Convertiți. Remorsed. element pentru a utiliza animat funcţie. animat.div. Sintaxa spune funcției să se întoarcă a & Lt; div & gt; .

 & lt; animat.div classname = "ratingscard" & gt;
& lt; animat.div
CLASSNAME = "EvaluareCard__Front"
stil = {{{{{{
Backgroximage: `URL ($ {imagine})`
}}
/ & gt;
& lt; animat.div clasaname =
"Ratingscard__back" / & gt;
& lt; / denimat.div> 

10. Animați cardul din față

Reactivul de primăvară este doar animarea valorilor și nu face nici o animație de elemente în sine. Putem lega aceste valori la un stil de stil și creați acea animație în zbor. Actualizați cardul din față pentru a utiliza noul opacitate și transforma Valori. În acest caz, va trebui să interpolim valoarea opacității, pe care o vom aborda în curând.

 & animat.div
CLASSNAME = "EvaluareCard__Front"
stil = {{{{{{
BackgroxyImage: URL ($ {imagine}) `,
Opacitate: Opacity.Interpolate (
inversiune),
transforma
}}
/ & gt; 

11. Animați cardul din spate

La răsturnarea cardului, indiferent de animație pe care o aplicăm la o față va trebui aplicată în sens invers la cealaltă. Când vor fi jucate împreună, ei vor arăta că se mișcă ca o singură bucată.

În acest caz, trebuie să aplicăm aceleași stiluri pe cardul din spate, dar de această dată interpolează transforma în schimb.

 & animat.div
CLASSNAME = "ErvenceScard__back"
stil = {{{{{{
opacitate,
Transformare: transformă
.Interpolate (inversetransformă)
}}
/ & gt; 

12. Interpolați valorile

În loc să aplicați direct valorile la proprietățile CSS, putem aplica un fel de funcție, pentru a-și cartografia valoarea la unul diferit. Acest proces se numește interpolare.

Definiți câteva funcții de interpolare spre partea de sus a Evaluare / index.js. . Acestea aplică inversarea atât a opacității, cât și a transformării animațiilor atunci când selectați sau deselectați.

const inveopacitate = o = & gt; 1 - o;
const inverstransform = t = & gt;
 `$ {t} Rotatey (180DEG)` 

13. Comutați de stat în clic

Flippingul cardului trebuie legat de un clic. Dupa cum selectat Valoarea de stat stabilește care este vizibilă, ar trebui să comutăm acel stat când faceți clic pe card.

Adăugați un ascultător de clic pe exterior Remorsed. element. Când se întâmplă acest lucru, acesta va comuta valoarea booleană deținută în stat.

 & animat.div
CLASSNAME = "ObringScard"
onClick = {() = & gt;
SETSELECTED (! selectat)}
& gt; 

14. Ajustați FIPS FIPS CARD

Chiar acum, lucrările noastre de animație, dar se pare mai mult decât un flip decât un flip. Putem schimba unele valori în fiecare primăvară pentru a schimba modul în care se comportă. În interiorul obiectului de configurare pentru primăvară, creați o Config. obiect pentru a reduce fricțiunea și a crește tensiunea. Acest lucru va da animației un simt instantaneu.

 Userspring ({{
Config: {
Fricțiune: 22,
Tensiune: 500.
},
[...]
}); 

15. Creați arcul pentru efectul de înclinare

În timp ce efectul Hover Hover de la mai devreme oferă un feedback, putem îmbunătăți acest lucru, având o animație înclinată care reacționează la poziția cursorului. Când actualizați un izvor la o frecvență ridicată, cum ar fi o mișcare de mouse, putem obține o performanță mai bună utilizând a stabilit Funcția care se întoarce prin fiecare primăvară. Creați un nou primăvară pentru această animație și păstrați-vă funcția returnată.

 CONST [Props, set] = Userspring (() = & gt; ({{
STAT: [0, 0, 1]
}
); 

16. Aplicați stiluri de înclinare

Reactivul de primăvară poate anima multe tipuri diferite de valori, care includ matrice. Stocarea valorilor noastre într-o singură matrice ne permite să le interpolim pe toate pe transforma proprietate într-o singură trecere.

Creeaza o Carcasă de transformare Funcția de interpolare și aplicați stilurile către principalele Remorsed. element.

 Const TransformCard = (x, y, scară) = & gt;
 `Perspectivă (1000px) ROTTEX ($ {x} Deg)
Scala RoTeTy ($ {y}) ($ {scară}) `;
[...]
& lt; animat.div
 CLASSNAME = "ObringScard"
 onClick = {() = & gt; SETSELECTED (! selectat)}
 stil = {{transforma:! selectat & amp; & amp;
props.State.Interpolate (
TransformareCard)}} & Gt; 

17. Setați valori pe mișcarea mouse-ului

Evenimentele de șoarece oferă coordonatele cursorului la acel moment. Suntem interesați de coordonatele clientului pentru a obține poziția cursorului în cadrul vizorului de vizualizare. Adăugați mutarea mouse-ului și lăsați evenimente la exterior & Lt; div & gt; . Treceți coordonatele la o funcție de mișcare și resetați la valorile implicite când cursorul lasă & Lt; div & gt; .

 onmouseleave = {() = & gt; a stabilit({
 STAT: [0, 0, 1]})}
onmousemove = {({clientx: x,
 Clienty: y}) = & gt; a stabilit({
 Stat: CalculateValues ​​(x, y)})
} 

18. Calculați valorile de animație

Vrem doar o înclinare mică pentru a evita cardul care se deplasează prea mult când utilizatorul interacționează cu acesta. calculate valorile Funcția va funcționa partea laterală a ecranului Cursorul este pornit și îl încarcă spre această direcție.

Creați funcția pentru a completa aceste valori. Împărțirea cu 40 diminuează efectul de înclinare pentru al face mai utilizabil. Valoarea finală va ridica vizual cardul de pe ecran.

 const calculate valoroase = (x, y) = & gt; [
- (Y - Window.Innerhight / 2) / 40,
(x - fereastră.innerwidth / 2) / 40,
1.1]; 

19. Afișați ratingul Star

Fiecare imagine are un rating pe care trebuie să-l afișăm în stele din spatele cardului. Această logică se desfășoară în interiorul propriei componente, dar care trebuie aplicată mai întâi pe fața din spate.

În primul rând, creați o nouă bucată de stat pentru a ține ratingul, apoi creați o & lt; Startrating & GT; Componenta din interiorul din spate & Lt; div & gt; .

 const [actualizare, stabilire]
 = USESState (evaluare);
[...]
{selectat & amp; & amp; (
 & lt; ratingul de scădere = {Culorterting}
Setare = {Stinging} / & GT;
)} 

20. Creați animație Star

Evaluările de stele vor fi decolorate odată ce cardul a flipped. Folosind. UseTrail. Cârlig din arcul reacției, putem aplica arcuri la mai multe componente, unul după altul.

Deschide Startrating / index.js. și adăugați cârligul. Primul argument va defini numărul de izvoare pentru a face.

 const animatestars = UseTrail (5, {
Config: {
Fricțiune: 22,
Tensiune: 500.
},
De la: {opacitate: 0,
transforma: "scară (0.8)"},
Opacitate: 1,
Transformare: "Scala (1)"
}); 

21. Aplicați stele la componenta

Ultimul lucru pe care trebuie să-l facem este să afișăm de fapt aceste stele. Animatedstars. Variabila conține acum o serie de izvoare, pe care le putem repeta și se aplică pe card.

Pentru fiecare stea, arată un & lt; animatestar & gt; Componenta din interiorul principalului Startrant Div. Răspândiți recuzele de stil pentru a aplica toate efectele la fiecare componentă. Când ați făcut clic, trimiteți noul rating părintelui & lt; evaluareCard & gt; componentă.

 {animatestarss.map ((recuzită, index) = & gt; (
& lt; animatedstar
activ = {index + 1 & lt; = rating}
onclick = {e = & gt; {
e.stoppropagare ();
Setare (index + 1);
}}
cheie = {index}
Stil = {{{... Props}}
/ & gt;
))} 

Acest articol a fost publicat inițial în revista Creative Web Design Web designer . Cumpăra problema 288. sau Abonati-va .

Citeste mai mult:

• Dezvoltați componente reacționate reutilizabile
• Cele mai bune laptopuri pentru programare în 2019
• 35 Instrumente de design web pentru a vă ajuta să lucrați mai inteligent