Framer Motion клъстер8 минути четене·От екипа на ExodeUI
Овладяване на Spring Physics в Framer Motion & ExodeUI
Пълно ръководство за пролетна физика в Framer Motion. Овладейте твърдостта, затихването, масата и restDelta и открийте визуалното авторство с ExodeUI.
Директно резюме и определение
Ядро за вкъщи
Пролетната физика в 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>
);