Klaster Framer Motion8 min čítanie·Tím ExodeUI
Zvládnutie jarnej fyziky v Framer Motion a ExodeUI
Kompletný sprievodca fyzikou jari v Framer Motion. Zvládnite tuhosť, tlmenie, hmotnosť a zvyšok Delta a objavte vizuálne vytváranie so ExodeUI.
Priame zhrnutie a definícia
Core Takeaway
Fyzika pružiny v Framer Motion nahrádza krivky ľahkosti založené na čase fyzikálnou simuláciou. Pružiny, ktoré sa riadia tuhosťou (ťahom), tlmením (trenie) a hmotnosťou, automaticky vypočítavajú trvanie na základe vzdialenosti a vstupnej rýchlosti, čím zaisťujú, že interakcia nikdy nebude náhla alebo pomalá.
Tri parametre pružín Framer Motion
V Framer Motion prechod: { type: "jar" } má tri primárne fyzikálne parametre:
- tuhosť: Vyššie hodnoty (napr. 500) sa rýchlo prichytia k cieľu; nižšie hodnoty (napr. 150) jemne kĺžu.
- tlmenie: Ovláda odskok. Tlmenie pod 20 spôsobuje citeľné poskakovanie; tlmenie okolo 28 vytvára čisté, profesionálne usadenie.
- hmotnosť: Násobí hybnosť a vzdialenosť spomalenia. Predvolená hodnota je 1.0.
Snippet implementácie výroby
Implementácia interaktívnych komponentov
// 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>
);