Animacije so lahko odličen način za izboljšanje uporabniške izkušnje vaše aplikacije React. Pomagajo lahko, da se interakcije počutijo bolj tekoče, lahko pa tudi zagotovijo vizualno povratno informacijo ali pritegnejo pozornost na določen element.

Obstaja veliko načinov, kako lahko delate z animacijami CSS z uporabo Reacta, od izvorne rešitve do knjižnic tretjih oseb.

Zakaj uporabljati animacije v React?

Obstaja veliko razlogov, zakaj bi morda želeli uporabiti animacije v svoji aplikaciji React. Nekateri najpogostejši razlogi vključujejo:

  • Poskrbite, da bodo interakcije bolj naravne. Animacije lahko pripomorejo k bolj naravni in tekoči interakciji uporabnikov. Na primer, če uporabljate preklopno komponento, boste morda želeli animirati preklopni gumb med stanjema »vklopljeno« in »izklopljeno«. Drug primer so vrstice napredka, lahko ustvarite animirano vrstico napredka za strani vaše aplikacije React.
  • Zagotavljanje vizualnih povratnih informacij. Animacije lahko uporabniku zagotovijo vizualno povratno informacijo. Na primer, če uporabnik klikne gumb, boste morda želeli animirati gumb, ki bo pokazal, da je aplikacija registrirala to dejanje.
    instagram viewer
  • Usmerjanje pozornosti uporabnika. Animacije lahko usmerjajo uporabnikovo pozornost na določen element. Na primer, če imate modalno pogovorno okno, ki se prikaže na zaslonu, boste morda želeli uporabiti animacijo, da nanj pritegnete pozornost uporabnika.
  • Ustvarjanje občutka nujnosti.Animacije lahko ustvarijo občutek nujnosti ali pomembnosti. Na primer, če imate komponento časovnika, ki odšteva, boste morda želeli uporabiti animacijo, ki odraža nujnost, ko se bliža rok.

Obstaja več načinov za dodajanje animacij komponentam React. Trije, o uporabi katerih se boste tukaj naučili, so vgrajene animacije v slogu, knjižnica react-animations in knjižnica react-simple-animate.

Začnite z ustvarjanje osnovne aplikacije React, nato sledite metodi po vaši izbiri.

1. način: Uporaba animacij v slogu v vrstici

Na primer, recimo, da želite animirati komponento, tako da zbledi, ko kliknete gumb. To lahko storite z naslednjo kodo:

uvoz Reagiraj, {Component} od 'reagirati';
razredFadeInOutse raztezaKomponenta{
konstruktor(rekviziti) {
super(rekviziti);


to.state = {
 isVisible: lažno
 };
 }


render() {
konst slogi = {
nepreglednost: to.država.isVisible? 1: 0,
 prehod: 'motnost 2s'
 };


vrnitev (
<div>
<div style={slogi}>
 Pozdravljen, svet!
</div>
<gumb onClick={this.toggleVisibility}>
 Preklopi
</button>
</div>
 );
 }


preklopiVidivost = () => {
to.setState (prevState => ({
isVisible: !prevState.isVisible
 }));
 }
}
izvozprivzeto FadeInOut;

V tem primeru ima slogovni objekt lastnosti motnosti in prehoda. Motnost je 0, ko komponenta ni vidna, in 1, ko je. Lastnost prehoda je »opacity 2s«, kar bo povzročilo prehod motnosti v dveh sekundah, ko se spremeni.

Gumb preklopi vidnost komponente. Ko nekdo klikne gumb, se spremenljivka stanja isVisible posodobi in komponenta bo zbledela ali izginila, odvisno od trenutnega stanja.

2. način: Uporaba knjižnice odzivnih animacij

Drug način za dodajanje animacij komponentam React je uporaba knjižnice, kot je react-animations. Ta knjižnica ponuja niz vnaprej določenih animacij, ki jih lahko uporabite v komponentah React.

Za uporabo reakcijskih animacij morate najprej namestiti knjižnico:

npm namestite odzivne animacije --shrani

Prav tako morate namestiti Aphrodite, ki je odvisna od reakcijskih animacij:

npm namestite afrodita --shrani

Ko namestite knjižnice, lahko uvozite animacije, ki jih želite uporabiti:

uvoz {fadeIn, fadeOut} od 'react-animacije';

Nato lahko uporabite animacije v svojih komponentah:

uvoz Reagiraj, {Component} od 'reagirati';
uvoz {Slogovna tabela, css} od 'afrodita';
uvoz {fadeIn, fadeOut} od 'react-animacije';
konst styles = StyleSheet.create({
 fadeIn: {
 animationName: fadeIn,
 animacijaTrajanje: '2s'
 },
 zbledeti: {
 animationName: fadeOut,
 animacijaTrajanje: '2s'
 }
});


razredFadeInOutse raztezaKomponenta{
konstruktor(rekviziti) {
super(rekviziti);


to.state = {
 isVisible: lažno
 };
 }


render() {
konst ime razreda = to.state.isVisible? css (styles.fadeIn): css (styles.fadeOut);


vrnitev (
<div>
<div className={className}>
 Pozdravljen, svet!
</div>
<gumb onClick={this.toggleVisibility}>
 Preklopi
</button>
</div>
 );
 }


preklopiVidivost = () => {
to.setState (prevState => ({
isVisible: !prevState.isVisible
 }));
 }
}
izvozprivzeto FadeInOut;

Ta primer se začne z uvozom animacij fadeIn in fadeOut iz knjižnice react-animations. Nato definira objekt styles z animacijama fadeIn in fadeOut ter animationDuration, nastavljeno na dve sekundi.

Gumb bo preklopil vidnost komponente. Ko jo nekdo klikne, se bo spremenljivka stanja isVisible posodobila in komponenta bo zbledela ali izginila, odvisno od trenutnega stanja.

3. način: Uporaba knjižnice react-simple-animate

Knjižnica react-simple-animate ponuja preprost način za dodajanje animacij komponentam React. Ponuja deklarativni API, ki olajša definiranje kompleksnih animacij.

Če želite uporabljati knjižnico, jo morate najprej namestiti:

npm namestite reagirati preprosto-živi --shrani

Nato ga lahko uporabite v svojih komponentah:

uvoz Reagiraj, {Component} od 'reagirati';
uvoz { Animate, AnimateKeyframes} od "react-simple-animate";
razredaplikacijase raztezaKomponenta{
 render() {
vrnitev (
<div>
<Animiraj
 igrati
začetek={{
 motnost: 0
 }}
konec={{
 motnost: 1
 }}
>
<div>
 Pozdravljen, svet!
</div>
</Animate>
<AnimateKeyframes
 igrati
 trajanje={2}
 ključne sličice={[
 { motnost: 0, transformacija: 'translateX(-100px)' },
 { motnost: 1, transformacija: 'translateX(0px)' }
 ]}
>
<div>
 Pozdravljen, svet!
</div>
</AnimateKeyframes>
</div>
 );
 }
}
izvozprivzeto aplikacija;

The Animiraj komponenta zbledi v elementu div. Začne se z motnostjo 0 in konča z motnostjo 1. Podpora za predvajanje je nastavljena na true, kar bo povzročilo samodejno predvajanje animacije, ko se komponenta namesti.

The AnimateKeyframes komponenta animira element div v dveh sekundah. Matrika ključnih sličic določa začetno in končno stanje animacije. Prvi ključni okvir ima motnost 0 in vrednost translateX -100px. Drugi ključni okvir ima motnost 1 in vrednost translateX 0px.

Povečajte sodelovanje uporabnikov z animacijami

Zdaj poznate nekaj načinov, kako lahko uporabite animacije v svoji aplikaciji React. Z animacijami lahko povečate sodelovanje uporabnikov z vašo aplikacijo.

Na primer, morda boste želeli uporabiti animacijo za nagrajevanje uporabnika za dokončanje naloge. To je lahko nekaj tako preprostega, kot je kratka animacija "spinner" ali bolj zapletena animacija, ki se predvaja, ko uporabnik dokonča stopnjo v igri.

Svojo aplikacijo React lahko tudi brezplačno namestite v splet s storitvami, kot so strani Github ali Heroku.