Framer Motion klaszter8 perc olvasás·Az ExodeUI csapata
Rugófizika elsajátítása a Framer Motion és ExodeUI nyelven
Teljes útmutató a tavaszi fizikához a Framer Motion-ben. Sajátítsa el a merevséget, a csillapítást, a tömeget és a restDeltát, és fedezze fel a vizuális alkotást a ExodeUI segítségével.
Közvetlen összefoglalás és meghatározás
Core Takeaway
A Framer Motion rugófizikája az időalapú görbéket fizikai szimulációval helyettesíti. A merevség (feszítés), a csillapítás (súrlódás) és a tömeg által szabályozott rugók a távolság és a bemeneti sebesség alapján automatikusan kiszámítják az időtartamot, biztosítva, hogy a kölcsönhatások soha ne legyenek hirtelenek vagy lomhák.
A Framer Motion rugók három paramétere
A Framer Motion-ben az átmenet: { type: "spring" } három elsődleges fizikai paramétert vesz igénybe:
- merevség: A magasabb értékek (pl. 500) gyorsan céloznak; alacsonyabb értékek (pl. 150) finoman csúsznak.
- csillapítás: Szabályozza a visszapattanást. A 20 alatti csillapítás észrevehető ugrálást okoz; 28 körüli csillapítás tiszta, professzionális rendezést hoz létre.
- tömeg: Megszorozza a lendületet és a lassulási távolságot. Az alapértelmezett 1.0.
Gyártási megvalósítási részlet
Interaktív komponensek megvalósítása
// 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>
);