Cluster Framer Motion8 minute de citit·De echipa ExodeUI
Stăpânirea fizicii primăverii în Framer Motion și ExodeUI
Ghid complet pentru fizica primăverii în Framer Motion. Stăpânește rigiditatea, amortizarea, masa și restDelta și descoperă creația vizuală cu ExodeUI.
Rezumat direct și definiție
Core Takeaway
Fizica primăverii în Framer Motion înlocuiește curbele de ușurință bazate pe timp cu simularea fizică. Guvernate de rigiditate (tensiune), amortizare (frecare) și masă, arcurile calculează automat durata în funcție de distanță și viteza de intrare, asigurându-se că interacțiunile nu sunt niciodată abrupte sau lente.
Cei trei parametri ai arcurilor Framer Motion
În Framer Motion, tranziția: { type: „spring” } are trei parametri fizici primari:
- rigiditate: valorile mai mari (de exemplu, 500) se fixează rapid la țintă; valorile mai mici (de ex. 150) alunecă ușor.
- amortizare: controlează rebound. Amortizarea sub 20 provoacă sărituri vizibile; amortizarea în jurul valorii de 28 creează o stare curată, profesională.
- masa: înmulțește impulsul și distanța de decelerare. Implicit este 1.0.
Fragment de implementare a producției
Implementarea componentelor interactive
// 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>
);