Gestenanimationen: Hover, Tap und Drag
Verwenden Sie die Props whileHover, whileTap und drag, um Components auf Benutzergesten zu animieren.
Gestenanimationen: Hover, Tap und Drag ist eine kostenlose React Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des React Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.
Überblick über Gesten-Props
Framer-Motion-Gesten-Props animieren Komponenten als Reaktion auf Benutzereingaben, ohne JavaScript-Event-Handler. Die wichtigsten sind whileHover, whileTap, whileDrag und whileFocus.
whileHover
Definiert den animierten Zustand, während sich der Cursor über dem Element befindet. Beim Verlassen des Elements durch den Cursor wird der ursprüngliche Zustand automatisch wiederhergestellt.
<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
Definiert den animierten Zustand, während das Element gedrückt wird. Ideal für eine visuelle Rückmeldung beim Drücken von Schaltflächen.
<motion.button
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
>
Click
</motion.button>whileFocus
Animiert das Element, sobald es den Tastaturfokus erhält – ideal für barrierefreie Fokusindikatoren.
<motion.input
whileFocus={{ borderColor: '#4f46e5', boxShadow: '0 0 0 3px rgba(79,70,229,0.3)' }}
transition={{ duration: 0.2 }}
/>Ziehen aktivieren
Fügen Sie die drag-Prop hinzu, um ein Element ziehbar zu machen. Setzen Sie sie auf true, 'x' oder 'y', um die Bewegungsachse einzuschränken.
<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 mit einer Ref
Begrenzen Sie das Ziehen mithilfe einer Ref auf ein Container-Element statt über Pixelwerte – das ziehbare Element kann den Container nicht verlassen.
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 steuert, wie weit das Element über seine Begrenzungen hinaus gezogen werden kann (0 = keine Elastizität, 1 = vollständig elastisch).
<motion.div
drag
dragConstraints={{ left: 0, right: 0, top: 0, bottom: 0 }}
dragElastic={0.2} // slight rubber-band effect
/>dragSnapToOrigin
Wenn Sie dragSnapToOrigin setzen, federt das Element beim Loslassen an seine ursprüngliche Position zurück.
<motion.div
drag
dragSnapToOrigin
dragElastic={0.5}
style={{ width: 60, height: 60, background: '#e11d48', borderRadius: '50%' }}
/>Pan-Ereignisse
Verwenden Sie onPanStart, onPan und onPanEnd, um die Cursorposition während von Pan-Gesten zu verfolgen, ohne den vollständigen Drag-Modus zu aktivieren.
<motion.div
onPan={(event, info) => {
console.log('Point:', info.point.x, info.point.y);
console.log('Delta:', info.delta.x, info.delta.y);
}}
/>Drag-Ereignisse
Reagieren Sie auf Drag-Lifecycle-Ereignisse: onDragStart, onDrag und onDragEnd. Das info-Objekt enthält Geschwindigkeit und Versatz.
<motion.div
drag="x"
onDragEnd={(event, info) => {
if (info.velocity.x > 500) onSwipeRight();
if (info.velocity.x < -500) onSwipeLeft();
}}
/>Muster für Karten-Wischgesten
Implementieren Sie eine Wischgeste nach Tinder-Art, indem Sie anhand der Drag-Geschwindigkeit beim Loslassen die Wischrichtung erkennen.
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');
}
}}
/>
);
}Schnelltest
Welche Framer-Motion-Prop lässt ein gezogenes Element beim Loslassen an seine ursprüngliche Position zurückfedern?
Zusammenfassung
Verwenden Sie whileHover, whileTap und whileFocus für Animationen interaktiver Zustände. Fügen Sie drag für ziehbare Elemente hinzu, begrenzen Sie die Bewegung mit dragConstraints und verwenden Sie die Geschwindigkeit von onDragEnd, um Wischgesten zu erkennen.
Häufig gestellte Fragen
Ist die Lektion „Gestenanimationen: Hover, Tap und Drag“ kostenlos?
Ja — der vollständige Text von „Gestenanimationen: Hover, Tap und Drag“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des React Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Gestenanimationen: Hover, Tap und Drag“?
Verwenden Sie die Props whileHover, whileTap und drag, um Components auf Benutzergesten zu animieren. Du übst React Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um React Academy zu starten?
Keine Vorkenntnisse erforderlich. React Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.
Wie lange dauert die Lektion „Gestenanimationen: Hover, Tap und Drag“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser React Academy-Lektion Code schreiben und ausführen?
Ja. Jede React Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Motion-Components und grundlegende Animationen
- Variants für orchestrierte Animationen
- Gestenanimationen: Hover, Tap und Drag
- Layout-Animationen und AnimatePresence