Questa guida della serie + articolo esaminerà esempi e concetti di Framer Motion utilizzati all'interno di React e React Hooks accoppiati con Styled Components.

Indice:

• Segui insieme
• Panoramica
• Animazioni
• Transizioni
• Gesti
• Esempio di codice
• Copia il mio codice

Segui insieme

Esamineremo diversi esempi di utilizzo dell'utilizzo di Framer Motion in React. Usando solo reagisci componenti funzionali e reagisci ganci. Utilizzeremo anche componenti stilizzati per lo styling.

— La parte 2 sarà presto disponibile per essere avvisati —

Grazie per la lettura, sentiti libero di applaudire e fornire qualsiasi feedback tu abbia.

Panoramica

Framer Motion fornisce una semplice API di animazione e gesto che semplifica l'animazione di elementi HTML e SVG mantenendo la semantica.

Ottenere Framer Motion all'interno del nostro progetto React

Framer-Motion richiede l'utilizzo di React versione 16.8 o successiva.

All'interno della tua app di reazione, esegui il comando seguente per installare la nostra dipendenza dal movimento del framer.

npm install framer-motion

Utilizzeremo anche componenti di stile per rendere le nostre animazioni più belle.

npm install --save styled-components

Framer Motion semplifica le animazioni passando oggetti di scena animati ai tuoi elementi JSX. Una volta forniti questi oggetti di scena, il movimento del framer genererà l'animazione per te.

Qui in questo esempio, puoi vedere che abbiamo creato un corpo per alcuni stili e abbiamo rimosso alcuni degli stili nativi del browser.

Quindi abbiamo creato un styled(motion.div)componente all'interno del nostro stile. Se stai usando componenti con stile, puoi semplicemente creare un div in questo modo<motion.div> content </motion.div>

Quindi abbiamo passato l'animazione di scena a motion.divofx: 150, y: 150, scale: 1.5

Qui puoi vedere ogni volta che aggiorniamo questo div, scala a 1,5 quindi naviga dalla sua posizione iniziale alle posizioni y e x definite.

Ora, questo non è molto semplice e sta accadendo quasi troppo velocemente. Non preoccuparti, lo sistemeremo.

Ma quanto è sorprendente questo?! Così semplice aggiungere animazioni a un semplice div! Passiamo alle transizioni per vedere se possiamo renderlo più fluido.

Transizioni

Se non ti piacciono le animazioni predefinite dal movimento del framer, puoi passare il tuo elemento o SVG il prop di transizione e personalizzarlo.

Prendiamo il nostro ultimo esempio che stava andando troppo veloce e aggiungiamo un po' di durata all'elica di transizione e vediamo cosa succede.

transition={{ duration: 2 }}

Qualche ipotesi su cosa accadrà?

Wow, guarda quanto è più fluido questo con un semplice supporto di transizione.

Framer lo rende incredibilmente semplice, anche se questo esempio potrebbe non essere pratico, ti dà un esempio di quanto sia potente il framer e le possibilità sono infinite.

Diamo una rapida occhiata ad alcuni valori di transizione extra che puoi passare e come possiamo renderlo ancora più fluido.

Digitare Primavera

transition={{ type: 'spring' }}

Un'animazione che simula la fisica della primavera per un movimento realistico.

Questa è l'animazione predefinita per valori fisici come x, ye .scalerotate

Se noti durante la fine della transizione, quasi respira nella sua posizione con una piccola molla se devi. pun intended

facilità: allentamento | allentamento[]

La funzione di allentamento da usare. Imposta come uno dei seguenti.

• Il nome di una funzione di andamento esistente.
• Una matrice di quattro numeri per definire una curva di bezier cubica.
• Una funzione di andamento che accetta e restituisce un valore 0–1.

Queste stringhe sono le funzioni di andamento con nome integrate in framer-motion.

• "lineare"
• "easeIn", "easeOut", "easeInOut"
• “circIn”, “circOut”, “circInOut”
• “backIn”, “backOut”, “backInOut”
• "anticipare"

Nel caso in cui tu abbia un'animazione che desideri ripetere in un ciclo, framer-motions consente di applicare la transizione ripetuta all'elemento di transizione

Quando si passa Ripeti si intende il numero di volte in cui ripetere la transizione. Impostare Infinityper la ripetizione perpetua.

Questo è tutto ciò che tratteremo nell'area di transizione del framer-motion. Le loro ovviamente infinite possibilità e se questo articolo ottiene abbastanza amore ne scriverò un secondo!

Gesti

Framer Motion funziona perfettamente con gli eventi Reacts e supporta una serie di gesti (passa il mouse, tocca, sposta e trascina)

Andremo al passaggio del mouse, il passaggio del mouse è quando un utente posiziona il cursore su un elemento. Passandoci sopra.

Il prop framer-motion utilizzato per eseguire l'azione al passaggio del mouse è il propwhileHover

Nell'oggetto whileHoverdi scena puoi passargli qualsiasi valore di animazione.

Nell'esempio stiamo passandorotate, scale, and transition

Con questo ora al passaggio del mouse sul nostro elemento, scalerà 1.1 e ruoterà.

L'aggiunta di questo tipo di animazione agli elementi del tuo sito web lo fa sentire vivo.

Anche se potresti non voler far girare tutto.

Esempio completo

In questo esempio completo, stiamo usando tutto (più un po' di più) di ciò che abbiamo esaminato.

Penso che questo aiuterà a mettere tutto in prospettiva.

Ecco il risultato!!

Grazie per aver consultato questa guida su Come utilizzare Framer Motion con React. Di nuovo, se hai finito per amarlo e lo hai trovato utile, mostragli un po' d'amore e dagli un applauso. Se volevi qualcos'altro o vorresti vedere un articolo diverso in futuro commenta o contattami!

Copia il mio codice

Quindi vuoi il codice eh?

Ebbene eccolo! Clicca sul link github qui sotto!

Trovami:
Github
LinkedIN