Motion-Components und grundlegende Animationen
Ersetzen Sie div durch motion.div und verwenden Sie die Props animate, initial und exit für einfache Animationen.
Motion-Components und grundlegende Animationen ist eine kostenlose React Academy-Lektion auf CoddyKit. Dies ist Lektion 1 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.
Was ist Framer Motion?
Framer Motion ist eine React-Bibliothek für Animationen. Ersetzen Sie HTML-Elemente durch ihre motion.*-Äquivalente, um deklarative Animationen über Props statt über CSS-Keyframes hinzuzufügen.
Installation
Installieren Sie Framer Motion und importieren Sie motion daraus.
npm install framer-motion
import { motion } from 'framer-motion';Ihre erste Animation
Ersetzen Sie <div> durch <motion.div> und fügen Sie die Props initial, animate und transition hinzu.
<motion.div
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.4 }}
>
Hello, Framer Motion!
</motion.div>Die initial-Prop
initial definiert den Ausgangszustand der Animation – also den Zustand, in dem das Element startet, bevor es zu animate animiert wird.
// Fade in from left
<motion.div
initial={{ opacity: 0, x: -50 }}
animate={{ opacity: 1, x: 0 }}
/>
// Scale up from center
<motion.button
initial={{ scale: 0 }}
animate={{ scale: 1 }}
/>Die animate-Prop
animate definiert den Zielzustand. Framer Motion interpoliert mithilfe von Federphysik oder einer angegebenen Easing-Funktion zwischen initial und animate.
<motion.h1
initial={{ opacity: 0 }}
animate={{ opacity: 1, color: '#4f46e5' }}
transition={{ duration: 0.6, ease: 'easeOut' }}
>
Welcome
</motion.h1>Transition-Optionen
Die transition-Prop steuert den Ablauf der Animation: duration, ease, delay, type ('spring' | 'tween' | 'inertia').
transition={{
type: 'spring',
stiffness: 300,
damping: 20,
delay: 0.2,
}}Keyframes in animate
Übergeben Sie jedem animierten Wert ein Array, um Keyframe-Animationen zu erstellen, die mehrere Zustände durchlaufen.
<motion.div
animate={{ x: [0, 30, 0] }}
transition={{ duration: 1, repeat: Infinity, ease: 'easeInOut' }}
/>Hover- und Tap-Zustände
whileHover und whileTap definieren animierte Zustände für Hover- und Druckinteraktionen und kehren automatisch zurück, sobald die Geste endet.
<motion.button
whileHover={{ scale: 1.05, backgroundColor: '#4f46e5' }}
whileTap={{ scale: 0.95 }}
style={{ backgroundColor: '#6366f1' }}
>
Press me
</motion.button>Beim Scrollen mit inView animieren
Verwenden Sie die whileInView-Prop, um eine Animation auszulösen, sobald das Element in den Viewport gescrollt wird.
<motion.section
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, amount: 0.3 }}
transition={{ duration: 0.5 }}
>
<h2>Revealed on scroll</h2>
</motion.section>Die exit-Prop mit AnimatePresence
exit definiert die Animation, wenn eine Komponente ausgehängt wird. Sie funktioniert nur innerhalb von <AnimatePresence>.
import { motion, AnimatePresence } from 'framer-motion';
<AnimatePresence>
{isVisible && (
<motion.div
key="modal"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0, scale: 0.95 }}
/>
)}
</AnimatePresence>useAnimate für imperative Steuerung
useAnimate() gibt eine scope-Referenz und eine animate-Funktion zurück, mit denen Sie Animationen außerhalb des deklarativen Prop-Systems programmatisch steuern können.
import { useAnimate } from 'framer-motion';
function ShakeButton() {
const [scope, animate] = useAnimate();
const handleClick = async () => {
await animate(scope.current, { x: [-10, 10, -10, 0] }, { duration: 0.3 });
};
return <motion.button ref={scope} onClick={handleClick}>Shake</motion.button>;
}Animationen reduzieren
Berücksichtigen Sie die Einstellung des Benutzers für reduzierte Bewegung mit dem useReducedMotion()-Hook.
import { useReducedMotion } from 'framer-motion';
function AnimatedCard() {
const shouldReduce = useReducedMotion();
return (
<motion.div
animate={{ opacity: 1, y: shouldReduce ? 0 : -20 }}
/>
);
}Schnelltest
Welche Framer-Motion-Prop definiert den Animationszustand, den eine Komponente erreichen soll (ihr Ziel)?
Zusammenfassung
Ersetzen Sie HTML-Elemente durch motion.*-Äquivalente. Verwenden Sie initial für den Ausgangszustand, animate für das Ziel, transition für das Timing, whileHover/whileTap für Gesten und whileInView für scrollgesteuerte Animationen.
Häufig gestellte Fragen
Ist die Lektion „Motion-Components und grundlegende Animationen“ kostenlos?
Ja — der vollständige Text von „Motion-Components und grundlegende Animationen“ 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 „Motion-Components und grundlegende Animationen“?
Ersetzen Sie div durch motion.div und verwenden Sie die Props animate, initial und exit für einfache Animationen. 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 1 von 4.
Wie lange dauert die Lektion „Motion-Components und grundlegende Animationen“?
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