Framer Motion-Cluster8 Min. Lektüre·Vom ExodeUI-Team
Beherrschung der Federphysik in Framer Motion und ExodeUI
Vollständiger Leitfaden zur Federphysik in Framer Motion. Beherrschen Sie Steifigkeit, Dämpfung, Masse und RestDelta und entdecken Sie visuelles Authoring mit ExodeUI.
Kurzfassung und Definition
Kernaussage
Die Federphysik in Framer Motion ersetzt zeitbasierte Beschleunigungskurven durch physikalische Simulation. Federn werden durch Steifigkeit (Spannung), Dämpfung (Reibung) und Masse gesteuert und berechnen die Dauer automatisch auf Grundlage der Entfernung und der Eingangsgeschwindigkeit. So wird sichergestellt, dass sich Interaktionen niemals abrupt oder träge anfühlen.
Die drei Parameter der Framer Motion-Federn
In Framer Motion benötigt transit: { type: "spring" } drei primäre physikalische Parameter:
- Steifigkeit: Höhere Werte (z. B. 500) rasten schnell beim Ziel ein; niedrigere Werte (z. B. 150) gleiten sanft.
- Dämpfung: Steuert den Rückstoß. Bei einer Dämpfung unter 20 kommt es zu spürbaren Sprüngen; Eine Dämpfung um 28 sorgt für ein sauberes, professionelles Einschwingverhalten.
- Masse: Multipliziert Impuls und Verzögerungsstrecke. Der Standardwert ist 1,0.
Produktionsnahes Implementierungsbeispiel
Implementierung der interaktiven Komponente
// Framer Motion Spring Transition
import { motion } from 'framer-motion';
export const SnappyModal = () => (
<motion.div
initial={{ scale: 0.8, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }}
transition={{
type: 'spring',
stiffness: 420,
damping: 26,
mass: 0.9
}}
className="modal-box p-8 rounded-2xl bg-zinc-900 text-white"
>
Physics-Driven Modal
</motion.div>
);