Animaatiot voivat olla loistava tapa parantaa React-sovelluksesi käyttökokemusta. Ne voivat auttaa saamaan vuorovaikutuksen tuntumaan sujuvammalta ja voivat myös antaa visuaalista palautetta tai kiinnittää huomion tiettyyn elementtiin.

Voit työskennellä CSS-animaatioiden kanssa Reactin avulla monilla tavoilla natiiviratkaisusta kolmannen osapuolen kirjastoihin.

Miksi käyttää animaatioita Reactissa?

On monia syitä, miksi saatat haluta käyttää animaatioita React-sovelluksessasi. Jotkut yleisimmistä syistä ovat:

  • Vuorovaikutus tuntuu luonnollisemmalta. Animaatiot voivat auttaa saamaan käyttäjien vuorovaikutuksista luonnollisemman ja sujuvamman. Jos esimerkiksi käytät vaihtokomponenttia, saatat haluta animoida vaihtopainikkeen "on"- ja "off"-tilojen välillä. Toinen esimerkki ovat edistymispalkit, voit luo animoitu edistymispalkki react-sovelluksesi sivuille.
  • Visuaalisen palautteen antaminen. Animaatiot voivat antaa käyttäjälle visuaalista palautetta. Jos käyttäjä esimerkiksi napsauttaa painiketta, saatat haluta animoida painikkeen osoittamaan, että sovellus on rekisteröinyt kyseisen toiminnon.
  • Ohjaa käyttäjän huomion. Animaatiot voivat ohjata käyttäjän huomion tiettyyn elementtiin. Jos sinulla on esimerkiksi modaalinen valintaikkuna, joka tulee näkyviin näytölle, saatat haluta käyttää animaatiota kiinnittääksesi käyttäjän huomion siihen.
  • Kiireellisyyden tunteen luominen.Animaatiot voivat luoda tunteen kiireellisyydestä tai tärkeydestä. Jos sinulla on esimerkiksi ajastinkomponentti, joka laskee alaspäin, saatat haluta käyttää animaatiota heijastamaan kiireellisyyttä määräajan lähestyessä.

On olemassa useita tapoja lisätä animaatioita React-komponentteihin. Kolme, joiden käytöstä opit tässä, ovat upotetut tyylianimaatiot, react-animaatiokirjasto ja react-simple-animate -kirjasto.

Aloita perusreact-sovelluksen luominen, noudata sitten valitsemaasi menetelmää.

Tapa 1: Sisäisten tyylianimaatioiden käyttäminen

Oletetaan esimerkiksi, että haluat animoida komponentin niin, että se häviää, kun napsautat painiketta. Voit tehdä tämän seuraavalla koodilla:

tuonti Reagoi, { komponentti } alkaen "reagoi";
luokkaaFadeInOutulottuuKomponentti{
rakentaja(rekvisiitta) {
super(rekvisiitta);


Tämä.state = {
 on Näkyvissä: väärä
 };
 }


render() {
konst tyylit = {
opasiteetti: Tämä.osavaltio.on Näkyvissä? 1: 0,
 siirtyminen: 'opasiteetti 2s'
 };


palata (
<div>
<div style={styles}>
 Hei maailma!
</div>
<button onClick={this.toggleVisibility}>
 Vaihda
</button>
</div>
 );
 }


toggleVisibility = () => {
Tämä.setState (prevState => ({
on Näkyvissä: !prevState.on Näkyvissä
 }));
 }
}
viedäoletuksena FadeInOut;

Tässä esimerkissä tyyliobjektilla on peittävyys ja siirtymäominaisuudet. Peittävyys on 0, kun komponentti ei ole näkyvissä, ja 1, kun se on. Siirtymäominaisuus on "opasiteetti 2s", mikä aiheuttaa opasiteetin siirtymisen kahden sekunnin aikana, kun se muuttuu.

Painike vaihtaa komponentin näkyvyyttä. Kun joku napsauttaa painiketta, isVisible-tilamuuttuja päivittyy ja komponentti hiipuu sisään tai ulos nykyisestä tilastaan ​​riippuen.

Tapa 2: React-animations Libraryn käyttäminen

Toinen tapa lisätä animaatioita React-komponentteihin on käyttää kirjastoa, kuten react-animaatioita. Tämä kirjasto tarjoaa joukon ennalta määritettyjä animaatioita, joita voit käyttää React-komponenteissasi.

Jos haluat käyttää reaktianimaatioita, sinun on ensin asennettava kirjasto:

npm Asentaa react-animaatioita --Tallentaa

Sinun on myös asennettava aphrodite, joka on riippuvainen reaktio-animaatioista:

npm Asentaa afrodite --Tallentaa

Kun olet asentanut kirjastot, voit tuoda animaatiot, joita haluat käyttää:

tuonti { alkuhäivytys loppuhäivytys } alkaen "reagoida-animaatiot";

Sitten voit käyttää animaatioita komponenteissasi:

tuonti Reagoi, { komponentti } alkaen "reagoi";
tuonti { Tyylitaulukko, css } alkaen "afrodite";
tuonti { alkuhäivytys loppuhäivytys } alkaen "reagoida-animaatiot";
konst styles = StyleSheet.create({
 fadeIn: {
 animationName: fadeIn,
 animaatioKesto: '2s'
 },
 kadota näkyvistä: {
 animationName: fadeOut,
 animaatioKesto: '2s'
 }
});


luokkaaFadeInOutulottuuKomponentti{
rakentaja(rekvisiitta) {
super(rekvisiitta);


Tämä.state = {
 on Näkyvissä: väärä
 };
 }


render() {
konst luokannimi = Tämä.state.isVisible? css (styles.fadeIn): css (styles.fadeOut);


palata (
<div>
<div className={className}>
 Hei maailma!
</div>
<button onClick={this.toggleVisibility}>
 Vaihda
</button>
</div>
 );
 }


toggleVisibility = () => {
Tämä.setState (prevState => ({
on Näkyvissä: !prevState.on Näkyvissä
 }));
 }
}
viedäoletuksena FadeInOut;

Tämä esimerkki alkaa tuomalla fadeIn- ja fadeOut-animaatiot react-animations -kirjastosta. Sitten se määrittelee tyyliobjektin, jossa fadeIn- ja fadeOut-animaatiot ja animationDuration on asetettu kahteen sekuntiin.

Painike vaihtaa komponentin näkyvyyttä. Kun joku napsauttaa sitä, isVisible-tilamuuttuja päivittyy ja komponentti häipyy sisään tai ulos nykyisestä tilastaan.

Tapa 3: React-simple-animate Libraryn käyttäminen

React-simple-animate -kirjasto tarjoaa yksinkertaisen tavan lisätä animaatioita React-komponentteihin. Se tarjoaa deklaratiivisen API: n, jonka avulla on helppo määritellä monimutkaisia ​​animaatioita.

Jotta voit käyttää kirjastoa, sinun on ensin asennettava se:

npm Asentaa reagoi-yksinkertainen-animoi --Tallentaa

Sitten voit käyttää sitä komponenteissasi:

tuonti Reagoi, { komponentti } alkaen "reagoi";
tuonti { Animate, AnimateKeyframes} alkaen "reagoi-yksinkertainen-animoi";
luokkaaSovellusulottuuKomponentti{
 render() {
palata (
<div>
<Animoi
 pelata
alkaa={{
 opasiteetti: 0
 }}
loppu={{
 opasiteetti: 1
 }}
>
<div>
 Hei maailma!
</div>
</Animate>
<AnimateKeyframes
 pelata
 kesto={2}
 keyframes={[
 { opasiteetti: 0, muunnos: 'translateX(-100px)' },
 { opasiteetti: 1, muunnos: 'kääntääX(0px)' }
 ]}
>
<div>
 Hei maailma!
</div>
</AnimateKeyframes>
</div>
 );
 }
}
viedäoletuksena Sovellus;

The Animoi komponentti häviää div-elementissä. Se alkaa opasiteetilla 0 ja päättyy opasiteetilla 1. Toiston ehdotus on asetettu tosi, mikä saa animaation toistumaan automaattisesti, kun komponentti kiinnitetään.

The AnimateKeyframes komponentti animoi div-elementin kahden sekunnin ajan. Keyframes-taulukko määrittää animaation aloitus- ja lopetustilat. Ensimmäisen avainkehyksen läpinäkyvyys on 0 ja translateX-arvo -100 pikseliä. Toisen avainkehyksen läpinäkyvyys on 1 ja translateX-arvo 0px.

Lisää käyttäjien sitoutumista animaatioihin

Nyt tiedät joitakin tapoja, joilla voit käyttää animaatioita React-sovelluksessasi. Voit käyttää animaatioita lisätäksesi käyttäjien sitoutumista sovellukseesi.

Voit esimerkiksi palkita käyttäjää tehtävän suorittamisesta animaatioiden avulla. Tämä voi olla jotain niinkin yksinkertaista kuin lyhyt "spinner"-animaatio tai monimutkaisempi animaatio, joka toistetaan, kun käyttäjä suorittaa pelin tason.

Voit myös ottaa React-sovelluksesi käyttöön verkossa ilmaiseksi palveluilla, kuten Github-sivuilla tai Herokulla.