เครื่องมือสร้าง Cubic Bezier
เครื่องมือสร้าง cubic-bezier easing curve ออนไลน์ฟรี ลากจุดควบคุมเพื่อออกแบบ CSS transition และ animation timing function เห็นการเคลื่อนไหวเป็น preview และ copy ค่า cubic-bezier() ไปใช้ได้ทันที ทำงานฝั่ง client 100%
Loading tool...
เครื่องมือสร้าง Cubic Bezier คืออะไร?
เครื่องมือสร้าง Cubic Bezier เป็นเครื่องมือบน browser ฟรี สำหรับออกแบบ timing ของ CSS transition และ animation ฟังก์ชัน cubic-bezier() กำหนดด้วยจุดควบคุมสองจุดคือ P1(x1, y1) และ P2(x2, y2) โดยแกน X แทนเวลา (ค่า 0 ถึง 1 เสมอ) และแกน Y แทนความคืบหน้าของ animation (อาจเกิน 0 หรือ 1 เพื่อทำเอฟเฟกต์แบบ back หรือ bounce ได้) ลากจุดควบคุมบนกราฟ ปรับตัวเลข เลือก preset แล้ว copy ค่า cubic-bezier() ที่ได้ไปใช้ใน CSS ได้ทันที ทุกอย่างทำงานในเครื่องของคุณ ไม่มีข้อมูลส่งออกไปไหน
ประโยชน์หลัก
- ออกแบบ easing แบบภาพแทนการเดาตัวเลขทศนิยมสี่ตัว
- แกน X ถูกล็อกที่ช่วงเวลา [0,1] ที่ถูกต้อง ส่วนแกน Y รองรับ overshoot สำหรับเอฟเฟกต์ spring และ back
- ค่าสำเร็จแปดแบบพร้อมใช้ สอดคล้องกับ CSS keyword ทั่วไป พร้อมเส้นโค้งกำหนดเอง
- ตัวอย่าง animation สดโดยใช้ easing function ของคุณจริง ๆ พร้อม CSS และ SVG path ที่ copy ได้ทันที
- ทำงานฝั่ง client 100% และ offline — ดีไซน์ของคุณไม่ออกจากอุปกรณ์
กรณีการใช้งาน
- •ปั้น ease กำหนดเองสำหรับ micro-interaction ของ UI เช่น ปุ่ม, modal และ toast
- •สร้างความรู้สึกของ easing จาก design tool (เช่น Figma) ใน CSS ของ production
- •ทำเอฟเฟกต์ spring หรือ back overshoot โดยให้ค่า Y เกินช่วง [0,1]
- •เปรียบเทียบเส้นโค้งของคุณกับเส้นอ้างอิงแบบ linear เพื่อเห็นการเร่งความเร็วได้ทันที
- •สอนหรือเรียนรู้ว่าจุดควบคุม cubic-bezier ส่งผลต่อ timing ของ CSS animation อย่างไร
วิธีใช้เครื่องมือสร้าง Cubic Bezier
- ลากจุดควบคุม: คลิกและลากจุดสีสองจุด (P1 และ P2) บนตัวแก้ไขเส้นโค้ง P1 กำหนดจุดเริ่มของ animation และ P2 กำหนดจุดปลาย แกน X คือเวลา (ล็อกที่ 0–1) และแกน Y คือความคืบหน้า (สามารถเกินช่วงเพื่อทำเอฟเฟกต์ spring หรือ back ได้)
- ปรับตัวเลขให้แม่นยำ: ใช้ช่องกรอกตัวเลข x1, y1, x2, y2 เพื่อควบคุมอย่างละเอียด ค่า X ถูก clamp อัตโนมัติให้อยู่ใน [0,1] ตามที่ browser กำหนด ส่วนค่า Y สามารถต่ำกว่า 0 หรือสูงกว่า 1 เพื่อทำ overshoot ได้
- ดูตัวอย่าง Animation: ดูจุด preview เคลื่อนที่ด้วย easing function ของคุณจริง ๆ คลิกเล่นใหม่เพื่อเริ่มลูปใหม่ หรือเลือก preset (linear, ease, back-out ฯลฯ) เพื่อเป็นจุดเริ่มต้นที่รวดเร็ว
- Copy CSS: คลิกคัดลอกเพื่อเก็บค่า cubic-bezier() หรือ copy transition shorthand snippet ทั้งหมดแล้ววางลงใน stylesheet ได้เลย ยังมี SVG path แบบ normalized ที่ export ได้ให้อีกด้วย
คุณสมบัติหลัก
- ตัวแก้ไขเส้นโค้ง SVG แบบโต้ตอบเต็มรูปแบบ พร้อมจุดควบคุม P1 และ P2 ที่ลากได้ และเส้นอ้างอิงแบบ linear สำหรับเปรียบเทียบ
- ค่าสำเร็จแปดแบบพร้อมใช้ ทั้ง linear, ease, ease-in, ease-out, ease-in-out, back-in, back-out และเส้นโค้ง snappy แบบกำหนดเอง
- ช่องกรอกตัวเลข x1, y1, x2, y2 ที่แม่นยำ โดยแกน X ถูก clamp อัตโนมัติให้อยู่ในช่วง [0,1] ที่ถูกต้อง และแกน Y รองรับค่า overshoot
- ค่า CSS cubic-bezier() ที่ copy ได้ทันที พร้อม transition shorthand snippet และ SVG path แบบ normalized ที่ export ได้
- ตัวอย่าง animation ที่วนซ้ำสด ๆ โดยใช้ easing function ของคุณจริง ๆ เพื่อให้เห็นการเคลื่อนไหวแบบ real time
- ทำงานฝั่ง client 100% และ offline — ไม่มีการติดตาม ไม่ต้องสมัคร และดีไซน์ของคุณไม่ออกจาก browser