Come creare animazioni di ingresso e uscita per un componente React utilizzando Framer Motion

Animare un componente React mentre entra o esce dallo schermo può essere una sfida. Questo perché, quando nascondi un componente, React lo rimuove dal DOM, il che lo rende non disponibile per l'animazione. Quando mostri di nuovo il componente, React lo aggiunge nuovamente al DOM, il che potrebbe risultare in un aspetto improvviso senza animazione.

Puoi risolvere questo problema con una libreria di animazioni come Framer Motion.

Che cos'è Framer Motion?

Framer Motion è una libreria di animazione pronta per la produzione per React. Fornisce una gamma di componenti, hook, fotogrammi chiave e funzioni di andamento personalizzate per la creazione e il controllo delle animazioni.

Un vantaggio di Framer Motion è che semplifica la creazione di animazioni fluide e fluide senza dover scrivere molto codice JavaScript o calcolare calcoli per ogni transizione.

Ha anche un sistema di eventi, che puoi utilizzare per attivare animazioni basate sull'input dell'utente come clic e gesti dei pulsanti, creando interfacce interattive e dinamiche che si sentono reattive.

Per dimostrare come utilizzare Framer Motion in React, animerai un componente che entra ed esce dallo schermo quando fai clic su un pulsante.

Creazione di un progetto React

Per creare un progetto React, dovrai farlo installa Node.js e npm (Node Package Manager) sulla tua macchina se non l'hai fatto.

Una volta installate queste dipendenze, puoi farlo crea un nuovo progetto React usando Vite eseguendo il comando yarn vite nel tuo terminale.

filato vite

Questo comando creerà una nuova cartella con tutti i file e le dipendenze necessari preinstallati. Passare alla cartella e avviare il server di sviluppo con il comando yarn start.

inizio del filato

Installazione di Framer Motion in React

Installa Framer Motion eseguendo questo comando:

npm installa framer-motion

Questo comando aggiungerà Framer Motion come dipendenza al tuo progetto.

Animare un componente

Per animare un componente mentre entra ed esce dallo schermo in React utilizzando Framer Motion, devi avvolgerlo nel componente di movimento.

Il componente di movimento fornisce una serie di proprietà per animare l'ingresso e l'uscita del componente. Puoi utilizzare gli oggetti di scena iniziale, animato e di uscita per controllarne la visibilità e la posizione.

Per vederlo in azione, aggiungi il seguente codice nella parte superiore di App.jsx per importare il componente di movimento da framer-motion.

importare { movimento } da"framer-movimento";

Successivamente, crea il componente che desideri animare avvolgendolo con il componente di movimento. Questo esempio usa un elemento div ma puoi usare qualsiasi altro elemento che desideri come button, li e p tra gli altri.

importare { movimento, AnimatePresence } da"framer-movimento"
funzioneApp() {
ritorno (
 <>

 iniziale={{ X: -100, opacità: 0 }}
 animato={{ X: 0, opacità: 1 }}
 uscita={{ X: -100, opacità: 0 }}
 >
Inviato!</p>
 </motion.div>

 </>
 )
}

Il componente di movimento consente di animare l'elemento div contenente il testo "Inviato!".

IL iniziale, animare, E Uscita le proprietà del componente di movimento definiscono le animazioni di ingresso e di uscita del componente. Quando il componente viene inizialmente renderizzato, inizierà con una posizione x di -100 (fuori schermo a sinistra) e un'opacità di 0 e diventerà invisibile.

La proprietà animate definisce come il componente dovrebbe animarsi quando entra nello schermo, in questo caso spostandosi da una x posizione di -100 a una posizione x di 0 (scorrendo da sinistra) e sfumando gradualmente in un'opacità di 1 e diventando completamente visibile.

Infine, la proprietà exit definisce come deve essere animato il componente quando lo si rimuove dallo schermo. In questo caso, il componente scivolerà fuori dallo schermo verso sinistra con una posizione x di -100 e si dissolverà gradualmente fino a un'opacità di 0.

Devi anche avvolgere il componente di movimento con il componente AnimatePresence da framer-motion per animare i componenti quando li rimuovi dall'albero React DOM.

Ora che hai definito le animazioni di ingresso e uscita, puoi aggiungere un pulsante per attivare l'animazione. Ecco il componente modificato con il pulsante:

importare { AnimatePresence, movimento } da"framer-movimento";
importare { usaStato } da"reagire";
funzioneApp() {
cost [isVisible, setIsVisible] = useState(VERO);
cost attiva/disattiva Visibilità = () => {
 setIsVisible(!isVisible);
 };
ritorno (
 <>

 {è visibile && ( <movimento.div
 iniziale={{ X: -100, opacità: 0 }}
 animato={{ X: 0, opacità: 1 }}
 uscita={{ X: -100, opacità: 0 }}
 >
Inviato!</p>
 </motion.div>)}
 </AnimatePresence>

 Notificare
 </button>
 </>
 )
}

Questo codice aggiornato aggiunge una variabile di stato denominata isVisible utilizzando l'hook useState. Questa variabile tiene traccia se il componente deve essere visibile. La funzione toggleVisibility alterna il valore di isVisible tra true e false quando si fa clic sul pulsante.

Adesso lo sei rendere il componente in modo condizionale a seconda del valore di isVisible. Se isVisible è vero, il componente di movimento eseguirà il rendering con l'animazione di ingresso.

Infine, aggiungi un gestore di eventi onClick al pulsante che chiama la funzione toggleVisibility, aggiorna lo stato di isVisible e attiva l'animazione di entrata o uscita del componente di movimento.

Aggiunta di una funzione di interpolazione

Una funzione di andamento controlla la velocità di modifica dell'animazione nel tempo. Definisce i tempi di un'animazione specificando come l'animazione dovrebbe accelerare o rallentare man mano che procede. Senza una funzione di interpolazione, il rendering dell'animazione potrebbe essere troppo veloce.

Framer Motion offre diverse funzioni di andamento tra cui scegliere, incluso easeInOut. Importalo nella parte superiore di App.jsx da framer-motion per usarlo.

importare {movimento, facilitàInOut} da"framer-movimento";

Quindi aggiungilo all'oggetto di transizione nel componente di movimento:

 iniziale={{ X: -100, opacità: 0 }}
 animato={{ X: 0, opacità: 1, transizione: { durata: 0.5, sollievo: facilitàInOut } }}
 uscita={{ X: -100, opacità: 0, transizione: { durata: 0.5, sollievo: facilitàInOut } }}
>
Inviato!</p>
</motion.div>

La proprietà duration specifica per quanto tempo deve essere eseguita l'animazione.

Usa Plain CSS per animazioni semplici

C'è molto di più che puoi fare con Framer Motion, inclusa l'animazione 3D. Tuttavia, non è sempre necessaria una libreria per creare animazioni. Per animazioni semplici come le transizioni al passaggio del mouse, puoi sempre utilizzare semplici CSS.