Rendi viva la tua app React con le animazioni

Le animazioni possono essere un ottimo modo per migliorare l'esperienza utente della tua applicazione React. Possono aiutare a rendere le interazioni più fluide e possono anche fornire un feedback visivo o attirare l'attenzione su un particolare elemento.

Ci sono molti modi in cui puoi lavorare con le animazioni CSS usando React, da una soluzione nativa a librerie di terze parti.

Perché usare le animazioni in React?

Ci sono molti motivi per cui potresti voler utilizzare le animazioni nella tua applicazione React. Alcuni dei motivi più comuni includono:

• Rendere le interazioni più naturali. Le animazioni possono aiutare a rendere le interazioni dell'utente più naturali e fluide. Ad esempio, se stai utilizzando un componente di commutazione, potresti voler animare il pulsante di commutazione tra gli stati "on" e "off". Un altro esempio sono le barre di avanzamento, puoi creare una barra di avanzamento animata per le pagine della tua app react.
• Fornire un feedback visivo. Le animazioni possono fornire un feedback visivo all'utente. Ad esempio, se un utente fa clic su un pulsante, potresti voler animare il pulsante per indicare che l'app ha registrato quell'azione.
  instagram viewer
• Guidare l'attenzione dell'utente. Le animazioni possono guidare l'attenzione dell'utente su un particolare elemento. Ad esempio, se hai una finestra di dialogo modale che appare sullo schermo, potresti voler usare l'animazione per attirare l'attenzione dell'utente su di essa.
• Creare un senso di urgenza.Le animazioni possono creare un senso di urgenza o importanza. Ad esempio, se si dispone di un componente timer che esegue il conto alla rovescia, è possibile utilizzare l'animazione per riflettere l'urgenza all'avvicinarsi della scadenza.

Esistono diversi modi per aggiungere animazioni ai componenti React. I tre che imparerai a usare qui sono le animazioni in stile inline, la libreria react-animations e la libreria react-simple-animate.

Inizia da creazione di un'app di reazione di base, quindi segui il metodo che preferisci.

Metodo 1: utilizzo di animazioni in stile in linea

Ad esempio, supponiamo che tu voglia animare un componente in modo che si dissolva quando fai clic su un pulsante. Puoi farlo con il seguente codice:

importare Reagisci, { Componente } da 'reagire';
classeDissolvenza in entrataestendeComponente{
costruttore(oggetti di scena) {
super(oggetti di scena);
Questo.stato = {
 è visibile: falso
 };
 }
rendere() {
cost stili = {
opacità: Questo.stato.è visibile? 1: 0,
 transizione: 'opacità 2s'
 };
ritorno (
<div>
<stile div={stili}>
 Ciao mondo!
</div>
<pulsante onClick={this.toggleVisibility}>
 Alterna
</button>
</div>
 );
 }
attiva/disattiva Visibilità = () => {
Questo.setState (prevState => ({
è visibile: !prevStato.è visibile
 }));
 }
}
esportarepredefinito dissolvenza in entrata;

In questo esempio, un oggetto stile ha proprietà di opacità e transizione. L'opacità è 0 quando il componente non è visibile e 1 quando lo è. La proprietà di transizione è "opacity 2s", che causerà la transizione dell'opacità nell'arco di due secondi quando cambia.

Il pulsante alterna la visibilità del componente. Quando qualcuno fa clic sul pulsante, la variabile di stato isVisible si aggiorna e il componente si dissolverà in entrata o in uscita a seconda del suo stato corrente.

Metodo 2: utilizzo della libreria react-animations

Un altro modo per aggiungere animazioni ai componenti React è utilizzare una libreria come react-animations. Questa libreria fornisce una serie di animazioni predefinite che puoi utilizzare nei tuoi componenti React.

Per utilizzare le animazioni di reazione, devi prima installare la libreria:

npm installare reagire-animazioni --salva

Devi anche installare aphrodite, che è una dipendenza di react-animations:

npm installare Afrodite --salva

Una volta installate le librerie, puoi importare le animazioni che desideri utilizzare:

importare { dissolvenza in entrata, dissolvenza in uscita } da 'animazioni di reazione';

Quindi, puoi utilizzare le animazioni nei tuoi componenti:

importare Reagisci, { Componente } da 'reagire';
importare {Foglio di stile, css} da 'Afrodite';
importare { dissolvenza in entrata, dissolvenza in uscita } da 'animazioni di reazione';
cost styles = StyleSheet.create({
 dissolvenza: {
 animationName: fadeIn,
 animazioneDurata: '2s'
 },
 dissolvenza: {
 animationName: fadeOut,
 animazioneDurata: '2s'
 }
});
classeDissolvenza in entrataestendeComponente{
costruttore(oggetti di scena) {
super(oggetti di scena);
Questo.stato = {
 è visibile: falso
 };
 }
rendere() {
cost nomeclasse = Questo.state.isVisible? css (styles.fadeIn): css (styles.fadeOut);
ritorno (
<div>
<div nomeclasse={nomeclasse}>
 Ciao mondo!
</div>
<pulsante onClick={this.toggleVisibility}>
 Alterna
</button>
</div>
 );
 }
attiva/disattiva Visibilità = () => {
Questo.setState (prevState => ({
è visibile: !prevStato.è visibile
 }));
 }
}
esportarepredefinito dissolvenza in entrata;

Questo esempio inizia importando le animazioni fadeIn e fadeOut dalla libreria react-animations. Definisce quindi un oggetto styles con le animazioni fadeIn e fadeOut e animationDuration impostato su due secondi.

Il pulsante alternerà la visibilità del componente. Quando qualcuno fa clic su di esso, la variabile di stato isVisible si aggiornerà e il componente si dissolverà in entrata o in uscita a seconda del suo stato corrente.

Metodo 3: utilizzo della libreria react-simple-animate

La libreria react-simple-animate fornisce un modo semplice per aggiungere animazioni ai componenti React. Offre un'API dichiarativa che semplifica la definizione di animazioni complesse.

Per utilizzare la libreria, devi prima installarla:

npm installare reagire-semplice-animare --salva

Quindi, puoi usarlo nei tuoi componenti:

importare Reagisci, { Componente } da 'reagire';
importare {Animate, AnimateKeyframes} da "reagire-semplice-animare";
classeAppestendeComponente{
 rendere() {
ritorno (
<div>
<Animare
 giocare
inizio={{
 opacità: 0
 }}
FINE={{
 opacità: 1
 }}
>
<div>
 Ciao mondo!
</div>
</Animate>
<AnimateKeyframe
 giocare
 durata={2}
 fotogrammi chiave={[
 { opacità: 0, trasformazione: 'traduciX(-100px)' },
 { opacità: 1, trasformazione: 'traduciX(0px)' }
 ]}
>
<div>
 Ciao mondo!
</div>
</AnimateKeyframes>
</div>
 );
 }
}
esportarepredefinito Applicazione;

IL Animare componente si dissolve in un elemento div. Inizia con un'opacità di 0 e termina con un'opacità di 1. Il play prop è impostato su true, il che farà sì che l'animazione venga riprodotta automaticamente quando il componente viene montato.

IL AnimateKeyframe component anima un elemento div per due secondi. L'array keyframes specifica gli stati iniziale e finale dell'animazione. Il primo fotogramma chiave ha un'opacità di 0 e un valore translateX di -100px. Il secondo fotogramma chiave ha un'opacità di 1 e un valore translateX di 0px.

Aumenta il coinvolgimento degli utenti con le animazioni

Ora conosci alcuni dei modi in cui puoi utilizzare le animazioni nella tua applicazione React. Puoi utilizzare le animazioni per aumentare il coinvolgimento degli utenti con la tua applicazione.

Ad esempio, potresti voler utilizzare l'animazione per premiare l'utente per il completamento di un'attività. Questo potrebbe essere qualcosa di semplice come una breve animazione "spinner" o un'animazione più complessa che viene riprodotta quando l'utente completa un livello in un gioco.

Puoi anche distribuire gratuitamente la tua applicazione React sul Web con servizi come pagine Github o Heroku.