การทำงานของเครื่องมือสร้าง CSS Cubic Bezier
เครื่องมือนี้ช่วยให้คุณสร้างเส้นโค้งความเร็ว (Easing curve) สำหรับ CSS ได้ด้วยการลากจุดควบคุมสองจุดเพื่อปรับแต่งรูปทรงของเส้นโค้ง ในขณะที่คุณปรับแต่งเส้นโค้ง จะมีจุดวงกลมเคลื่อนที่ไปตามเส้นโค้งเพื่อแสดงผลลัพธ์ของความเร็วเปรียบเทียบกับจุดที่เคลื่อนที่ด้วยความเร็วคงที่ (Linear) เมื่อได้เส้นโค้งที่ต้องการแล้ว เครื่องมือจะแสดงค่า cubic-bezier() เพื่อให้คุณคัดลอกไปใช้งานในโค้ด CSS ได้ทันที
การประมวลผลทั้งหมดเกิดขึ้นบนอุปกรณ์ของคุณ โดยเส้นโค้งจะถูกวาดขึ้นในเบราว์เซอร์ของคุณโดยตรง ไม่มีการอัปโหลดข้อมูลที่คุณตั้งค่าไว้ไปยัง BroBroGo
การควบคุมและการป้อนข้อมูล
คุณสามารถปรับแต่งเส้นโค้งได้ผ่านช่องทางดังต่อไปนี้:
- การลากแฮนเดิลสองข้าง: ใช้เมาส์หรือการสัมผัสลากจุดควบคุมเพื่อปรับเปลี่ยนรูปทรงของเส้นโค้งโดยตรง
- จุดควบคุมแรก: ประกอบด้วยค่า X (จำกัดอยู่ในช่วง 0 ถึง 1) และค่า Y (จำกัดอยู่ในช่วง -0.70 ถึง 1.70)
- จุดควบคุมที่สอง: ประกอบด้วยค่า X (จำกัดอยู่ในช่วง 0 ถึง 1) และค่า Y (จำกัดอยู่ในช่วง -0.70 ถึง 1.70)
- การเลือกพรีเซ็ต: เลือกใช้งานค่ามาตรฐานที่กำหนดไว้ล่วงหน้า เช่น "ease", "ease-in", "ease-out", "ease-in-out", "Back In", "Back Out" หรือ "Back In-Out"
กฎเกณฑ์และพฤติกรรมของระบบอินพุต
ในการใช้งานเครื่องมือ มีกฎเกณฑ์และการตอบสนองของระบบอินพุตที่ควรทราบดังนี้:
- ขอบเขตของค่า X และ Y: ค่า X ของจุดควบคุมจะต้องอยู่ระหว่าง 0 ถึง 1 เสมอ ส่วนค่า Y สามารถกำหนดให้ต่ำกว่า 0 (ลงไปใต้ขอบล่าง) หรือสูงกว่า 1 (ขึ้นไปเหนือขอบบน) ได้ถึงช่วง -0.70 ถึง 1.70 เพื่อสร้างเอฟเฟกต์ดึงกลับหรือเคลื่อนที่เลยขอบเขต
- การแก้ไขค่าที่เกินขอบเขต: หากคุณป้อนค่าที่เกินกำหนด เช่น ป้อนเลข
9ในช่องค่า X ของจุดควบคุมแรก เมื่อคุณคลิกออกจากช่องป้อนข้อมูล (Lose focus) ค่าจะถูกปรับกลับมาเป็น1โดยอัตโนมัติ - การคืนค่าเมื่อช่องว่างเปล่า: หากลบตัวเลขในช่องป้อนข้อมูลจนว่างเปล่าแล้วคลิกออกจากช่อง ระบบจะดึงค่าที่ถูกต้องล่าสุดกลับมาแสดงผล หากป้อนค่าว่างหรือค่าที่ไม่ใช่ตัวเลขค้างไว้ ระบบจะหยุดรอจนกว่าจะมีการป้อนค่าที่สมบูรณ์
- การใช้คีย์บอร์ดควบคุม: เมื่อโฟกัสอยู่ที่แฮนเดิลของจุดควบคุม คุณสามารถกดปุ่มลูกศรซ้าย (Left arrow) เพื่อปรับลดค่าอย่างละเอียดได้ เช่น ปรับลดลงมาเป็น
0.99 - การคัดลอกค่า: เมื่อกดคัดลอกค่า
cubic-bezier()สำเร็จ ระบบจะแสดงสถานะ "Copied" โดยจะไม่มีการแจ้งเตือนข้อผิดพลาดหรือการปฏิเสธใดๆ ปรากฏขึ้น
การนำไปใช้งานใน CSS
ค่าที่ได้จากเครื่องมือนี้จะอยู่ในรูปแบบฟังก์ชัน cubic-bezier(x1, y1, x2, y2) ซึ่งคุณสามารถนำไปใช้ร่วมกับคุณสมบัติ CSS Timing Function ได้สองรูปแบบหลัก ได้แก่:
- transition-timing-function: ใช้ควบคุมความเร็วของ CSS Transitions เช่น:
.element {
transition-property: transform;
transition-duration: 0.3s;
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}
```
2. animation-timing-function: ใช้ควบคุมจังหวะการเล่นของ CSS Animations ร่วมกับ @keyframes
นอกจากนี้ คุณยังสามารถเขียนแบบย่อ (Shorthand) รวมกับคุณสมบัติหลักอย่าง transition หรือ animation ได้โดยตรง
คำถามที่พบบ่อย (FAQ)
แฮนเดิลทั้งสองและตัวเลขทั้งสี่ตัวหมายถึงอะไร? เส้นโค้งจะวิ่งจากล่างซ้าย (จุดเริ่มต้น) ไปยังบนขวา (จุดสิ้นสุด) โดยเวลาจะดำเนินจากซ้ายไปขวา และความคืบหน้าจะเคลื่อนที่ขึ้นด้านบน แฮนเดิลทั้งสองคือจุดควบคุมที่ดัดเส้นโค้ง ซึ่งแต่ละจุดจะมีค่า X และ Y รวมกันเป็น cubic-bezier(x1, y1, x2, y2) โดยค่า X จะอยู่ระหว่าง 0 ถึง 1 เสมอ ในขณะที่ค่า Y สามารถขึ้นไปเหนือขอบบนหรือลงไปใต้ขอบล่างเพื่อสร้างการเคลื่อนไหวที่เลยขอบเขต (Overshoot) หรือดึงกลับก่อนที่จะหยุดนิ่ง
จะนำค่านี้ไปใช้ใน CSS ได้อย่างไร? คัดลอกค่า cubic-bezier() แล้วนำไปวางในส่วนที่กำหนดฟังก์ชันความเร็ว (Timing function) เช่น transition-timing-function, animation-timing-function หรือแบบย่อ เช่น transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) ทั้งนี้ คีย์เวิร์ดอย่าง ease, ease-in, ease-out และ ease-in-out เป็นเพียงเส้นโค้ง cubic-bezier ที่กำหนดค่าไว้ล่วงหน้า การเลือกพรีเซ็ตเหล่านี้จะแสดงค่าที่อยู่เบื้องหลังคีย์เวิร์ดดังกล่าวให้คุณเห็น
สามารถสร้างเอฟเฟกต์เด้งหรือยืดหยุ่นได้หรือไม่? ไม่ได้ด้วยตัวมันเองเพียงอย่างเดียว cubic-bezier เดี่ยวสามารถสร้างเอฟเฟกต์ดึงกลับและเลยขอบเขตได้ (พรีเซ็ตกลุ่ม "back" จะดึงแฮนเดิลหนึ่งออกนอกกล่องเพื่อทำเช่นนั้น) แต่จะเคลื่อนที่ไปในทิศทางเดียวแล้วหยุดนิ่ง ส่วนเอฟเฟกต์เด้ง (Bounce) หรือยืดหยุ่น (Elastic) จะต้องมีการเปลี่ยนทิศทางกลับไปกลับมาหลายครั้ง ซึ่ง cubic-bezier เดี่ยวไม่สามารถอธิบายได้ เอฟเฟกต์เหล่านั้นจำเป็นต้องใช้ CSS keyframes หรือฟังก์ชัน linear() ที่มีจุดหยุดหลายจุดแทน