เครื่องมือสร้าง CSS Spring Easing
เครื่องมือสร้าง spring easing ออนไลน์ฟรี ปรับค่า stiffness, damping และ mass เพื่อออกแบบการเคลื่อนไหวแบบ spring ตามหลักฟิสิกส์ และ copy ค่า linear() CSS easing ไปใช้ได้ทันที พร้อม preview สด ค่าสำเร็จแปดแบบ และรองรับ underdamped, critically damped และ overdamped ครบทุกแบบ ทำงานฝั่ง client 100%
Loading tool...
เครื่องมือสร้าง CSS Spring Easing คืออะไร?
เครื่องมือสร้าง CSS Spring Easing เป็นเครื่องมือบน browser ฟรี สำหรับออกแบบการเคลื่อนไหวแบบ spring ตามหลักฟิสิกส์สำหรับ CSS transition และ animation ต่างจาก cubic-bezier() ที่จำกัดอยู่แค่จุดควบคุมสองจุด spring กำหนดด้วยพารามิเตอร์ทางฟิสิกส์สามตัวที่เข้าใจง่าย ได้แก่ stiffness (ความแข็งแรงของสปริง) damping (แรงต้านที่ชะลอการเคลื่อนที่) และ mass (น้ำหนักของวัตถุ) เครื่องมือจะแก้สมการ damped harmonic oscillator เป็นตัวเลข วาดเส้นโค้งการกระจัดที่ได้ แล้ว export เป็น CSS linear() easing function ที่ browser สมัยใหม่ใช้ได้โดยตรง ลาก slider เลือก preset แล้ว copy ค่า linear() ไปใช้ใน stylesheet ได้ทันที ทุกอย่างทำงานใน browser ของคุณ ไม่มีข้อมูลส่งออกไปไหน
ประโยชน์หลัก
- การเคลื่อนไหวแบบ spring ดูเป็นธรรมชาติกว่า cubic-bezier easing เพราะจำลองแรงฟิสิกส์จริง ทำให้เกิด overshoot, settle และ bounce ที่สมจริง
- พารามิเตอร์สามตัวที่เข้าใจง่ายสอดคล้องกับวิธีคิดของนักออกแบบและวิศวกร motion โดยตรง แทนที่จะต้องเดาตัวเลขทศนิยม abstract สี่ตัว
- คำนวณ damping ratio และจำแนกลักษณะระบบอัตโนมัติ ทำให้รู้ทันทีว่า spring เป็นแบบ underdamped, critically damped หรือ overdamped
- ผลลัพธ์เป็น CSS linear() easing function สมัยใหม่ ซึ่งเป็นวิธี native ของ browser ในการแสดง timing ที่ไม่ใช่ cubic เช่น spring และ bounce
- ทำงานฝั่ง client 100% และใช้งาน offline ได้ ดีไซน์ของคุณไม่ออกจากอุปกรณ์
กรณีการใช้งาน
- •ทำ spring micro-interaction ที่เป็นธรรมชาติสำหรับ button, modal, toast และ notification
- •จำลองความรู้สึกของ JavaScript spring library (เช่น Framer Motion หรือ React Spring) ใน CSS ล้วน
- •ออกแบบ underdamped bounce สำหรับ UI element สนุก ๆ เช่น toggle, badge และ reaction emoji
- •สร้าง critically damped curve สำหรับ transition เร็วไม่มี overshoot บน dashboard มืออาชีพ
- •สอนหรือเรียนรู้ว่า stiffness, damping และ mass ส่งผลต่อ timing ของ spring animation อย่างไร
วิธีใช้เครื่องมือสร้าง CSS Spring Easing
- เลือก Preset: เริ่มจากค่าสำเร็จแปดแบบ เช่น gentle, wobbly, bouncy หรือ snappy แต่ละ preset กำหนดค่า stiffness, damping และ mass ให้พร้อมใช้ ทำให้คุณได้ spring ที่ใช้งานได้ทันที
- ปรับพารามิเตอร์ฟิสิกส์: ลาก slider stiffness, damping และ mass หรือพิมพ์ตัวเลขที่แน่นอน stiffness ทำให้ spring แข็งแรงและเร็วขึ้น damping ลดการเด้ง ส่วน mass ทำให้การเคลื่อนไหวหนักและช้าลง
- ดูตัวอย่างการเคลื่อนไหว: ดูจุด animation สดเคลื่อนที่ด้วยเส้นโค้ง spring ของคุณจริง ๆ และตรวจสอบป้ายลักษณะระบบ (underdamped, critically damped หรือ overdamped) พร้อม settle time เพื่อทำความเข้าใจความรู้สึก
- Copy CSS: คลิก Copy เพื่อ copy ค่า linear() easing หรือ copy transition shorthand snippet ที่ปรับเวลาตาม settle time นำไปวางใน transition หรือ animation-timing-function ใน stylesheet ได้เลย
คุณสมบัติหลัก
- โมเดล spring ตามหลักฟิสิกส์ พร้อม slider stiffness, damping และ mass รวมถึงช่องกรอกตัวเลขเพื่อความแม่นยำ
- ค่าสำเร็จแปดแบบพร้อมใช้ ทั้ง gentle, wobbly, stiff, slow, molasses, bouncy, snappy และ soft
- คำนวณ damping ratio และจำแนกลักษณะระบบอัตโนมัติ ทำให้เข้าใจพฤติกรรมของ spring ได้ทันที
- ค่า linear() CSS easing ที่ copy ได้ทันที พร้อม transition shorthand snippet ที่ปรับเวลาตาม settle time
- ตัวอย่าง animation สดแบบลูป โดยใช้เส้นโค้ง spring ของคุณจริง ๆ ทำให้รู้สึกถึงการเคลื่อนไหวก่อนใช้งานจริง
- ทำงานฝั่ง client 100% และใช้งาน offline ได้ ไม่มีการติดตาม ไม่ต้องสมัคร ดีไซน์ของคุณไม่ออกจาก browser