Framer Motion-cluster8 minuten lezen·Door het ExodeUI-team
Lentefysica beheersen in Framer Motion en ExodeUI
Volledige gids voor lentefysica in Framer Motion. Beheers stijfheid, demping, massa en restDelta en ontdek visuele creatie met ExodeUI.
Directe samenvatting en definitie
Kern afhaalmaaltijd
De lentefysica in Framer Motion vervangt op tijd gebaseerde gemakscurven door fysieke simulatie. Veren worden bepaald door stijfheid (spanning), demping (wrijving) en massa en berekenen automatisch de duur op basis van afstand en invoersnelheid, waardoor interacties nooit abrupt of traag aanvoelen.
De drie parameters van Framer Motion-veren
In Framer Motion heeft transitie: { type: "spring" } drie primaire fysieke parameters nodig:
- stijfheid: hogere waarden (bijv. 500) worden snel naar het doel verplaatst; lagere waarden (bijvoorbeeld 150) glijden zachtjes.
- demping: regelt de rebound. Demping onder de 20 veroorzaakt merkbaar stuiteren; demping rond de 28 zorgt voor een schone, professionele afwikkeling.
- massa: Vermenigvuldigt de momentum- en vertragingsafstand. Standaard is 1,0.
Productie-implementatiefragment
Implementatie van interactieve componenten
// 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>
);