เครื่องมือสร้าง Cubic Bezier
เครื่องมือสร้าง cubic-bezier easing curve ออนไลน์ฟรี ลากจุดควบคุมเพื่อออกแบบ CSS transition และ animation timing function เห็นการเคลื่อนไหวเป็น preview และ
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
คำถามที่พบบ่อย
cubic-bezier() easing function ใน CSS คืออะไร?
cubic-bezier() เป็น CSS timing function ที่กำหนดด้วยตัวเลขสี่ตัว — cubic-bezier(x1, y1, x2, y2) — อธิบายจุดควบคุมสองจุดของเส้นโค้ง Bézier จาก (0,0) ไป (1,1) แกน X แทนเวลา (ค่า 0 ถึง 1 เสมอ) และแกน Y แทนความคืบหน้าของ animation ดังนั้นรูปร่างของเส้นโค้งจึงควบคุมว่า animation จะเร่งและชะลออย่างไร
ทำไมค่า x ไม่สามารถต่ำกว่า 0 หรือสูงกว่า 1 ได้?
Browser ห้ามค่าเวลาที่อยู่นอกช่วง [0,1] เพราะเวลาไม่สามารถย้อนกลับหรือเกินระยะเวลาของ animation ได้ เครื่องมือนี้จึง clamp ค่า x1 และ x2 ให้อยู่ใน [0,1] อัตโนมัติ ส่วนค่า y สามารถเกินช่วงต่ำกว่า 0 หรือสูงกว่า 1 ได้ ซึ่งเป็นสิ่งที่ทำเอฟเฟกต์ยอดนิยม เช่น back-in, back-out และ spring overshoot
ฉันจะ copy easing เข้าไปใน CSS ได้อย่างไร?
คลิกปุ่มคัดลอกที่อยู่ถัดจากผลลัพธ์ cubic-bezier() เพื่อ copy ค่าที่แน่นอน หรือ copy transition shorthand snippet ทั้งหมดที่แสดงด้านล่าง นำไปวางใน transition หรือ animation-timing-function ใน stylesheet ของคุณได้ทันที
เครื่องมือนี้ใช้งาน offline ได้ไหม?
ได้ เครื่องมือสร้าง Cubic Bezier ทำงานใน browser ของคุณทั้งหมด เมื่อโหลดหน้าเว็บแล้ว ไม่ต้องใช้อินเทอร์เน็ต ไม่มีข้อมูลส่งไปที่ server และดีไซน์เส้นโค้งของคุณไม่ออกจากอุปกรณ์