Come aggiungere animazioni alle tue app React con Framer Motion

Scopri come aggiungere semplici animazioni alla tua app React con il minimo sforzo di codifica.

L'animazione è una parte cruciale di quasi tutte le applicazioni web moderne. È anche una delle parti più difficili da ottenere correttamente.

Framer Motion è una libreria creata per React che semplifica l'animazione dei componenti.

Framer Motion utilizza il componente di movimento per le animazioni. Ogni elemento HTML/SVG ha un componente di movimento equivalente che dispone di oggetti di scena per gesti e animazioni. Ad esempio, un normale div HTML ha il seguente aspetto:

Mentre l'equivalente di Framer Motion si presenta così:

I componenti di movimento supportano unanimare prop che attiva le animazioni quando i suoi valori cambiano. Per animazioni complesse, utilizzare il fileutilizzareAnimategancio con mirino rif.

Prima di utilizzare Framer Motion nel tuo progetto, devi avere il runtime Node.js e il gestore pacchetti Yarn installati sul tuo computer e capire cos'è React e come usarlo.

Puoi visualizzare e scaricare il codice sorgente di questo progetto dal suo repository GitHub. Usa ilfile-starterbranch come modello iniziale da seguire insieme a questo tutorial, oppure ilfile finali branch per la demo completa. Puoi anche vedere il progetto in azione tramite questa demo live.

Apri il tuo terminale ed esegui:

Quando aprihost locale:5173nel tuo browser vedrai questo:

Ora puoi creare la tua prima semplice animazione, un pulsante che cresce al passaggio del mouse e si restringe quando il cursore si allontana.

Apri ilsrc/App.jsx file in un editor di codice. Questo file contiene un componente funzionale che restituisce un frammento React. Importa ilPulsantecomponente, quindi renderizzarlo, passando in atestopuntello:

Successivamente, modifica il fileButton.jsxarchiviare e importare il filemovimentoutilità damovimento del corniciaio:

Ora sostituisci il normalepulsanteelemento con ilmovimento.[elemento] componente. In questo caso, utilizzare ilpulsante.movimentocomponente.

Quindi aggiungi amentreHovergesto prop e passa un oggetto di valori a cui Framer Motion dovrebbe animarsi quando un utente passa con il mouse sul pulsante.

Il pulsante ora si animerà quando sposti il ​​puntatore del mouse sopra o fuori da esso:

Forse ti starai chiedendo perché questa demo non utilizza invece le animazioni CSS. Framer Motion presenta vantaggi rispetto ai CSS perché si integra con lo stato React e generalmente produce un codice più pulito.

Successivamente, prova qualcosa di più complesso: animare un modale. InSfondo.jsx, importare l'utilità di movimento e creare un componente funzionale conal clicEbambini oggetti di scena. Ritorno amovimento.divcomponente con classe "fondale" eal clicascoltatore nel JSX.

Quindi aggiungi tre oggetti di scena, vale a dire:iniziale,animare,EUscita . Questi oggetti di scena rappresentano rispettivamente lo stato originale del componente, lo stato in cui il componente dovrebbe animarsi e lo stato in cui dovrebbe trovarsi dopo l'animazione.

Aggiungereal clicEbambinioggetti di scena almovimento.dive imposta la durata della transizione su 0,34 secondi:

ILFondaleIl componente è un wrapper per il fileModale componente. Facendo clic sullo sfondo si chiude la modale. InModal.jsx, importamovimento e il componente Sfondo. Il componente funzionale predefinito accetta oggetti di scena:chiudiModalEtesto . Crea una variabile variante come oggetto.

Restituisce un componente motion.div racchiuso da un componente Sfondo con una prop "varianti" che punta all'oggetto varianti. Le varianti sono un insieme di stati di animazione predefiniti in cui potrebbe trovarsi il componente.

Successivamente, è necessario aggiungere la funzionalità per visualizzare la modale quando un utente fa clic sul pulsante. Apri il