Neka vaša React aplikacija oživi s animacijama

Animacije mogu biti izvrstan način za poboljšanje korisničkog iskustva vaše React aplikacije. Oni mogu pomoći da interakcija bude glatkija, a također mogu pružiti vizualnu povratnu informaciju ili privući pozornost na određeni element.

Postoji mnogo načina na koje možete raditi s CSS animacijama koristeći React, od izvornog rješenja do biblioteka trećih strana.

Zašto koristiti animacije u Reactu?

Mnogo je razloga zašto biste mogli koristiti animacije u svojoj React aplikaciji. Neki od najčešćih razloga uključuju:

• Neka interakcije budu prirodnije. Animacije mogu pomoći da korisničke interakcije budu prirodnije i glatkije. Na primjer, ako koristite komponentu za prebacivanje, možda biste željeli animirati gumb za prebacivanje između stanja "uključeno" i "isključeno". Drugi primjer su trake napretka, možete stvoriti animiranu traku napretka za stranice vaše aplikacije React.
• Pružanje vizualnih povratnih informacija. Animacije mogu pružiti vizualnu povratnu informaciju korisniku. Na primjer, ako korisnik klikne gumb, možda ćete htjeti animirati gumb kako biste označili da je aplikacija registrirala tu radnju.
  instagram viewer
• Usmjeravanje pažnje korisnika. Animacije mogu usmjeriti pozornost korisnika na određeni element. Na primjer, ako imate modalni dijaloški okvir koji se pojavljuje na zaslonu, možda biste trebali upotrijebiti animaciju kako biste skrenuli pozornost korisnika na njega.
• Stvaranje osjećaja hitnosti.Animacije mogu stvoriti osjećaj hitnosti ili važnosti. Na primjer, ako imate komponentu mjerača vremena koja odbrojava, možda ćete htjeti upotrijebiti animaciju koja odražava hitnost kako se rok približava.

Postoji nekoliko načina za dodavanje animacija React komponentama. Tri koje ćete ovdje naučiti o korištenju su ugrađene stilske animacije, knjižnica react-animacija i knjižnica react-simple-animate.

Započnite s stvaranje osnovne aplikacije za reakciju, zatim slijedite metodu po svom izboru.

Metoda 1: Korištenje animacija umetnutog stila

Na primjer, recimo da želite animirati komponentu tako da izblijedi kada kliknete gumb. To možete učiniti pomoću sljedećeg koda:

uvoz Reagiraj, {Component} iz 'reagirati';
razredaFadeInOutproteže sekomponenta{
konstruktor(rekviziti) {
super(rekviziti);
ovaj.stanje = {
 je vidljivo: lažno
 };
 }
render() {
konst stilovi = {
neprozirnost: ovaj.država.isVisible? 1: 0,
 tranzicija: 'neprozirnost 2s'
 };
povratak (
<div>
<div style={styles}>
 Pozdrav svijete!
</div>
<gumb onClick={this.toggleVisibility}>
 Prebacivanje
</button>
</div>
 );
 }
prebaciVidljivost = () => {
ovaj.setState (prevState => ({
je Vidljivo: !prevState.isVisible
 }));
 }
}
izvozzadano FadeInOut;

U ovom primjeru objekt stila ima svojstva neprozirnosti i prijelaza. Neprozirnost je 0 kada komponenta nije vidljiva, a 1 kada jest. Svojstvo prijelaza je "opacity 2s", što će uzrokovati prijelaz neprozirnosti tijekom dvije sekunde kada se promijeni.

Gumb mijenja vidljivost komponente. Kada netko klikne na gumb, varijabla stanja isVisible ažurira se i komponenta će se pojavljivati ​​ili nestajati ovisno o trenutnom stanju.

Metoda 2: Korištenje biblioteke react-animations

Drugi način dodavanja animacija React komponentama je korištenje biblioteke kao što je react-animations. Ova biblioteka pruža skup unaprijed definiranih animacija koje možete koristiti u svojim React komponentama.

Da biste koristili react-animacije, prvo morate instalirati biblioteku:

npm instalirati reagirati-animacije --uštedjeti

Također morate instalirati Aphrodite, koja je ovisnost react-animacija:

npm instalirati Afrodita --uštedjeti

Nakon što instalirate biblioteke, možete uvesti animacije koje želite koristiti:

uvoz {fadeIn, fadeOut} iz 'reagirajte-animacije';

Zatim možete koristiti animacije u svojim komponentama:

uvoz Reagiraj, {Component} iz 'reagirati';
uvoz { Stilski list, css } iz 'Afrodita';
uvoz {fadeIn, fadeOut} iz 'reagirajte-animacije';
konst stilovi = StyleSheet.create({
 nestati u: {
 animationName: fadeIn,
 animacijaTrajanje: '2s'
 },
 izblijediti: {
 animationName: fadeOut,
 animacijaTrajanje: '2s'
 }
});
razredaFadeInOutproteže sekomponenta{
konstruktor(rekviziti) {
super(rekviziti);
ovaj.stanje = {
 je vidljivo: lažno
 };
 }
render() {
konst ime klase = ovaj.stanje.isVisible? css (styles.fadeIn): css (styles.fadeOut);
povratak (
<div>
<div className={className}>
 Pozdrav svijete!
</div>
<gumb onClick={this.toggleVisibility}>
 Prebacivanje
</button>
</div>
 );
 }
prebaciVidljivost = () => {
ovaj.setState (prevState => ({
je Vidljivo: !prevState.isVisible
 }));
 }
}
izvozzadano FadeInOut;

Ovaj primjer počinje uvozom fadeIn i fadeOut animacija iz biblioteke react-animations. Zatim definira objekt stilova s ​​animacijama fadeIn i fadeOut i animationDuration postavljenom na dvije sekunde.

Gumb će promijeniti vidljivost komponente. Kada netko klikne na nju, varijabla stanja isVisible ažurirat će se, a komponenta će se pojavljivati ​​ili nestajati ovisno o trenutnom stanju.

Metoda 3: Korištenje biblioteke react-simple-animate

Biblioteka react-simple-animate pruža jednostavan način dodavanja animacija React komponentama. Nudi deklarativni API koji olakšava definiranje složenih animacija.

Da biste koristili biblioteku, morate je prvo instalirati:

npm instalirati reagirati-jednostavno-animirati --uštedjeti

Zatim ga možete koristiti u svojim komponentama:

uvoz Reagiraj, {Component} iz 'reagirati';
uvoz { Animate, AnimateKeyframes} iz "reagiraj-jednostavno-animiraj";
razredaaplikacijaproteže sekomponenta{
 render() {
povratak (
<div>
<Animirati
 igra
početak={{
 neprozirnost: 0
 }}
kraj={{
 neprozirnost: 1
 }}
>
<div>
 Pozdrav svijete!
</div>
</Animate>
<AnimateKeyframes
 igra
 trajanje={2}
 ključne slike={[
 { neprozirnost: 0, transformacija: 'translateX(-100px)' },
 { neprozirnost: 1, transformacija: 'prevediX(0px)' }
 ]}
>
<div>
 Pozdrav svijete!
</div>
</AnimateKeyframes>
</div>
 );
 }
}
izvozzadano aplikacija;

The Animirati komponenta blijedi u elementu div. Počinje s neprozirnošću od 0 i završava s neprozirnošću od 1. Prop play je postavljen na true, što će uzrokovati automatsku reprodukciju animacije kada se komponenta montira.

The AnimateKeyframes komponenta animira div element tijekom dvije sekunde. Niz ključnih kadrova određuje početno i završno stanje animacije. Prvi ključni okvir ima neprozirnost 0 i vrijednost translateX od -100px. Drugi ključni okvir ima neprozirnost 1 i vrijednost translateX 0px.

Povećajte angažman korisnika pomoću animacija

Sada znate neke od načina na koje možete koristiti animacije u svojoj React aplikaciji. Možete koristiti animacije kako biste povećali angažman korisnika s vašom aplikacijom.

Na primjer, možda želite upotrijebiti animaciju da biste nagradili korisnika za izvršenje zadatka. To može biti nešto tako jednostavno kao kratka "spinner" animacija ili složenija animacija koja se reproducira kada korisnik završi razinu u igri.

Također možete besplatno implementirati svoju React aplikaciju na web s uslugama kao što su Github stranice ili Heroku.