Animacijos gali būti puikus būdas pagerinti jūsų „React“ programos vartotojo patirtį. Jie gali padėti sklandžiau bendrauti, taip pat pateikti vaizdinį grįžtamąjį ryšį arba atkreipti dėmesį į tam tikrą elementą.

Yra daug būdų, kaip galite dirbti su CSS animacija naudojant React, pradedant vietiniu sprendimu ir baigiant trečiųjų šalių bibliotekomis.

Kodėl „React“ naudoti animacijas?

Yra daug priežasčių, kodėl galbūt norėsite naudoti animaciją savo „React“ programoje. Kai kurios dažniausiai pasitaikančios priežastys:

  • Kad sąveika būtų natūralesnė. Animacijos gali padėti padaryti naudotojo sąveiką natūralesnę ir sklandesnę. Pavyzdžiui, jei naudojate perjungimo komponentą, galbūt norėsite animuoti perjungimo mygtuką tarp būsenų „įjungta“ ir „išjungta“. Kitas pavyzdys yra progreso juostos, galite sukurti animuotą eigos juostą jūsų react programos puslapiams.
  • Vaizdinio grįžtamojo ryšio teikimas. Animacijos gali suteikti vaizdinį grįžtamąjį ryšį vartotojui. Pavyzdžiui, jei vartotojas spustelėja mygtuką, galbūt norėsite jį animuoti, kad parodytumėte, jog programa užregistravo tą veiksmą.
    • instagram viewer
  • Vartotojo dėmesio nukreipimas. Animacijos gali nukreipti vartotojo dėmesį į tam tikrą elementą. Pavyzdžiui, jei ekrane rodomas modalinis dialogo langas, galbūt norėsite naudoti animaciją, kad atkreiptumėte į jį vartotojo dėmesį.
  • Skubos jausmo kūrimas.Animacija gali sukurti skubos ar svarbos jausmą. Pavyzdžiui, jei turite laikmačio komponentą, kuris skaičiuoja atgal, galbūt norėsite naudoti animaciją, kad atspindėtų skubumą artėjant terminui.

Yra keletas būdų, kaip pridėti animaciją prie „React“ komponentų. Trys, apie kurias sužinosite, kaip naudoti čia, yra įterptosios stiliaus animacijos, react-animations biblioteka ir react-simple-animate biblioteka.

Pradėkite nuo sukurti pagrindinę reagavimo programą, tada vadovaukitės pasirinktu metodu.

1 būdas: eilutinių stiliaus animacijų naudojimas

Pavyzdžiui, tarkime, kad norite animuoti komponentą, kad jis išnyktų spustelėjus mygtuką. Tai galite padaryti naudodami šį kodą:

importuoti Reaguoti, { komponentas } iš „reaguoti“;
klasėFadeInOuttęsiasiKomponentas{
konstruktorius(rekvizitas) {
super(rekvizitas);


tai.state = {
 yra matomas: klaidinga
 };
 }


render() {
konst stiliai = {
neskaidrumas: tai.valstybė.yra Matoma? 1: 0,
 perėjimas: 'neskaidrumas 2s'
 };


grąžinti (
<div>
<div style={styles}>
 Labas pasauli!
</div>
<mygtukas onClick={this.toggleVisibility}>
 Perjungti
</button>
</div>
 );
 }


toggleVisibility = () => {
tai.setState (prevState => ({
yra Matoma: !prevState.yra Matoma
 }));
 }
}
eksportuotinumatytas FadeInOut;

Šiame pavyzdyje stiliaus objektas turi neskaidrumo ir perėjimo savybių. Nepermatomumas yra 0, kai komponentas nematomas, ir 1, kai jis matomas. Perėjimo savybė yra „nepermatomumas 2s“, todėl neskaidrumas pasikeis per dvi sekundes.

Mygtukas perjungia komponento matomumą. Kai kas nors spustelėja mygtuką, isVisible būsenos kintamasis atnaujinamas ir komponentas išnyks arba išnyks, atsižvelgiant į jo dabartinę būseną.

2 būdas: react-animations bibliotekos naudojimas

Kitas būdas pridėti animaciją prie „React“ komponentų yra naudoti biblioteką, pvz., „React“ animacijas. Šioje bibliotekoje pateikiamas iš anksto nustatytų animacijų rinkinys, kurį galite naudoti savo „React“ komponentuose.

Norėdami naudoti reagavimo animacijas, pirmiausia turėsite įdiegti biblioteką:

npm diegti reaguoti-animacijos --sutaupyti

Taip pat turite įdiegti afroditę, kuri yra reaktyviųjų animacijų priklausomybė:

npm diegti afroditė --sutaupyti

Įdiegę bibliotekas galite importuoti norimas naudoti animacijas:

importuoti { fadeIn, fadeOut } iš „reaguojančios animacijos“;

Tada galite naudoti animacijas savo komponentuose:

importuoti Reaguoti, { komponentas } iš „reaguoti“;
importuoti { Style Sheet, css } iš "afroditė";
importuoti { fadeIn, fadeOut } iš „reaguojančios animacijos“;
konst styles = StyleSheet.create({
 fadeIn: {
 animacijos pavadinimas: fadeIn,
 animacijaTrukmė: '2s'
 },
 Išnykti: {
 animacijos pavadinimas: fadeOut,
 animacijaTrukmė: '2s'
 }
});


klasėFadeInOuttęsiasiKomponentas{
konstruktorius(rekvizitas) {
super(rekvizitas);


tai.state = {
 yra matomas: klaidinga
 };
 }


render() {
konst klasės pavadinimas = tai.state.isVisible? css (styles.fadeIn): css (styles.fadeOut);


grąžinti (
<div>
<div className={className}>
 Labas pasauli!
</div>
<mygtukas onClick={this.toggleVisibility}>
 Perjungti
</button>
</div>
 );
 }


toggleVisibility = () => {
tai.setState (prevState => ({
yra Matoma: !prevState.yra Matoma
 }));
 }
}
eksportuotinumatytas FadeInOut;

Šis pavyzdys pradedamas importuojant fadeIn ir fadeOut animacijas iš react-animations bibliotekos. Tada jis apibrėžia stilių objektą su fadeIn ir fadeOut animacijomis, o animacijos trukmė nustatoma į dvi sekundes.

Mygtukas perjungs komponento matomumą. Kai kas nors jį spustelėja, būsenos kintamasis isVisible bus atnaujintas, o komponentas išnyks arba išnyks, atsižvelgiant į jo dabartinę būseną.

3 būdas: „React-simple-animate“ bibliotekos naudojimas

„React-simple-animate“ biblioteka yra paprastas būdas pridėti animaciją prie „React“ komponentų. Ji siūlo deklaratyvią API, kuri leidžia lengvai apibrėžti sudėtingas animacijas.

Norėdami naudoti biblioteką, pirmiausia turite ją įdiegti:

npm diegti reaguoti-paprasta-animuoti --sutaupyti

Tada galite naudoti jį savo komponentuose:

importuoti Reaguoti, { komponentas } iš „reaguoti“;
importuoti { Animate, AnimateKeyframes} iš „reaguoti-paprasta-gyvinti“;
klasėProgramėlėtęsiasiKomponentas{
 render() {
grąžinti (
<div>
<Animuoti
 žaisti
pradėti={{
 neskaidrumas: 0
 }}
galas={{
 neskaidrumas: 1
 }}
>
<div>
 Labas pasauli!
</div>
</Animate>
<AnimateKeyframes
 žaisti
 trukmė={2}
 keyframes={[
 { neskaidrumas: 0, transformuoti: 'išverstiX (-100 piks.)' },
 { neskaidrumas: 1, transformuoti: 'išverstiX(0px)' }
 ]}
>
<div>
 Labas pasauli!
</div>
</AnimateKeyframes>
</div>
 );
 }
}
eksportuotinumatytas Programėlė;

The Animuoti komponentas išnyksta div elemente. Jis prasideda neskaidrumu 0 ir baigiasi 1 neskaidrumu. Atkūrimo rekvizitas nustatytas į „true“, todėl animacija bus paleista automatiškai, kai komponentas bus prijungtas.

The AnimateKeyframes komponentas animuoja div elementą per dvi sekundes. Pagrindinių kadrų masyvas nurodo animacijos pradžios ir pabaigos būsenas. Pirmojo pagrindinio kadro neskaidrumas yra 0, o translateX reikšmė -100 pikselių. Antrojo pagrindinio kadro neskaidrumas yra 1, o translateX reikšmė – 0 pikselių.

Padidinkite naudotojų įsitraukimą naudojant animacijas

Dabar žinote keletą būdų, kaip galite naudoti animacijas savo programoje „React“. Galite naudoti animacijas, kad padidintumėte naudotojų įsitraukimą į programą.

Pavyzdžiui, galbūt norėsite naudoti animaciją, kad apdovanotumėte vartotoją už užduoties atlikimą. Tai gali būti kažkas tokio paprasto, kaip trumpa „suktuko“ animacija arba sudėtingesnė animacija, kuri paleidžiama, kai vartotojas baigia žaidimo lygį.

Taip pat galite nemokamai įdiegti „React“ programą žiniatinklyje naudodami tokias paslaugas kaip „Github“ puslapiai arba „Heroku“.