Animācijas var būt lielisks veids, kā uzlabot React lietojumprogrammas lietošanas pieredzi. Tie var palīdzēt padarīt mijiedarbību vienmērīgāku, kā arī sniegt vizuālu atgriezenisko saiti vai pievērst uzmanību kādam konkrētam elementam.

Ir daudz veidu, kā strādāt ar CSS animācijām, izmantojot React, sākot no vietējā risinājuma līdz trešo pušu bibliotēkām.

Kāpēc programmā React izmantot animācijas?

Ir daudz iemeslu, kāpēc jūs varētu vēlēties savā React lietojumprogrammā izmantot animācijas. Daži no visbiežāk sastopamajiem iemesliem ir:

  • Padarot mijiedarbību dabiskāku. Animācijas var palīdzēt padarīt lietotāju mijiedarbību dabiskāku un vienmērīgāku. Piemēram, ja izmantojat pārslēgšanas komponentu, iespējams, vēlēsities animēt pārslēgšanas pogu starp "ieslēgts" un "izslēgts" stāvokli. Vēl viens piemērs ir progresa joslas, jūs varat izveidot animētu progresa joslu jūsu React lietotnes lapām.
  • Vizuālas atsauksmes nodrošināšana. Animācijas var sniegt lietotājam vizuālu atgriezenisko saiti. Piemēram, ja lietotājs noklikšķina uz pogas, iespējams, vēlēsities pogu animēt, lai norādītu, ka lietotne ir reģistrējusi šo darbību.
    instagram viewer
  • Lietotāja uzmanības vadīšana. Animācijas var novirzīt lietotāja uzmanību uz konkrētu elementu. Piemēram, ja ekrānā tiek parādīts modāls dialoglodziņš, iespējams, vēlēsities izmantot animāciju, lai pievērstu tam lietotāja uzmanību.
  • Steidzamības sajūtas radīšana.Animācijas var radīt steidzamības vai svarīguma sajūtu. Piemēram, ja jums ir taimera komponents, kas skaita atpakaļskaitīšanu, iespējams, vēlēsities izmantot animāciju, lai atspoguļotu steidzamību, tuvojoties termiņam.

Ir vairāki veidi, kā React komponentiem pievienot animācijas. Trīs, ko jūs uzzināsit par to izmantošanu šeit, ir iekļautas stila animācijas, react-animations bibliotēka un react-simple-animate bibliotēka.

Sāciet ar pamata reaģēšanas lietotnes izveide, pēc tam izpildiet izvēlēto metodi.

1. metode. Iekļauto stila animāciju izmantošana

Piemēram, pieņemsim, ka vēlaties animēt komponentu, lai tas pazustu, noklikšķinot uz pogas. To var izdarīt, izmantojot šādu kodu:

imports Reaģēt, { komponents } no "reaģēt";
klasēFadeInOutpagarinaKomponents{
konstruktors(rekvizīti) {
super(rekvizīti);


šis.state = {
 ir redzams: viltus
 };
 }


render() {
konst stili = {
necaurredzamība: šis.Valsts.Ir redzams? 1: 0,
 pāreja: 'necaurredzamība 2s'
 };


atgriezties (
<div>
<div style={styles}>
 Sveika pasaule!
</div>
<poga onClick={this.toggleVisibility}>
 Pārslēgt
</button>
</div>
 );
 }


toggleVisibility = () => {
šis.setState (prevState => ({
ir Redzams: !prevState.Ir redzams
 }));
 }
}
eksportētnoklusējuma FadeInOut;

Šajā piemērā stila objektam ir necaurredzamības un pārejas īpašības. Necaurredzamība ir 0, ja komponents nav redzams, un 1, ja tas ir redzams. Pārejas īpašība ir "necaurredzamība 2s", kas izraisīs necaurredzamības pāreju divu sekunžu laikā, kad tā mainās.

Poga pārslēdz komponenta redzamību. Kad kāds noklikšķina uz pogas, statusa mainīgais isVisible tiek atjaunināts, un komponents sāks vai izzudīs atkarībā no tā pašreizējā stāvokļa.

2. metode. React-animations Library izmantošana

Vēl viens veids, kā pievienot animācijas React komponentiem, ir izmantot bibliotēku, piemēram, react-animācijas. Šī bibliotēka nodrošina iepriekš definētu animāciju kopu, ko varat izmantot savos React komponentos.

Lai izmantotu reakcijas animācijas, vispirms jāinstalē bibliotēka:

npm uzstādīt reaģēt-animācijas -- saglabāt

Jums arī jāinstalē afrodīte, kas ir reakcijas animācijas atkarība:

npm uzstādīt afrodīte -- saglabāt

Kad esat instalējis bibliotēkas, varat importēt animācijas, kuras vēlaties izmantot:

imports { fadeIn, fadeOut } no “reaģēšanas animācijas”;

Pēc tam varat izmantot animācijas savos komponentos:

imports Reaģēt, { komponents } no "reaģēt";
imports { Stila lapa, css } no "afrodīte";
imports { fadeIn, fadeOut } no “reaģēšanas animācijas”;
konst stili = StyleSheet.create({
 fadeIn: {
 animācijas nosaukums: fadeIn,
 animācijas ilgums: '2s'
 },
 izbālēt: {
 animācijas nosaukums: fadeOut,
 animācijas ilgums: '2s'
 }
});


klasēFadeInOutpagarinaKomponents{
konstruktors(rekvizīti) {
super(rekvizīti);


šis.state = {
 ir redzams: viltus
 };
 }


render() {
konst klases nosaukums = šis.state.isVisible? css (styles.fadeIn): css (styles.fadeOut);


atgriezties (
<div>
<div className={className}>
 Sveika pasaule!
</div>
<poga onClick={this.toggleVisibility}>
 Pārslēgt
</button>
</div>
 );
 }


toggleVisibility = () => {
šis.setState (prevState => ({
ir Redzams: !prevState.Ir redzams
 }));
 }
}
eksportētnoklusējuma FadeInOut;

Šis piemērs sākas ar fadeIn un fadeOut animāciju importēšanu no react-animations bibliotēkas. Pēc tam tas definē stilu objektu ar fadeIn un fadeOut animācijām, un animācijas ilgums ir iestatīts uz divām sekundēm.

Poga pārslēgs komponenta redzamību. Kad kāds uz tā noklikšķina, statusa mainīgais isVisible tiks atjaunināts, un komponents izzudīs vai izzudīs atkarībā no tā pašreizējā stāvokļa.

3. metode. React-simple-animate bibliotēkas izmantošana

React-simple-animate bibliotēka nodrošina vienkāršu veidu, kā pievienot animācijas React komponentiem. Tas piedāvā deklaratīvu API, kas ļauj viegli definēt sarežģītas animācijas.

Lai izmantotu bibliotēku, vispirms tā jāinstalē:

npm uzstādīt reaģēt-vienkārši-dzīvināt -- saglabāt

Pēc tam varat to izmantot savos komponentos:

imports Reaģēt, { komponents } no "reaģēt";
imports { Animate, AnimateKeyframes} no "reaģēt-vienkārši-animēt";
klasēApppagarinaKomponents{
 render() {
atgriezties (
<div>
<Animēt
 spēlēt
sākt={{
 necaurredzamība: 0
 }}
beigas={{
 necaurredzamība: 1
 }}
>
<div>
 Sveika pasaule!
</div>
</Animate>
<AnimateKeyframes
 spēlēt
 ilgums={2}
 keyframes={[
 { necaurredzamība: 0, pārveidot: 'tulkotX (-100 pikseļi)' },
 { necaurredzamība: 1, transformācija: 'tulkotX(0px)' }
 ]}
>
<div>
 Sveika pasaule!
</div>
</AnimateKeyframes>
</div>
 );
 }
}
eksportētnoklusējuma Lietotne;

The Animēt komponents izgaist div elementā. Tas sākas ar necaurredzamību 0 un beidzas ar necaurredzamību 1. Atskaņošanas rekvizīti ir iestatīti uz True, kas izraisīs animācijas automātisku atskaņošanu, kad komponents tiks piestiprināts.

The AnimateKeyframes komponents animē div elementu divu sekunžu laikā. Atslēgkadru masīvs norāda animācijas sākuma un beigu stāvokli. Pirmā atslēgas kadra necaurredzamība ir 0 un translateX vērtība -100 pikseļi. Otrā atslēgas kadra necaurredzamība ir 1, un translateX vērtība ir 0 pikseļi.

Palieliniet lietotāju iesaisti, izmantojot animācijas

Tagad jūs zināt dažus veidus, kā savā React lietojumprogrammā varat izmantot animācijas. Varat izmantot animācijas, lai palielinātu lietotāju iesaisti jūsu lietojumprogrammā.

Piemēram, iespējams, vēlēsities izmantot animāciju, lai atalgotu lietotāju par uzdevuma izpildi. Tā varētu būt kaut kas tik vienkāršs kā īsa “spinner” animācija vai sarežģītāka animācija, kas tiek atskaņota, kad lietotājs pabeidz spēles līmeni.

Varat arī bez maksas izvietot savu React lietojumprogrammu tīmeklī, izmantojot tādus pakalpojumus kā Github lapas vai Heroku.