Συστάδα Framer Motion8 λεπτά ανάγνωση·Από την ομάδα του ExodeUI
Κατακτήστε την Εαρινή Φυσική σε Framer Motion & ExodeUI
Πλήρης οδηγός για την εαρινή φυσική στο Framer Motion. Κατακτήστε την ακαμψία, την απόσβεση, τη μάζα και το restDelta και ανακαλύψτε την οπτική συγγραφή με το ExodeUI.
Άμεση Περίληψη & Ορισμός
Core Takeaway
Η εαρινή φυσική στο Framer Motion αντικαθιστά τις καμπύλες ευκολίας που βασίζονται στον χρόνο με φυσική προσομοίωση. Καθοδηγούμενα από την ακαμψία (τάση), την απόσβεση (τριβή) και τη μάζα, τα ελατήρια υπολογίζουν αυτόματα τη διάρκεια με βάση την απόσταση και την ταχύτητα εισόδου, διασφαλίζοντας ότι οι αλληλεπιδράσεις δεν γίνονται ποτέ απότομες ή αργές.
Οι τρεις παράμετροι των ελατηρίων Framer Motion
Στο Framer Motion, η μετάβαση: { type: "spring" } παίρνει τρεις κύριες φυσικές παραμέτρους:
- ακαμψία: Οι υψηλότερες τιμές (π.χ. 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>
);