คลัสเตอร์ Framer Motionอ่าน 8 นาที·โดยทีม ExodeUI
การเรียนรู้ฟิสิกส์สปริงใน Framer Motion และ ExodeUI
คู่มือฉบับสมบูรณ์เกี่ยวกับฟิสิกส์สปริงใน Framer Motion เชี่ยวชาญเรื่องความแข็ง การหน่วง มวล และการพักDelta และค้นพบการเขียนภาพด้วย ExodeUI
สรุปโดยตรงและคำจำกัดความ
หลัก Takeaway
ฟิสิกส์ของสปริงใน Framer Motion แทนที่เส้นโค้งความง่ายตามเวลาด้วยการจำลองทางกายภาพ ควบคุมโดยความแข็ง (แรงดึง) การหน่วง (แรงเสียดทาน) และมวล สปริงจะคำนวณระยะเวลาโดยอัตโนมัติตามระยะทางและความเร็วอินพุต เพื่อให้แน่ใจว่าปฏิกิริยาจะไม่รู้สึกกระทันหันหรือซบเซา
พารามิเตอร์สามประการของสปริง Framer Motion
ใน Framer Motion การเปลี่ยนแปลง: { type: "spring" } รับพารามิเตอร์ทางกายภาพหลักสามตัว:
- ความแข็ง: ค่าที่สูงกว่า (เช่น 500) พุ่งเข้าหาเป้าหมายอย่างรวดเร็ว ค่าที่ต่ำกว่า (เช่น 150) จะเลื่อนอย่างนุ่มนวล
- Damping: ควบคุมการเด้งกลับ การหน่วงที่ต่ำกว่า 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>
);