Framer Motion क्लस्टर8 मिनट पढ़ें·ExodeUI टीम द्वारा
Framer Motion और ExodeUI में स्प्रिंग फिजिक्स में महारत हासिल करना
Framer Motion में वसंत भौतिकी के लिए संपूर्ण मार्गदर्शिका। कठोरता, भिगोना, द्रव्यमान और रेस्टडेल्टा में महारत हासिल करें, और ExodeUI के साथ दृश्य संलेखन की खोज करें।
प्रत्यक्ष सारांश एवं परिभाषा
कोर टेकअवे
Framer Motion में स्प्रिंग भौतिकी समय-आधारित सहजता वक्रों को भौतिक अनुकरण से प्रतिस्थापित करती है। कठोरता (तनाव), भिगोना (घर्षण), और द्रव्यमान द्वारा शासित, स्प्रिंग्स स्वचालित रूप से दूरी और इनपुट वेग के आधार पर अवधि की गणना करते हैं, यह सुनिश्चित करते हुए कि बातचीत कभी भी अचानक या सुस्त महसूस न हो।
Framer Motion स्प्रिंग्स के तीन पैरामीटर
Framer Motion में, ट्रांज़िशन: { प्रकार: "स्प्रिंग" } तीन प्राथमिक भौतिक पैरामीटर लेता है:
- कठोरता: उच्च मान (जैसे 500) तेजी से लक्ष्य पर पहुंच जाते हैं; निचले मान (जैसे 150) धीरे-धीरे सरकते हैं।
- अवमंदन: पलटाव को नियंत्रित करता है। 20 से नीचे भीगने से उल्लेखनीय उछाल आता है; 28 के आसपास भिगोना एक स्वच्छ, पेशेवर निपटान बनाता है।
- द्रव्यमान: संवेग और मंदी की दूरी को गुणा करता है। डिफ़ॉल्ट 1.0 है.
उत्पादन कार्यान्वयन स्निपेट
इंटरएक्टिव घटक कार्यान्वयन
// 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>
);