เครื่องมือสร้าง Cubic Bezier

การพิมพ์ cubic-bezier(x1, y1, x2, y2) เองแล้วรีโหลดหน้าเว็บเพื่อเช็คความรู้สึกเป็นวิธีปรับแต่งอนิเมชันที่ช้า เครื่องมือสร้างนี้ปิดวงจรนั้น: ลากแฮนเดิลจุดควบคุมบนเส้นโค้ง หรือพิมพ์ตัวเลขที่แน่นอนลงในช่อง x1/y1/x2/y2 เส้นโค้ง สตริง CSS ที่คัดลอกได้ และพรีวิวอนิเมชันสดจะอัปเดตทุกครั้งที่เปลี่ยน — ไม่ต้องบิลด์ ไม่ต้องรีโหลด

สองแกนทำงานต่างกันโดยเจตนา x1 และ x2 จะถูกจำกัดให้อยู่ระหว่าง 0 และ 1 เพราะนั่นคือสิ่งที่ข้อกำหนด CSS ระบุไว้สำหรับฟังก์ชัน cubic-bezier() — ค่าที่อยู่นอกช่วงนั้นใช้ไม่ได้ y1 และ y2 ไม่มีข้อจำกัดเช่นนั้น: ลากแฮนเดิลให้เลยขอบบนหรือล่างของกล่อง เส้นโค้งจะเลยเกินจุดเริ่มต้นหรือจุดสิ้นสุด ซึ่งเป็นวิธีสร้างเอฟเฟกต์สปริงและเด้งจากเส้นโค้ง easing เพียงเส้นเดียว

การเห็นตัวเลขไม่เหมือนกับการเห็นการเคลื่อนไหว พรีวิวจึงแสดงลูกบอลสองลูกที่เหมือนกันวิ่งคู่กันแบบวนซ้ำ: ลูกหนึ่งเคลื่อนที่ด้วยเส้นโค้งของคุณ อีกลูกหนึ่งเคลื่อนที่ด้วยความเร็วคงที่แบบเส้นตรง การดูพวกมันแข่งกันเป็นวิธีที่เร็วที่สุดที่จะบอกว่าเส้นโค้ง easing สร้างความรู้สึกที่คุณต้องการจริงหรือไม่ ก่อนที่มันจะไปอยู่ในสไตล์ชีต หน้า preset — ตัวเลขจริงเบื้องหลังคีย์เวิร์ด ease-in-out ของ CSS เอง, การประมาณการเลยเกินตามตรงที่บางคนเรียกว่าการเด้ง, และเส้นโค้งมาตรฐานของ Material Design ที่ Google เผยแพร่ — เป็นจุดเริ่มต้นสำเร็จรูปที่คุณลากต่อได้แทนที่จะเริ่มจากจุดควบคุมว่างเปล่า

ทุกอย่างทำงานในเบราว์เซอร์ของคุณ: ไม่มีการอัปโหลด ไม่มีบัญชี ไม่มีการส่งข้อมูลไปกลับเซิร์ฟเวอร์ และเครื่องมือนี้ยังทำงานแบบออฟไลน์ได้เมื่อโหลดหน้าเว็บแล้ว