Cụm Framer Motionđọc 8 phút·Đội ngũ ExodeUI
Nắm vững Vật lý mùa xuân trong Framer Motion & ExodeUI
Hướng dẫn đầy đủ về vật lý lò xo trong Framer Motion. Làm chủ độ cứng, giảm chấn, khối lượng và phần còn lạiDelta, đồng thời khám phá khả năng tạo hình ảnh bằng ExodeUI.
Tóm tắt và định nghĩa
Điểm chính
Vật lý lò xo trong Framer Motion thay thế các đường cong dễ dàng dựa trên thời gian bằng mô phỏng vật lý. Được điều chỉnh bởi độ cứng (sức căng), độ giảm chấn (ma sát) và khối lượng, lò xo tự động tính toán thời lượng dựa trên khoảng cách và vận tốc đầu vào, đảm bảo các tương tác không bao giờ có cảm giác đột ngột hoặc chậm chạp.
Ba thông số của lò xo Framer Motion
Trong Framer Motion, transition: { type: "spring" } có ba tham số vật lý chính:
- độ cứng: Giá trị cao hơn (ví dụ: 500) bám sát mục tiêu một cách nhanh chóng; giá trị thấp hơn (ví dụ: 150) lướt nhẹ nhàng.
- giảm xóc: Kiểm soát sự bật lại. Giảm chấn dưới 20 gây ra hiện tượng nảy đáng chú ý; giảm chấn khoảng 28 tạo ra một không gian sạch sẽ, chuyên nghiệp.
- khối lượng: Nhân động lượng và quãng đường giảm tốc. Mặc định là 1.0.
Đoạn mã triển khai thực tế
Triển khai component tương tác
// 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>
);