เครื่องกําเนิด CSS Cubic Bezier

เอกสาร Cubic Bezier

เส้นโค้งลูกบาศก์เบเซียร์คืออะไร?

A cubic Bezier curve is defined by four points: P0, P1, P2, and P3. In CSS transitions, P0 and P3 are fixed at (0, 0) and (1, 1) respectively, representing the start and end of the transition. The curve is determined by the coordinates of the two control points, P1 and P2.

ไวยากรณ์ CSS

transition-timing-function: cubic-bezier(x1, y1, x2, y2);

กรณีการใช้งานทั่วไป

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

ฟังก์ชั่นการผ่อนคลายยอดนิยม

Ease (default)

เริ่มช้า เร่งความเร็วอย่างรวดเร็ว แล้วช้าลงอีกครั้ง

cubic-bezier(0.25, 0.1, 0.25, 1)

Linear

ความเร็วคงที่ตั้งแต่ต้นจนจบ

cubic-bezier(0, 0, 1, 1)

Ease-in

เริ่มช้าแล้วเร่งความเร็ว

cubic-bezier(0.42, 0, 1, 1)

Ease-out

เริ่มเร็วแล้วชะลอตัว

cubic-bezier(0, 0, 0.58, 1)

เคล็ดลับในการสร้างเส้นโค้งแบบกําหนดเอง

เก็บค่า x ไว้ระหว่าง 0 ถึง 1:ค่าที่อยู่นอกช่วงนี้อาจทําให้เกิดลักษณะการทํางานที่ไม่คาดคิด
เห็นภาพเส้นโค้ง:ใช้กราฟแบบโต้ตอบเพื่อทําความเข้าใจว่าการเปลี่ยนแปลงส่งผลต่อภาพเคลื่อนไหวอย่างไร
ทดสอบกับองค์ประกอบจริง:ดูตัวอย่างเส้นโค้งของคุณด้วยส่วนประกอบ UI จริงเสมอเพื่อให้แน่ใจว่ารู้สึกถูกต้อง
บันทึกค่าที่ตั้งไว้ล่วงหน้า:บุ๊กมาร์กเส้นโค้งที่มีประโยชน์สําหรับโครงการในอนาคต