Klastr Framer Motion8 min čtení·Tým ExodeUI
Zvládnutí jarní fyziky v Framer Motion & ExodeUI
Kompletní průvodce fyzikou pružin v Framer Motion. Zvládněte tuhost, tlumení, hmotnost a zbytek Delta a objevte vizuální tvorbu pomocí ExodeUI.
Přímé shrnutí a definice
Core Takeaway
Fyzika pružin v Framer Motion nahrazuje křivky náběhu a náběhu na čase fyzikální simulací. Pružiny, které se řídí tuhostí (tahem), tlumením (třením) a hmotností, automaticky počítají dobu trvání na základě vzdálenosti a vstupní rychlosti, což zajišťuje, že interakce nikdy nebudou náhlé nebo pomalé.
Tři parametry pružin Framer Motion
V Framer Motion má přechod: { typ: "jaro" } tři primární fyzické parametry:
- tuhost: Vyšší hodnoty (např. 500) se rychle přichytí k cíli; nižší hodnoty (např. 150) jemně klouzají.
- tlumení: Ovládá odskok. Tlumení pod 20 způsobuje znatelné poskakování; tlumení kolem 28 vytváří čisté, profesionální usazení.
- hmotnost: Násobí hybnost a zpomalovací vzdálenost. Výchozí hodnota je 1.0.
Fragment implementace výroby
Implementace interaktivních komponent
// 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>
);