Faceți ca aplicația dvs. React să prindă viață cu animații

Animațiile pot fi o modalitate excelentă de a îmbunătăți experiența utilizatorului aplicației dvs. React. Ele pot face ca interacțiunile să se simtă mai fluide și, de asemenea, pot oferi feedback vizual sau pot atrage atenția asupra unui anumit element.

Există multe moduri în care puteți lucra cu animații CSS folosind React, de la o soluție nativă la biblioteci terțe.

De ce să folosiți animații în React?

Există multe motive pentru care ați putea dori să utilizați animații în aplicația dvs. React. Unele dintre cele mai comune motive includ:

• Faceți interacțiunile să se simtă mai naturale. Animațiile pot ajuta la ca interacțiunile utilizatorilor să se simtă mai naturale și mai fluide. De exemplu, dacă utilizați o componentă de comutare, este posibil să doriți să animați butonul de comutare între stările „pornit” și „dezactivat”. Un alt exemplu sunt barele de progres, poți creați o bară de progres animată pentru paginile aplicației dvs. react.
• Furnizarea de feedback vizual. Animațiile pot oferi feedback vizual utilizatorului. De exemplu, dacă un utilizator face clic pe un buton, este posibil să doriți să animați butonul pentru a indica faptul că aplicația a înregistrat acea acțiune.
  instagram viewer
• Dirijarea atentiei utilizatorului. Animațiile pot ghida atenția utilizatorului către un anumit element. De exemplu, dacă aveți un dialog modal care apare pe ecran, este posibil să doriți să utilizați animația pentru a atrage atenția utilizatorului asupra acesteia.
• Crearea unui sentiment de urgență.Animațiile pot crea un sentiment de urgență sau importanță. De exemplu, dacă aveți o componentă de cronometru care numără invers, este posibil să doriți să utilizați animația pentru a reflecta urgența pe măsură ce se apropie termenul limită.

Există mai multe moduri de a adăuga animații la componentele React. Cele trei pe care le veți învăța despre utilizarea aici sunt animațiile în stil inline, biblioteca de animații react și biblioteca de animație react-simple.

Începeți prin crearea unei aplicații de reacții de bază, apoi urmați metoda pe care o alegeți.

Metoda 1: Utilizarea animațiilor de stil inline

De exemplu, să presupunem că doriți să animați o componentă, astfel încât aceasta să dispară atunci când faceți clic pe un buton. Puteți face acest lucru cu următorul cod:

import Reacționează, { Component } din 'reacţiona';
clasăFadeInOutse extindeComponentă{
constructor(recuzită) {
super(recuzită);
acest.state = {
 este vizibil: fals
 };
 }
randa() {
const stiluri = {
opacitate: acest.stat.este vizibil? 1: 0,
 tranziție: 'opacitate 2s'
 };
întoarcere (
<div>
<div style={stiluri}>
 Salut Lume!
</div>
<button onClick={this.toggleVisibility}>
 Comutare
</button>
</div>
 );
 }
toggleVisibility = () => {
acest.setState (prevState => ({
este vizibil: !prevState.este vizibil
 }));
 }
}
exportMod implicit FadeInOut;

În acest exemplu, un obiect de stil are proprietăți de opacitate și tranziție. Opacitatea este 0 când componenta nu este vizibilă și 1 când este. Proprietatea de tranziție este „opacity 2s”, ceea ce va face ca opacitatea să treacă peste două secunde când se schimbă.

Butonul comută vizibilitatea componentei. Când cineva face clic pe buton, variabila de stare isVisible se actualizează, iar componenta va intra sau ieși în funcție de starea sa curentă.

Metoda 2: Utilizarea bibliotecii react-animations

O altă modalitate de a adăuga animații la componentele React este utilizarea unei biblioteci precum react-animations. Această bibliotecă oferă un set de animații predefinite pe care le puteți utiliza în componentele dvs. React.

Pentru a utiliza react-animations, mai întâi va trebui să instalați biblioteca:

npm instalare reacţionează-animaţii --Salvați

De asemenea, trebuie să instalați afrodita, care este o dependență de animații de reacții:

npm instalare afrodita --Salvați

După ce ați instalat bibliotecile, puteți importa animațiile pe care doriți să le utilizați:

import { fadeIn, fadeOut } din „animații de reacție”;

Apoi, puteți utiliza animațiile din componentele dvs.:

import Reacționează, { Component } din 'reacţiona';
import { StyleSheet, css } din „afrodita”;
import { fadeIn, fadeOut } din „animații de reacție”;
const stiluri = StyleSheet.create({
 fadeIn: {
 animationName: fadeIn,
 AnimationDuration: '2s'
 },
 fadeOut: {
 animationName: fadeOut,
 AnimationDuration: '2s'
 }
});
clasăFadeInOutse extindeComponentă{
constructor(recuzită) {
super(recuzită);
acest.state = {
 este vizibil: fals
 };
 }
randa() {
const className = acest.state.isVisible? css (styles.fadeIn): css (styles.fadeOut);
întoarcere (
<div>
<div className={className}>
 Salut Lume!
</div>
<button onClick={this.toggleVisibility}>
 Comutare
</button>
</div>
 );
 }
toggleVisibility = () => {
acest.setState (prevState => ({
este vizibil: !prevState.este vizibil
 }));
 }
}
exportMod implicit FadeInOut;

Acest exemplu începe prin importarea animațiilor fadeIn și fadeOut din biblioteca react-animations. Apoi definește un obiect de stiluri cu animațiile fadeIn și fadeOut și animationDuration setat la două secunde.

Butonul va comuta vizibilitatea componentei. Când cineva face clic pe ea, variabila de stare isVisible se va actualiza, iar componenta va intra sau ieși în funcție de starea sa curentă.

Metoda 3: Utilizarea bibliotecii react-simple-animate

Biblioteca react-simple-animate oferă o modalitate simplă de a adăuga animații la componentele React. Oferă un API declarativ care facilitează definirea animațiilor complexe.

Pentru a utiliza biblioteca, trebuie să o instalați mai întâi:

npm instalare reacționează-simplu-anima --Salvați

Apoi, îl puteți utiliza în componentele dvs.:

import Reacționează, { Component } din 'reacţiona';
import { Animate, AnimateKeyframes} din „reacționează-simplu-anima”;
clasăAppse extindeComponentă{
 randa() {
întoarcere (
<div>
<Anima
 Joaca
start={{
 opacitate: 0
 }}
Sfârşit={{
 opacitate: 1
 }}
>
<div>
 Salut Lume!
</div>
</Animate>
<Animați cadre cheie
 Joaca
 durata={2}
 cadre cheie={[
 { opacitate: 0, transformare: 'translateX(-100px)' },
 { opacitate: 1, transformare: 'translateX(0px)' }
 ]}
>
<div>
 Salut Lume!
</div>
</AnimateKeyframes>
</div>
 );
 }
}
exportMod implicit Aplicație;

The Anima componenta se estompează într-un element div. Începe cu o opacitate de 0 și se termină cu o opacitate de 1. Elementul de joc este setat la adevărat, ceea ce va face ca animația să se reda automat atunci când componenta se montează.

The Animați cadre cheie componenta animă un element div timp de două secunde. Matricea de cadre cheie specifică stările de început și de sfârșit ale animației. Primul cadru cheie are o opacitate de 0 și o valoare translateX de -100px. Al doilea cadru cheie are o opacitate de 1 și o valoare translateX de 0px.

Creșteți implicarea utilizatorilor cu animații

Acum știți câteva dintre modalitățile prin care puteți utiliza animațiile în aplicația dvs. React. Puteți folosi animații pentru a crește implicarea utilizatorilor cu aplicația dvs.

De exemplu, este posibil să doriți să utilizați animația pentru a recompensa utilizatorul pentru finalizarea unei sarcini. Acesta ar putea fi ceva la fel de simplu ca o scurtă animație „spinner” sau o animație mai complexă care se joacă atunci când utilizatorul finalizează un nivel într-un joc.

De asemenea, puteți implementa gratuit aplicația dvs. React pe web cu servicii precum pagini Github sau Heroku.