ฟังก์ชันผ่อนความเร็ว: ease linear cubic-bezier
ควบคุมเส้นโค้งความเร็วของการเปลี่ยนผ่านโดยใช้คีย์เวิร์ดในตัวและฟังก์ชัน cubic-bezier()
ฟังก์ชันผ่อนความเร็ว: ease linear cubic-bezier เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
ฟังก์ชันการผ่อนจังหวะคืออะไร
ฟังก์ชันการผ่อนจังหวะควบคุมเส้นโค้งความเร็วของทรานซิชันหรือแอนิเมชัน ว่าจะเร่งหรือชะลอเร็วเพียงใดตลอดระยะเวลาการทำงาน
linear
linearรักษาความเร็วคงที่ตลอดทรานซิชัน เหมาะสำหรับแถบโหลดและตัวบ่งชี้ความคืบหน้าที่ต้องการการเคลื่อนที่อย่างสม่ำเสมอ
<div class="progress-track"><div class="progress"></div></div>ease (ค่าเริ่มต้น)
easeเริ่มต้นอย่างรวดเร็ว แล้วชะลอลงเมื่อใกล้สิ้นสุด นี่คือค่าเริ่มต้นและให้ความรู้สึกเป็นธรรมชาติสำหรับทรานซิชันในส่วนติดต่อผู้ใช้ส่วนใหญ่
ease-in
ease-inเริ่มต้นอย่างช้า ๆ แล้วเร่งความเร็ว เหมาะสำหรับองค์ประกอบที่กำลังออกจากหน้าจอ หรือแอนิเมชันตอนออก
<div class="modal">Open</div>
<div class="modal closing">Closing (faded to invisible)</div>ease-out
ease-outเริ่มต้นอย่างรวดเร็วแล้วชะลอความเร็ว เหมาะอย่างยิ่งสำหรับองค์ประกอบที่กำลังเข้าสู่หน้าจอ เพราะจะเข้ามาอย่างมีพลังและหยุดลงอย่างนุ่มนวล
<div class="modal opening">Modal content</div>ease-in-out
ease-in-outเริ่มต้นและสิ้นสุดอย่างช้า ๆ โดยเคลื่อนที่เร็วขึ้นในช่วงกลาง เหมาะที่สุดสำหรับแอนิเมชันแบบวนซ้ำหรือเคลื่อนไปกลับ
cubic-bezier()
กำหนดเส้นโค้ง Bézier ลูกบาศก์แบบกำหนดเองด้วยจุดควบคุมสี่จุด ทำให้สร้างเส้นโค้งการผ่อนจังหวะแบบสปริงและแบบกำหนดเองได้
<div class="card">Card</div>การอ่านค่า cubic-bezier
ค่าทั้งสี่กำหนดจุดควบคุมสองจุด ได้แก่ cubic-bezier(x1, y1, x2, y2) ค่าบนแกน y ที่มากกว่า 1 จะสร้างเอฟเฟกต์การเลยจุดเป้าหมายหรือเอฟเฟกต์สปริง ใช้เครื่องมืออย่าง easings.net เพื่อดูภาพเส้นโค้ง
ฟังก์ชัน steps()
steps(n, direction) แบ่งแอนิเมชันออกเป็นขั้นแบบไม่ต่อเนื่องจำนวน n ขั้นที่มีขนาดเท่ากัน เหมาะอย่างยิ่งสำหรับแอนิเมชันสไปรต์และเอฟเฟกต์เครื่องพิมพ์ดีด
<div class="sprite"></div>คีย์เวิร์ดทิศทางของ steps()
อาร์กิวเมนต์ที่สองจะควบคุมว่าขั้นจะเกิดขึ้นที่ใด:
jump-start: ขั้นแรกเกิดขึ้นที่เวลา 0jump-end: ขั้นสุดท้ายเกิดขึ้นเมื่อสิ้นสุดเวลา (ค่าเริ่มต้น)jump-both: มีขั้นเกิดขึ้นทั้งตอนเริ่มต้นและสิ้นสุดjump-none: ไม่มีขั้นเกิดขึ้นที่ปลายทั้งสองด้าน
รูปแบบใหม่: linear() สำหรับเส้นโค้งซับซ้อน
ฟังก์ชัน linear() แบบใหม่ช่วยให้กำหนดเส้นโค้งการผ่อนจังหวะโดยพลการผ่านจุดหลายจุด ทำให้สร้างเอฟเฟกต์สปริงและการเด้งด้วย CSS ล้วน ๆ ได้โดยไม่มีข้อจำกัดของ cubic-bezier
<div class="spring">Spring easing</div>ตรวจสอบความเข้าใจอย่างรวดเร็ว
ฟังก์ชันการผ่อนจังหวะใดรักษาความเร็วคงที่ตลอดทรานซิชันทั้งหมด
สรุปทบทวน
ฟังก์ชันการผ่อนจังหวะควบคุมเส้นโค้งความเร็วของแอนิเมชัน ตัวเลือกในตัวได้แก่ linear ease ease-in ease-out และ ease-in-out เส้นโค้งแบบกำหนดเองใช้ cubic-bezier() ขั้นแบบไม่ต่อเนื่องใช้ steps() ส่วนฟังก์ชัน linear() แบบใหม่รองรับเส้นโค้งซับซ้อนคล้ายสปริง
คำถามที่พบบ่อย
บทเรียน “ฟังก์ชันผ่อนความเร็ว: ease linear cubic-bezier” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ฟังก์ชันผ่อนความเร็ว: ease linear cubic-bezier” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “ฟังก์ชันผ่อนความเร็ว: ease linear cubic-bezier”
ควบคุมเส้นโค้งความเร็วของการเปลี่ยนผ่านโดยใช้คีย์เวิร์ดในตัวและฟังก์ชัน cubic-bezier() คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “ฟังก์ชันผ่อนความเร็ว: ease linear cubic-bezier” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม
ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- ระยะเวลาและจังหวะของคุณสมบัติการเปลี่ยนผ่าน
- ฟังก์ชันผ่อนความเร็ว: ease linear cubic-bezier
- การเปลี่ยนผ่านคุณสมบัติหลายรายการ
- ประสิทธิภาพ: คุณสมบัติที่แปลงได้เทียบกับคุณสมบัติที่ต้องวาดใหม่