Question 1

ฟังก์ชัน easing ใน CSS คืออะไร?

Accepted Answer

ฟังก์ชัน easing ควบคุมจังหวะความคืบหน้าของแอนิเมชันหรือทรานซิชันตามเวลา องค์ประกอบไม่จำเป็นต้องเคลื่อนที่ด้วยความเร็วคงที่: เริ่มช้าแล้วเร่ง เลยเป้าเล็กน้อยแล้วนิ่งลงก็ได้ ใน CSS กำหนดผ่านพร็อพเพอร์ตี้ transition-timing-function หรือ animation-timing-function

Question 2

ตัวเลขสี่ตัวใน cubic-bezier() หมายถึงอะไร?

Accepted Answer

cubic-bezier(x1, y1, x2, y2) นิยามเส้นโค้งด้วยจุดควบคุมสองจุด จุดแรกแต่งรูปการเริ่มการเคลื่อนไหว จุดที่สองแต่งรูปการจบ X คือเวลาบนสเกล 0 ถึง 1 ส่วน Y คือความคืบหน้า โดย 0 คือค่าเริ่มต้นและ 1 คือค่าสุดท้าย

Question 3

ทำไม Y ออกนอก 0 ถึง 1 ได้แต่ X ไม่ได้?

Accepted Answer

X ถูกแมปกับเวลาจริง ค่าต่ำกว่า 0 หรือสูงกว่า 1 จะทลายเหตุผลเชิงเวลาและสเปกห้ามไว้ Y อิสระ: เกิน 1 คือเลยเป้า และต่ำกว่า 0 คือถอยก่อนแล้วค่อยไป — พรีเซ็ตตระกูล Back สร้างความรู้สึกเด้งด้วยหลักนี้

Question 4

ease, ease-in, ease-out ต่างกันอย่างไร?

Accepted Answer

ease เป็นค่าเริ่มต้นของเบราว์เซอร์ เริ่มและจบอย่างนุ่มนวล ease-in เริ่มช้าจบเร็ว ease-out เริ่มเร็วแล้วช้าลง ส่วน ease-in-out รวมทั้งสอง ตัวสร้างยังมีพรีเซ็ต sine, quad, cubic, quart, expo, back และ material รวมทั้งหมด 18 แบบ

Question 5

ตัวอย่างลูกบอลทำงานอย่างไร?

Accepted Answer

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

Question 6

ค่าที่สร้างได้ควรวางไว้ที่ไหน?

Accepted Answer

ใช้เป็นค่าของ transition-timing-function หรือ animation-timing-function เช่น transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); เครื่องมือออกมาเป็นฟังก์ชัน cubic-bezier(...) เปล่า ๆ พร้อมวางลงกฎใดก็ได้ทันที

Question 7

ฟังก์ชัน easing กระทบประสิทธิภาพแอนิเมชันหรือไม่?

Accepted Answer

ฟังก์ชันจังหวะเวลาเองไม่มีต้นทุน: มันแค่จับคู่ความคืบหน้ากับเวลาใหม่ ประสิทธิภาพขึ้นกับพร็อพเพอร์ตี้ที่คุณทำแอนิเมชัน transform และ opacity เป็นมิตรกับ GPU ส่วนการขยับพร็อพเพอร์ตี้เลย์เอาต์อย่าง width หรือ top ก่อ reflow ราคาแพงไม่ว่า easing จะเป็นอะไร

Question 8

ทำเอฟเฟกต์เด้งหรือยืดหยุ่นแบบจริงได้ไหม?

Accepted Answer

cubic-bezier เดียวเลยเป้าได้ครั้งเดียวแต่ทำการเด้งหลายจังหวะแบบ bounce หรือ elastic แท้ไม่ได้ ต้องเรียงหลายคีย์เฟรมใน @keyframes หรือใช้ Web Animations API ส่วนการเลยเป้านุ่มนวลเพียงครั้งเดียวคือจุดแข็งของ cubic-bezier และเป็นโฟกัสของเครื่องมือนี้

Question 9

สิ่งที่ฉันทำที่นี่ถูกอัปโหลดหรือไม่?

Accepted Answer

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

ตัวสร้าง CSS Easing

วิธีใช้ ตัวสร้าง CSS Easing