Animatsioonid võivad olla suurepärane viis teie Reacti rakenduse kasutuskogemuse parandamiseks. Need võivad aidata muuta suhtluse sujuvamaks ning anda visuaalset tagasisidet või juhtida tähelepanu konkreetsele elemendile.

Reacti abil saate CSS-animatsioonidega töötada mitmel viisil, alates natiivsest lahendusest kuni kolmanda osapoole teekideni.

Miks kasutada Reactis animatsioone?

Põhjuseid, miks võiksite oma Reacti rakenduses animatsioone kasutada, on palju. Mõned levinumad põhjused on järgmised:

  • Muutes suhtluse loomulikumaks. Animatsioonid võivad muuta kasutaja interaktsiooni loomulikumaks ja sujuvamaks. Näiteks kui kasutate lülituskomponenti, võiksite animeerida lülitusnuppu olekute "sees" ja "väljas" vahel. Teine näide on edenemisribad, saate luua animeeritud edenemisriba teie reageerimisrakenduse lehtede jaoks.
  • Visuaalse tagasiside andmine. Animatsioonid võivad anda kasutajale visuaalset tagasisidet. Näiteks kui kasutaja klõpsab nupul, võite soovida nuppu animeerida, et näidata, et rakendus on selle toimingu registreerinud.
  • Kasutaja tähelepanu juhtimine. Animatsioonid võivad suunata kasutaja tähelepanu konkreetsele elemendile. Näiteks kui teil on ekraanile ilmuv modaalne dialoog, võiksite kasutada animatsiooni, et juhtida sellele kasutaja tähelepanu.
  • Kiireloomulisuse tunde tekitamine.Animatsioonid võivad tekitada kiireloomulisuse või tähtsuse tunde. Näiteks kui teil on taimeri komponent, mis loeb maha, võiksite tähtaja lähenedes kasutada kiireloomulisuse kajastamiseks animatsiooni.

Animatsioonide lisamiseks Reacti komponentidele on mitu võimalust. Siit saate teada, kuidas kasutada, on tekstisisesed animatsioonid, reageerimisanimatsioonide teek ja reageerimise lihtsa animeerimise teek.

Alustage põhilise reageerimisrakenduse loomine, seejärel järgige oma valitud meetodit.

1. meetod: tekstisiseste stiilianimatsioonide kasutamine

Oletame näiteks, et soovite komponendi animeerida nii, et see nupul klõpsates tuhmub. Seda saate teha järgmise koodiga:

importida Reageerige, { komponent } alates 'reageerida';
klassFadeInOutulatubKomponent{
konstruktor(rekvisiidid) {
Super(rekvisiidid);


see.state = {
 on Nähtav: vale
 };
 }


render() {
konst stiilid = {
läbipaistmatus: see.riik.on Nähtav? 1: 0,
 üleminek: 'läbipaistmatus 2s'
 };


tagasi (
<div>
<div style={styles}>
 Tere, Maailm!
</div>
<nupp onClick={this.toggleVisibility}>
 Lülita sisse
</button>
</div>
 );
 }


toggleVisibility = () => {
see.setState (prevState => ({
on Nähtav: !prevState.on Nähtav
 }));
 }
}
eksportidavaikimisi FadeInOut;

Selles näites on stiiliobjektil läbipaistmatuse ja ülemineku omadused. Läbipaistmatus on 0, kui komponent ei ole nähtav, ja 1, kui see on nähtav. Üleminekuomadus on "läbipaistmatus 2s", mis põhjustab muutumisel läbipaistmatuse ülemineku kahe sekundi jooksul.

Nupp lülitab komponendi nähtavuse sisse. Kui keegi klõpsab nupul, värskendatakse olekumuutujat isVisible ja komponent muutub olenevalt selle hetkeolekust sisse või välja.

2. meetod: React-animations Library kasutamine

Teine viis animatsioonide lisamiseks Reacti komponentidele on kasutada teeki, näiteks react-animatsioone. See teek pakub komplekti eelmääratletud animatsioone, mida saate kasutada oma Reacti komponentides.

Reaktsioonianimatsioonide kasutamiseks peate esmalt installima teegi.

npm installida reageerivad animatsioonid -- salvestada

Samuti peate installima aphrodite, mis sõltub reageerivatest animatsioonidest:

npm installida afrodiit -- salvestada

Kui olete teegid installinud, saate importida animatsioonid, mida soovite kasutada.

importida { fadeIn, fadeOut } alates „reageerivad animatsioonid”;

Seejärel saate oma komponentides kasutada animatsioone.

importida Reageerige, { komponent } alates 'reageerida';
importida { Style Sheet, css } alates "aphrodite";
importida { fadeIn, fadeOut } alates „reageerivad animatsioonid”;
konst styles = StyleSheet.create({
 hajuma: {
 animatsiooni nimi: fadeIn,
 animatsiooni kestus: '2s'
 },
 hääbuma: {
 animatsiooni nimi: fadeOut,
 animatsiooni kestus: '2s'
 }
});


klassFadeInOutulatubKomponent{
konstruktor(rekvisiidid) {
Super(rekvisiidid);


see.state = {
 on Nähtav: vale
 };
 }


render() {
konst klassinimi = see.state.isVissible? css (styles.fadeIn): css (styles.fadeOut);


tagasi (
<div>
<div className={className}>
 Tere, Maailm!
</div>
<nupp onClick={this.toggleVisibility}>
 Lülita sisse
</button>
</div>
 );
 }


toggleVisibility = () => {
see.setState (prevState => ({
on Nähtav: !prevState.on Nähtav
 }));
 }
}
eksportidavaikimisi FadeInOut;

See näide algab fadeIn ja fadeOut animatsioonide importimisega react-animatsioonide teegist. Seejärel määratleb see stiiliobjekti koos fadeIn ja fadeOut animatsioonidega ning animatsiooni kestuse väärtuseks on seatud kaks sekundit.

Nupp lülitab komponendi nähtavuse sisse. Kui keegi sellel klõpsab, värskendatakse isVisible olekumuutujat ja komponent muutub olenevalt oma praegusest olekust sisse või välja.

3. meetod: React-lihtne-animate teegi kasutamine

React-lihtne-animeerimise teek pakub lihtsat viisi animatsioonide lisamiseks Reacti komponentidele. See pakub deklaratiivset API-d, mis muudab keerukate animatsioonide määratlemise lihtsaks.

Teegi kasutamiseks peate selle esmalt installima:

npm installida reageerima-lihtsalt-animeerima -- salvestada

Seejärel saate seda kasutada oma komponentides:

importida Reageerige, { komponent } alates 'reageerida';
importida { Animate, AnimateKeyframes} alates "reage-lihtne-animate";
klassRakendusulatubKomponent{
 render() {
tagasi (
<div>
<Animeerida
 mängida
alustada={{
 läbipaistmatus: 0
 }}
lõpp={{
 läbipaistmatus: 1
 }}
>
<div>
 Tere, Maailm!
</div>
</Animate>
<AnimateKeyframes
 mängida
 kestus={2}
 võtmekaadrid={[
 { läbipaistmatus: 0, teisendus: 'translateX (-100px)' },
 { läbipaistmatus: 1, teisendus: 'translateX(0px)' }
 ]}
>
<div>
 Tere, Maailm!
</div>
</AnimateKeyframes>
</div>
 );
 }
}
eksportidavaikimisi Rakendus;

The Animeerida komponent tuhmub elemendis div. See algab läbipaistmatusega 0 ja lõpeb läbipaistmatusega 1. Esitusrekvisiit on seatud väärtusele Tõene, mis paneb komponendi paigaldamisel animatsiooni automaatselt esitama.

The AnimateKeyframes komponent animeerib div-elemendi kahe sekundi jooksul. Võtmekaadrite massiiv määrab animatsiooni algus- ja lõppoleku. Esimese võtmekaadri läbipaistmatus on 0 ja translateX väärtus -100 pikslit. Teise võtmekaadri läbipaistmatus on 1 ja translateX väärtus 0 pikslit.

Suurendage kasutajate seotust animatsioonidega

Nüüd teate mõningaid viise, kuidas saate oma Reacti rakenduses animatsioone kasutada. Saate kasutada animatsioone, et suurendada kasutajate seotust oma rakendusega.

Näiteks võite soovida kasutada animatsiooni, et premeerida kasutajat ülesande täitmise eest. See võib olla midagi nii lihtsat nagu lühike "spinner" animatsioon või keerulisem animatsioon, mis esitatakse siis, kui kasutaja läbib mängu taseme.

Saate oma Reacti rakenduse ka veebis tasuta juurutada selliste teenustega nagu Githubi lehed või Heroku.