ตัวสร้าง Cubic Bezier – สร้างเส้นโค้ง Easing CSS
ตัวสร้าง Cubic Bezier ให้คุณออกแบบเส้นโค้ง easing ของ CSS โดยลากจุดควบคุมสองจุดหรือเริ่มจากพรีเซ็ต เช่น ease, ease-in-out หรือ back กำหนดระยะเวลาเพื่อพรีวิวแอนิเมชันสด แล้วคัดลอกค่า cubic-bezier() หรือสไนป์เพ็ต CSS transition พร้อมใช้ ทำให้การปรับการเคลื่อนไหวเป็นภาพมากกว่าการแก้ค่าตัวเลขอย่างเดียว
ตัวสร้าง Cubic Bezier เป็นเอดิเตอร์ภาพสำหรับสร้างเส้นโค้ง easing ของ CSS แทนที่จะเดาเส้นโค้งจากตัวเลข คุณสามารถลากจุดควบคุมสองจุดแล้วดูว่าการเคลื่อนไหวเปลี่ยนอย่างไร เลือกพรีเซ็ตมาตรฐาน เช่น ease, ease-in-out หรือ back แล้วกำหนดระยะเวลาและดูพรีวิวแอนิเมชันสด
เส้นโค้งแสดงเป็นค่า CSS cubic-bezier() และเครื่องมือยังให้สไนป์เพ็ต transition พร้อมใช้ เริ่มจากพรีเซ็ต easing มาตรฐานหรือปรับจุดควบคุมเพื่อสร้างเส้นโค้งแบบกำหนดเอง การตั้งค่าระยะเวลาควบคุมจังหวะที่ใช้ในพรีวิว คัดลอกผลลัพธ์ที่เหมาะกับสไตล์ชีตหรือเวิร์กโฟลว์ของคุณ
ค่า cubic-bezier() อธิบายจังหวะ easing ส่วนการประกาศ CSS transition สามารถรวม easing นั้นพร้อมระยะเวลา ตัวสร้างให้ทั้งค่าเส้นโค้งและสไนป์เพ็ต transition พร้อมใช้ คุณจึงคัดลอกระดับรายละเอียด CSS ที่ต้องการได้ พรีวิวภาพทำให้เปรียบเทียบการเคลื่อนไหวได้ง่ายกว่าการแก้ค่าเส้นโค้งโดยไม่เห็นผล
ตัวสร้าง Cubic Bezier ทำงานในเบราว์เซอร์ของคุณทั้งหมด อินพุตของคุณถูกประมวลผลบนอุปกรณ์ของคุณและไม่ถูกอัปโหลด จัดเก็บ หรือส่งไปยังเซิร์ฟเวอร์ ใช้งานออฟไลน์ได้เมื่อโหลดหน้าแล้ว และเครื่องมือฟรี
เครื่องมือนี้ช่วยนักพัฒนาและวิศวกร DevOps เตรียมค่า easing สำหรับอินเทอร์เฟซ การทดสอบ ฟิกซ์เจอร์ หรือ seed data ไม่ว่าคุณกำลังเรียนรู้ว่า CSS easing ทำงานอย่างไรหรือปรับแต่งปฏิสัมพันธ์ที่มีอยู่ คุณสามารถปรับเส้นโค้ง พรีวิว แล้วคัดลอกผลลัพธ์
ขั้นตอนที่ 1: เลือกพรีเซ็ต easing มาตรฐาน เช่น ease, ease-in-out หรือ back เพื่อเริ่มสร้างเส้นโค้ง
ขั้นตอนที่ 2: ลากจุดควบคุมสองจุดเพื่อปรับเส้นโค้งแบบภาพและกำหนดการเคลื่อนไหวที่ต้องการ
ขั้นตอนที่ 3: กำหนดระยะเวลา แล้วดูพรีวิวสดว่าเส้นโค้งทำให้แอนิเมชันเป็นอย่างไร
ขั้นตอนที่ 4: คัดลอกค่า cubic-bezier() ที่สร้างขึ้นหรือสไนป์เพ็ต CSS transition พร้อมใช้
กรณีการใช้งาน: สร้างค่า cubic-bezier() สำหรับเคสทดสอบ ฟิกซ์เจอร์ หรือ seed data เมื่อโปรเจกต์ต้องการเส้นโค้ง easing ที่เป็นรูปธรรม
กรณีการใช้งาน: สร้างค่าหลายตัวพร้อมกันเมื่อต้องการเส้นโค้งหลายเส้น แทนที่จะคิดค่าทีละตัวด้วยมือ
กรณีการใช้งาน: ใช้ค่าสุ่มที่แท้จริงแทนการเดาจากคีย์บอร์ดเมื่อต้องการข้อมูลเส้นโค้งแบบสุ่ม
กรณีการใช้งาน: ปรับ CSS transition แบบภาพโดยปรับจุดควบคุมและพรีวิวความรู้สึกของการเคลื่อนไหว
กรณีการใช้งาน: เปรียบเทียบพรีเซ็ตมาตรฐาน เช่น ease หรือ ease-in-out กับเส้นโค้งที่ปรับแต่งก่อนคัดลอกลงสไตล์ชีต
กรณีการใช้งาน: กำหนดระยะเวลาและพรีวิวแอนิเมชันเพื่อตรวจจังหวะของปฏิสัมพันธ์ในอินเทอร์เฟซ