Animazioni con gesture: hover, tap e drag
Utilizzi le props whileHover, whileTap e drag per animare i componenti in risposta alle gesture dell'utente.
Animazioni con gesture: hover, tap e drag è una lezione React Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento React Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso React Academy include 4 lezioni in totale.
Panoramica delle props per i gesti
Le props per i gesti di Framer Motion animano i componenti in risposta all'input dell'utente senza gestori di eventi JavaScript. Le principali sono whileHover, whileTap, whileDrag e whileFocus.
whileHover
Definisce lo stato animato mentre il cursore passa sopra l'elemento. Torna automaticamente allo stato precedente quando il cursore si sposta altrove.
<motion.button
whileHover={{ scale: 1.05, boxShadow: '0 10px 30px rgba(0,0,0,0.15)' }}
transition={{ type: 'spring', stiffness: 400, damping: 17 }}
>
Hover me
</motion.button>whileTap
Definisce lo stato animato mentre l'elemento viene premuto. È ideale per fornire un feedback alla pressione dei pulsanti.
<motion.button
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
>
Click
</motion.button>whileFocus
Anima l'elemento quando riceve il focus da tastiera, ideale per indicatori di focus accessibili.
<motion.input
whileFocus={{ borderColor: '#4f46e5', boxShadow: '0 0 0 3px rgba(79,70,229,0.3)' }}
transition={{ duration: 0.2 }}
/>Abilitare il trascinamento
Aggiunga la prop drag per rendere trascinabile un elemento. La imposti su true, 'x' o 'y' per vincolare l'asse.
<motion.div
drag
dragConstraints={{ left: -100, right: 100, top: -100, bottom: 100 }}
whileDrag={{ scale: 1.1, cursor: 'grabbing' }}
style={{ cursor: 'grab' }}
>
Drag me
</motion.div>dragConstraints con un ref
Vincoli il trascinamento a un elemento contenitore utilizzando un ref invece di valori in pixel: l'elemento trascinabile non può uscire dal contenitore.
const constraintsRef = useRef(null);
<div ref={constraintsRef} style={{ overflow: 'hidden', width: 300, height: 300 }}>
<motion.div
drag
dragConstraints={constraintsRef}
style={{ width: 80, height: 80, background: '#4f46e5' }}
/>
</div>dragElastic
dragElastic controlla di quanto l'elemento può essere trascinato oltre i propri vincoli (0 = nessuna elasticità, 1 = elasticità massima).
<motion.div
drag
dragConstraints={{ left: 0, right: 0, top: 0, bottom: 0 }}
dragElastic={0.2} // slight rubber-band effect
/>dragSnapToOrigin
Impostando dragSnapToOrigin, l'elemento torna con un effetto elastico alla posizione originale quando viene rilasciato.
<motion.div
drag
dragSnapToOrigin
dragElastic={0.5}
style={{ width: 60, height: 60, background: '#e11d48', borderRadius: '50%' }}
/>Eventi di pan
Utilizzi onPanStart, onPan e onPanEnd per monitorare la posizione del cursore durante i gesti di pan senza abilitare la modalità di trascinamento completo.
<motion.div
onPan={(event, info) => {
console.log('Point:', info.point.x, info.point.y);
console.log('Delta:', info.delta.x, info.delta.y);
}}
/>Eventi di trascinamento
Ascolti gli eventi del ciclo di vita del trascinamento: onDragStart, onDrag e onDragEnd. L'oggetto info contiene la velocità e lo spostamento.
<motion.div
drag="x"
onDragEnd={(event, info) => {
if (info.velocity.x > 500) onSwipeRight();
if (info.velocity.x < -500) onSwipeLeft();
}}
/>Pattern dello swipe delle schede
Implementi uno swipe in stile Tinder utilizzando la velocità di trascinamento per rilevare la direzione dello swipe al rilascio.
function SwipeCard({ onSwipe }) {
return (
<motion.div
drag="x"
dragConstraints={{ left: 0, right: 0 }}
dragElastic={0.7}
onDragEnd={(_, info) => {
if (Math.abs(info.velocity.x) > 400) {
onSwipe(info.velocity.x > 0 ? 'right' : 'left');
}
}}
/>
);
}Verifica rapida
Quale prop di Framer Motion fa tornare un elemento trascinato alla posizione originale quando viene rilasciato?
Riepilogo
Utilizzi whileHover, whileTap e whileFocus per le animazioni degli stati interattivi. Aggiunga drag per gli elementi trascinabili, imponga vincoli con dragConstraints e utilizzi la velocità di onDragEnd per rilevare gli swipe.
Domande Frequenti
La lezione «Animazioni con gesture: hover, tap e drag» è gratuita?
Sì — il testo completo di «Animazioni con gesture: hover, tap e drag» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso React Academy, passa a CoddyKit PRO. Il corso React Academy include 4 lezioni in totale.
Cosa imparerò in «Animazioni con gesture: hover, tap e drag»?
Utilizzi le props whileHover, whileTap e drag per animare i componenti in risposta alle gesture dell'utente. Eserciti React Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare React Academy?
Non è richiesta alcuna esperienza precedente. React Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.
Quanto tempo richiede la lezione «Animazioni con gesture: hover, tap e drag»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione React Academy?
Sì. Ogni lezione React Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Componenti Motion e animazioni di base
- Variants per animazioni orchestrate
- Animazioni con gesture: hover, tap e drag
- Animazioni di layout e AnimatePresence