ประเด็นสำคัญ
- 01ลากจุดควบคุมสองจุด handle เพื่อสลักเส้นโค้ง easing ด้วยภาพแทนการเดาค่าตัวเลข
- 02แอนิเมชันลูกบอลสดใจเล่นกลับเวลาเพื่อให้คุณรู้สึกถึงการเคลื่อนไหวก่อนเลือก
- 03Presets CSS built-in ทั้งห้า (ease linear ease-in ease-out ease-in-out) พร้อมใช้งานเป็นจุดเริ่มต้น
- 04cubic-bezier() ค่าอัปเดตสดใจด้วยความแม่นยำทศนิยม 2 ตำแหน่ง พร้อมสำหรับวางลงใน CSS property ใด ๆ
เหตุใดเส้นโค้ง Easing ที่กำหนดเองจึงสำคัญต่อการเคลื่อนไหว UI
ฟังก์ชัน timing CSS built-in — ease ease-in-out linear — ครอบคลุมพื้นดิน แต่ทุก UI มีช่วงเวลาที่ค่าเริ่มต้นรู้สึกปิด สถานที่ที่ปรากฏเร็วเกินไป modal ที่เกิน overshoot บน open progress bar ที่รู้สึกเหมือนจักษะ เส้นโค้ง Cubic-bezier ให้คุณ tune motion เพื่อให้รู้สึกธรรมชาติแทนเหมือนจักษะ แต่ตัวเลขสี่ตัวใน cubic-bezier(0.4, 0, 0.2, 1) เกือบไม่มีวิธีที่จะหารือเกี่ยวกับโดยตรง
ตัวแก้ไข cubic-bezier ของ Handytool เปลี่ยนตัวเลขเหล่านี้เป็นเส้นโค้งด้วยภาพพร้อมสองจุด handle ที่ลากได้ ย้ายจุด handle และแอนิเมชันลูกบอลจะเล่นกลับทันที เพื่อให้คุณสามารถวนซ้ำด้วยความรู้สึกจนกว่าการเคลื่อนไหวจะตรงกับความตั้งใจของคุณ จากนั้นคัดลอกค่าและยิมลงใน CSS — เสร็จสิ้น
วิธีการออกแบบเส้นโค้ง CSS Easing
- 01
เริ่มต้นจาก preset
เลือก ease linear ease-in ease-out หรือ ease-in-out เป็นพื้น Handles ตัดลง ตำแหน่งที่ถูกต้องสำหรับแต่ละ preset
- 02
ลากจุด handle ควบคุม
ด้านข้าง handle แต่ละด้านควบคุมปลายเส้นโค้งหนึ่ง — จุด handle เริ่มต้นรูปร่าง acceleration เริ่มต้น จุด handle สิ้นสุด รูปร่าง deceleration สุดท้าย การย้ายจุด handle สลับ preset เป็น 'custom' โดยอัตโนมัติ
- 03
ดูแอนิเมชันลูกบอล
ลูกบอลแอนิเมช จากซ้ายไปขวา โดยใช้เส้นโค้งของคุณ ปรับ slider ระยะเวลาเพื่อแสดงตัวอย่าง slow เทียบกับ fast transitions
- 04
ทดลอง overshoot
ลากจุด handle Y-axis เหนือ 1 หรือด้านล่าง 0 เพื่อสร้าง overshoot และ undershoot — เอฟเฟกต์ 'bouncy' ที่ทำให้เมนูตัดเปิดกระตุกพลัง
- 05
คัดลอกค่า CSS
คลิก Copy เพื่อดึง cubic-bezier() สตริง และวางลงใน transition-timing-function หรือ animation-timing-function ในไฟล์ style ของคุณ
ทำงานทั้งหมดในเบราว์เซอร์ของคุณ
ตัวแก้ไข เป็นเครื่องมือเบราว์เซอร์ self-contained — ไม่มี fonts ไม่มี scripts และไม่มีข้อมูลโหลดหลังจากหน้าเปิด ลากด้านข้างและแสดงตัวอย่างแอนิเมชันทำงานออฟไลน์ สูตร cubic-bezier ที่ใช้สำหรับลูกบอลแสดงตัวอย่าง คือสิ่งที่เบราว์เซอร์ใช้สำหรับ CSS transitions ดังนั้นสิ่งที่คุณเห็นในตัวแก้ไขนั้นเป็นสิ่งที่ไฟล์ style จะสร้าง
ไม่มีสิ่งใดที่ต้องติดตั้งและไม่มีสิ่งใดที่จะลงทะเบียน เอาท์พุต เป็นค่า CSS เดี่ยว — วางและคุณจะสำเร็จ
Cubic-Bezier Editor คำถามที่พบบ่อย
cubic-bezier easing curve คืออะไร
มันเป็นเส้นโค้งทางคณิตศาสตร์ที่กำหนดโดยจุด control สองจุดที่กำหนด วิธี CSS transition หรือแอนิเมชัน accelerates เมื่อเวลาผ่านไป ตัวเลขสี่ตัวใน cubic-bezier(x1, y1, x2, y2) ตั้งตำแหน่ง those control points
เหตุใดค่า Y สามารถไปเหนือ 1 หรือด้านล่าง 0
ค่า Y นอก 0–1 สร้าง overshoot และ undershoot — เส้นโค้งจะไปเกิน endpoint ของมันก่อนการตั้งค่า สิ่งนี้สร้าง easing curves 'bouncy' ค่า X ต้องยังคงอยู่ใน 0–1
ฉันใช้เอาท์พุตอย่างไร
คัดลอก cubic-bezier(...) สตริง และวางลงใน CSS transition-timing-function หรือ animation-timing-function ค่า ทำงานใน modern browser ใด ๆ
ease-in-out ที่กำลังหมายถึง
ease-in-out เริ่มช้า accelerates ตรงกลาง และช้าลง ตอนจบ — cubic-bezier(0.42, 0, 0.58, 1) สะท้อนวิธี real objects accelerate และ decelerate และเป็น default choice สำหรับ UI motion ที่ polished ส่วนใหญ่
แสดงตัวอย่างแอนิเมชันลูกบอล แม่นยำสำหรับ CSS
ใช่ — แสดงตัวอย่าง ใช้ สูตร cubic bezier เดียวกัน เบราว์เซอร์ใช้ CSS transitions slider ระยะเวลา ให้คุณความรู้สึก slow เทียบกับ fast curves ก่อนเลือก