Framer Motion 클러스터8분 읽기·ExodeUI 팀
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>
);