Oživte svoju aplikáciu React pomocou animácií

Animácie môžu byť skvelým spôsobom, ako zlepšiť používateľskú skúsenosť s aplikáciou React. Môžu pomôcť, aby sa interakcie cítili hladšie a môžu tiež poskytnúť vizuálnu spätnú väzbu alebo upozorniť na konkrétny prvok.

Existuje mnoho spôsobov, ako môžete pracovať s animáciami CSS pomocou React, od natívneho riešenia až po knižnice tretích strán.

Prečo používať animácie v Reacte?

Existuje mnoho dôvodov, prečo by ste mohli chcieť použiť animácie vo svojej aplikácii React. Niektoré z najbežnejších dôvodov zahŕňajú:

• Aby sa interakcie cítili prirodzenejšie. Animácie môžu prispieť k tomu, aby boli interakcie používateľov prirodzenejšie a plynulejšie. Ak napríklad používate komponent prepínania, možno budete chcieť animovať prepínacie tlačidlo medzi stavmi „zapnuté“ a „vypnuté“. Ďalším príkladom sú indikátory priebehu, môžete vytvorte animovaný indikátor priebehu pre stránky vašej aplikácie Reagovať.
• Poskytovanie vizuálnej spätnej väzby. Animácie môžu používateľovi poskytnúť vizuálnu spätnú väzbu. Ak napríklad používateľ klikne na tlačidlo, možno budete chcieť tlačidlo animovať, aby ste naznačili, že aplikácia zaregistrovala danú akciu.
  instagram viewer
• Vedenie pozornosti používateľa. Animácie môžu nasmerovať pozornosť používateľa na konkrétny prvok. Ak máte napríklad modálne dialógové okno, ktoré sa zobrazí na obrazovke, možno budete chcieť použiť animáciu, aby ste naň upozornili používateľa.
• Vytváranie pocitu naliehavosti.Animácie môžu vytvárať pocit naliehavosti alebo dôležitosti. Napríklad, ak máte komponent časovača, ktorý odpočítava, možno budete chcieť použiť animáciu na vyjadrenie naliehavosti, keď sa blíži konečný termín.

Existuje niekoľko spôsobov, ako pridať animácie do komponentov React. Tri, o ktorých sa tu dozviete, sú animácie v štýle riadkov, knižnica reakcií animácií a knižnica reakcií jednoduchých animácií.

Začnite tým vytvorenie základnej aplikácie na reakcie, potom postupujte podľa vlastného výberu.

Metóda 1: Použitie animácií vložených štýlov

Povedzme napríklad, že chcete animovať komponent tak, aby sa po kliknutí na tlačidlo rozplynul. Môžete to urobiť pomocou nasledujúceho kódu:

importovať Reagovať, { Komponent } od 'reagovať';
triedaFadeInOutpredlžujeKomponent{
konštruktér(rekvizity) {
Super(rekvizity);
toto.state = {
 isVisible: falošný
 };
 }
render() {
konšt štýly = {
nepriehľadnosť: toto.štát.je Viditeľné? 1: 0,
 prechod: 'nepriehľadnosť 2s'
 };
vrátiť (
<div>
<div style={styles}>
 Ahoj svet!
</div>
<button onClick={this.toggleVisibility}>
 Prepnúť
</button>
</div>
 );
 }
toggleVisibility = () => {
toto.setState (prevState => ({
isVisible: !prevState.je Viditeľné
 }));
 }
}
exportpredvolená FadeInOut;

V tomto príklade má objekt štýlu vlastnosti nepriehľadnosti a prechodu. Nepriehľadnosť je 0, keď komponent nie je viditeľný, a 1, keď je. Vlastnosť prechodu je „opacity 2s“, čo spôsobí, že sa nepriehľadnosť zmení na dve sekundy.

Tlačidlo prepína viditeľnosť komponentu. Keď niekto klikne na tlačidlo, stavová premenná isVisible sa aktualizuje a komponent sa rozsvieti alebo zhasne v závislosti od jeho aktuálneho stavu.

Metóda 2: Použitie knižnice reakčných animácií

Ďalším spôsobom, ako pridať animácie do komponentov React, je použiť knižnicu, akou sú napríklad reakcie animácie. Táto knižnica poskytuje sadu preddefinovaných animácií, ktoré môžete použiť vo svojich komponentoch React.

Ak chcete používať animácie reakcií, musíte si najprv nainštalovať knižnicu:

npm Inštalácia reakčné animácie --uložiť

Musíte tiež nainštalovať aphrodite, čo je závislosť animácií reakcií:

npm Inštalácia aphrodite --uložiť

Po nainštalovaní knižníc môžete importovať animácie, ktoré chcete použiť:

importovať { fadeIn, fadeOut } od „reakčné animácie“;

Potom môžete použiť animácie vo vašich komponentoch:

importovať Reagovať, { Komponent } od 'reagovať';
importovať { StyleSheet, css } od 'afrodita';
importovať { fadeIn, fadeOut } od „reakčné animácie“;
konšt styles = StyleSheet.create({
 fadeIn: {
 názov animácie: fadeIn,
 Dĺžka animácie: '2s'
 },
 vyblednúť: {
 názov animácie: fadeOut,
 Dĺžka animácie: '2s'
 }
});
triedaFadeInOutpredlžujeKomponent{
konštruktér(rekvizity) {
Super(rekvizity);
toto.state = {
 isVisible: falošný
 };
 }
render() {
konšt className = toto.state.isVisible? css (styles.fadeIn): css (styles.fadeOut);
vrátiť (
<div>
<div className={className}>
 Ahoj svet!
</div>
<button onClick={this.toggleVisibility}>
 Prepnúť
</button>
</div>
 );
 }
toggleVisibility = () => {
toto.setState (prevState => ({
isVisible: !prevState.je Viditeľné
 }));
 }
}
exportpredvolená FadeInOut;

Tento príklad začína importovaním animácií fadeIn a fadeOut z knižnice reakcií animácií. Potom definuje objekt štýlov s animáciami fadeIn a fadeOut a animationDuration nastaveným na dve sekundy.

Tlačidlo prepína viditeľnosť komponentu. Keď naň niekto klikne, stavová premenná isVisible sa aktualizuje a komponent sa rozsvieti alebo zhasne v závislosti od jeho aktuálneho stavu.

Metóda 3: Použitie Reag-simple-animate Library

Knižnica respond-simple-animate poskytuje jednoduchý spôsob pridávania animácií do komponentov React. Ponúka deklaratívne API, ktoré uľahčuje definovanie zložitých animácií.

Ak chcete používať knižnicu, musíte ju najskôr nainštalovať:

npm Inštalácia reagovať-jednoducho-živý --uložiť

Potom ho môžete použiť vo svojich komponentoch:

importovať Reagovať, { Komponent } od 'reagovať';
importovať { Animate, AnimateKeyframes} od "reagovať-jednoducho-animovať";
triedaApppredlžujeKomponent{
 render() {
vrátiť (
<div>
<Animovať
 hrať
začať={{
 nepriehľadnosť: 0
 }}
koniec={{
 nepriehľadnosť: 1
 }}
>
<div>
 Ahoj svet!
</div>
</Animate>
<AnimateKeyframes
 hrať
 trvanie={2}
 kľúčové snímky={[
 { nepriehľadnosť: 0, transformácia: 'translateX(-100px)' },
 { nepriehľadnosť: 1, transformácia: 'translateX(0px)' }
 ]}
>
<div>
 Ahoj svet!
</div>
</AnimateKeyframes>
</div>
 );
 }
}
exportpredvolená App;

The Animovať komponent v prvku div vybledne. Začína nepriehľadnosťou 0 a končí nepriehľadnosťou 1. Podpera prehrávania je nastavená na hodnotu true, čo spôsobí, že sa animácia prehrá automaticky, keď sa komponent pripojí.

The AnimateKeyframes komponent animuje prvok div počas dvoch sekúnd. Pole kľúčových snímok určuje počiatočný a konečný stav animácie. Prvá kľúčová snímka má nepriehľadnosť 0 a hodnotu translateX -100px. Druhá kľúčová snímka má nepriehľadnosť 1 a hodnotu translateX 0px.

Zvýšte zapojenie používateľov pomocou animácií

Teraz poznáte niektoré zo spôsobov, ako môžete použiť animácie v aplikácii React. Na zvýšenie interakcie používateľov s vašou aplikáciou môžete použiť animácie.

Môžete napríklad chcieť použiť animáciu na odmenu používateľa za dokončenie úlohy. Môže to byť niečo také jednoduché ako krátka animácia „spinner“ alebo zložitejšia animácia, ktorá sa prehrá, keď používateľ dokončí úroveň v hre.

Svoju aplikáciu React môžete tiež bezplatne nasadiť na web so službami, ako sú stránky Github alebo Heroku.