Scopri come aggiungere semplici animazioni alla tua app React con un minimo sforzo di codifica.
L'animazione è una parte cruciale di quasi tutte le moderne applicazioni web. È anche una delle parti più difficili da ottenere correttamente.
Framer Motion è una libreria creata per React che semplifica l'animazione dei componenti.
Come funziona Framer Motion
Framer Motion utilizza il componente di movimento per le animazioni. Ogni elemento HTML/SVG ha un componente di movimento equivalente che ha oggetti di scena per gesti e animazioni. Ad esempio, un normale div HTML ha questo aspetto:
<div>div>
Mentre l'equivalente di Framer Motion ha questo aspetto:
<movimento.div>movimento.div>
I componenti di movimento supportano un animare prop che attiva le animazioni quando i suoi valori cambiano. Per animazioni complesse, utilizzare il usaAnimate gancio con un ambito rif.
Animazione in Framer Motion
Prima di utilizzare Framer Motion nel tuo progetto, devi avere il file Tempo di esecuzione di Node.js e il gestore di pacchetti Yarn installato 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 il file di avviamento branch come modello iniziale da seguire insieme a questo tutorial, oppure il file final-files branch per la demo completa. Puoi anche vedere il progetto in azione tramite questo dimostrazione dal vivo.
Apri il tuo terminale ed esegui:
git clone [email protected]: makeuseofcode/framer-motion-app.git
cd framer-motion-app
filato
filo dev
Quando apri host locale: 5173 nel tuo browser, vedrai questo:
Ora puoi creare la tua prima animazione semplice, un pulsante che cresce al passaggio del mouse e si restringe quando il cursore si allontana.
Apri il src/App.jsx file in un editor di codice. Questo file contiene un componente funzionale che restituisce un frammento React. Importa il Pulsante componente, quindi renderizzarlo, passando in a testo puntello:
Pulsante animato</h4>
Muovi il mouse sopra il pulsante per vedere l'effetto</div>
Quindi, modifica il file Button.jsx file e importare il file movimento utilità da framer-movimento:
importare { movimento } da"framer-movimento"
Ora, sostituisci il normale pulsante elemento con il movimento.[elemento] componente. In questo caso, usa il pulsante.di.movimento componente.
Quindi aggiungi a whileHover gesto prop e passa un oggetto di valori che Framer Motion dovrebbe animare quando un utente passa sopra il pulsante.
scala: 1.1 }}> {testo}
</motion.button>
Il pulsante ora si animerà quando sposti il puntatore del mouse sopra o fuori di esso:
Ti starai chiedendo perché questa demo non usa Animazioni CSS Invece. Framer Motion presenta vantaggi rispetto ai CSS perché si integra con lo stato React e generalmente si traduce in un codice più pulito.
Successivamente, prova qualcosa di più complesso: animare un modale. In Sfondo.jsx, importare l'utilità di movimento e creare un componente funzionale con al clic E bambini oggetti di scena. Restituisci un movimento.div componente con classe "sfondo" e al clic ascoltatore nel JSX.
esportarepredefinitofunzioneSfondo() {
ritorno (<>
</motion.div>
</>)
}
Quindi aggiungi tre oggetti di scena vale a dire: iniziale, animare, E Uscita. Questi oggetti di scena rappresentano rispettivamente lo stato originale del componente, lo stato in cui dovrebbe essere animato il componente e lo stato in cui dovrebbe trovarsi il componente dopo l'animazione.
Aggiungere al clic E bambini oggetti di scena al movimento.div e imposta la durata della transizione a 0,34 secondi:
esportarepredefinitofunzioneSfondo ({onClick, bambini}){
ritorno (<>
onClick={onClick}
nomeclasse="fondale"
iniziale={{ opacità: 0, backgroundFilter:"sfocatura (0px)" }}
animato={{ opacità: 1, backgroundFilter:"sfocatura (3.4px)" }}
uscita={{ opacità: 0, backgroundFilter:"sfocatura (0px)"}}
transizione={{
durata: 0.34,
}}
>
{bambini}
</motion.div>
</>)
}
IL Sfondo componente è un wrapper per il Modale componente. Facendo clic sullo sfondo si chiude il modale. In Modal.jsx, importare movimento e il componente Sfondo. Il componente funzionale predefinito accetta oggetti di scena: closeModal E testo. Crea una variabile variante come oggetto.
cost varianti = {
iniziale: {
e: "-200%",
opacità: 1,
},
visibile: {
e: "50%",
transizione: {
durata: 0.1,
tipo: "primavera",
smorzamento: 32,
rigidità: 500
}
},
Uscita: {
e: "200%",
}
}
Restituisce un componente motion.div racchiuso da un componente Sfondo con una prop "varianti" che punta all'oggetto varianti. Le varianti sono una serie di stati di animazione predefiniti in cui potrebbe trovarsi il componente.
onClick={(e) => e.stopPropagation()}
nomeclasse="modale"
varianti={varianti}
iniziale='iniziale'
animato='visibile'
uscita='Uscita'
>
{testo}
</motion.div>
</Backdrop>
Successivamente, è necessario aggiungere la funzionalità per visualizzare il modale quando un utente fa clic sul pulsante. Apri il App.jsx file e importare il file useState Reagire gancio e il Modale componente.
importare { usaStato } da"reagire";
importare Modale da"./componenti/Modale";
Poi crea un modalOpen stato con il valore predefinito impostato su falso.
cost [modalOpen, setModalOpen] = useState(falso);
Successivamente, definisci una funzione closeModal che imposta il modalOpen a falso.
funzionecloseModal() {
setModalOpen(falso)
}
Nella parte superiore del frammento React, esegui il rendering condizionale di a Modale componente e passare l'appropriato testo prop con il prop closeModal.
{modalOpen && <Modaletesto="Questo è un modale animato con Framer Motion"}
Poi, nel secondo sezione elemento, rendere a pulsante elemento con un gestore di eventi onClick che imposta modalOpen su false.
Potresti notare che React smonta il componente Modal dal DOM senza un'animazione di uscita. Per risolverlo, hai bisogno di un file Presenza animata componente. Importa AnimatePresence da framer-movimento.
importare {AnimatePresence} da'framer-movimento';
Ora, avvolgi il componente Modal nel componente AnimatePresence e imposta il file iniziale prop a falso e il modalità aspettare".
falso} modalità="Aspettare">
{modalOpen && <Modaletesto="Questo è un modale animato con Framer Motion"closeModal={closeModale} />}
</AnimatePresence> Il componente AnimatePresence consente il completamento delle animazioni di uscita prima che React lo smonti dal DOM.
Framer Motion può animare i componenti durante lo scorrimento utilizzando il whileInView puntello. Apri il ScrollElement.jsxe importare il file movimento utilità. Modifica div A movimento.div con la classe "scroll-element".
iniziale={{ opacità: 0, scala: 0, ruotare: 14 }}
whileInView={{ opacità: 1, scala: 1, ruotare: 0 }}
transizione={{ durata: .8 }}
finestra={{ una volta: VERO }}
nomeclasse='elemento di scorrimento'
>
Elemento di scorrimento
</motion.div>
IL finestra prop punta a un oggetto che tramonta una volta A VERO. Successivamente, nel App.jsx file, importa il file ScrollElement componente e definire una variabile scrollElementCount che contiene un valore intero.
permettere scrollElementCount=14;
Nell'ultimo sezione elemento, crea un array con una lunghezza specifica definita da scrollElementCount che mappa su ogni elemento dell'array e genera un componente con una chiave univoca basata sull'indice io.
{[...Array (scrollElementCount)].map((x, i) =><ScrollElementchiave={io} />)}
Ora, tornando al browser, gli elementi dovrebbero animarsi quando li scorri per visualizzarli.
Alternative a Framer Motion
Framer Motion non è l'unica libreria di animazione sul mercato. Se non ti piace il modo in cui Framer Motion fa le cose, puoi provare altre librerie come Reagisci Primavera.
Puoi anche utilizzare le animazioni CSS, che tutti i browser moderni supportano in modo nativo, ma le tecniche coinvolte possono essere complicate da apprendere e configurare.
Migliorare l'esperienza utente con le animazioni
Ogni utente si aspetta un'esperienza fluida e fluida quando utilizza un'applicazione web. Un sito Web o un'applicazione senza animazioni sembra statico e non risponde. Le animazioni migliorano l'esperienza dell'utente perché puoi utilizzarle per comunicare un feedback all'utente quando esegue una determinata azione.
