สร้างเส้นโค้งภาพเคลื่อนไหวที่ซับซ้อนใน CSS ด้วยฟังก์ชันการค่อยๆ เปลี่ยน linear()

ขอแนะนำ linear() ซึ่งเป็นฟังก์ชันการค่อยๆ เปลี่ยนใน CSS ที่แทรกเส้นตรงระหว่างจุดต่างๆ เพื่อสร้างเอฟเฟกต์การตีกลับและสปริงขึ้นใหม่

บรามุส

Twitter GitHub Mastodon หน้าแรก

การค่อยๆ เปลี่ยนใน CSS

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

มีคีย์เวิร์ดหลายรายการเป็นค่าที่กำหนดล่วงหน้าใน CSS เช่น linear, ease, ease-in, ease-out และ ease-in-out หากต้องการสร้างเส้นโค้งในการกำหนดความเร็วในการเคลื่อนไหวของคุณเอง ให้ใช้ฟังก์ชัน cubic-bezier() หรือทำตามขั้นตอนโดยใช้ฟังก์ชันการค่อยๆ เปลี่ยนแบบ steps()

หมายเหตุ: ดูข้อมูลเพิ่มเติมเกี่ยวกับฟังก์ชันการค่อยๆ เปลี่ยนคีย์เวิร์ดและฟังก์ชันเหล่านี้ได้ในดูข้อมูล CSS: ภาพเคลื่อนไหว

เมื่อใช้อย่างเหมาะสม การค่อยๆ เปลี่ยนจะช่วยให้องค์ประกอบที่เคลื่อนไหวดูมีน้ำหนักเพราะดูเหมือนว่าจะเป็นการรวบรวมโมเมนตัม

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

แนะนำ linear()

การสนับสนุนเบราว์เซอร์

• 113
• 113
• 112
• x

วิธีใหม่ในการกำหนดการค่อยๆ เปลี่ยนใน CSS คือการใช้ linear() ฟังก์ชันนี้ยอมรับจำนวนครั้งที่แวะพัก คั่นด้วยเครื่องหมายจุลภาค แต่ละจุดแวะพักเป็นตัวเลขเดี่ยวที่มีค่าตั้งแต่ 0 ถึง 1 ระหว่างแต่ละหยุด การประมาณค่าในช่วงจะกระทำแบบเชิงเส้น โดยอธิบายชื่อของฟังก์ชัน

animation-timing-function: linear(0, 0.25, 1);

โดยค่าเริ่มต้น จุดแวะพักเหล่านี้จะมีระยะห่างเท่าๆ กันโดยค่าเริ่มต้น ในข้อมูลโค้ดก่อนหน้า จะมีการใช้ค่าเอาต์พุตของ 0.25 ที่เครื่องหมาย 50%

เมื่อดูจากภาพ กราฟของ linear(0, 0.25, 1) จะมีลักษณะดังนี้

หากไม่ต้องการให้จุดแวะพักกระจายเท่าๆ กัน คุณสามารถเลือกใช้ระยะเวลาแวะพักแทน เมื่อส่งผ่านค่าหนึ่งเป็นความยาวป้าย ให้กำหนดจุดเริ่มต้นดังนี้

animation-timing-function: linear(0, 0.25 75%, 1);

ในกรณีนี้ ระบบจะไม่ใช้ค่าเอาต์พุต 0.25 ที่เครื่องหมาย 50% แต่เป็น 75%

เมื่อระบุสองค่าเป็นความยาวหยุด คุณจะต้องกำหนดทั้งจุดเริ่มต้นและจุดสิ้นสุด ดังนี้

animation-timing-function: linear(0, 0.25 25% 75%, 1);

ระบบจะใช้ค่าเอาต์พุต 0.25 จาก 25% ถึง 75% ตามเวลา

การสร้างเส้นโค้งที่ซับซ้อนด้วย linear()

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

ใช้เส้นโค้งในการกำหนดความเร็วในการเคลื่อนไหวนี้ ซึ่งเป็นการค่อยๆ เปลี่ยนประเภทหนึ่งที่ไม่สามารถแสดงได้โดยตรงใน CSS ซึ่งกำหนดโดยใช้ JavaScript ดังนี้

function easing(pos) {
  const t = 7.5625;
  const e = 2.75;
  return pos < 1 / e
    ? t * pos * pos
    : pos < 2 / e
    ? t * (pos -= 1.5 / e) * pos + 0.75
    : pos < 2.5 / e
    ? t * (pos -= 2.25 / e) * pos + 0.9375
    : t * (pos -= 2.625 / e) * pos + 0.984375;
}

แม้ว่าโค้ดอาจจะไม่ได้บอกอะไรมาก แต่การแสดงภาพอาจช่วยให้เข้าใจได้ นี่คือเอาต์พุตที่แสดงเป็นเส้นโค้งสีน้ำเงิน

คุณสามารถลดความซับซ้อนของเส้นโค้งได้โดยการเพิ่มจำนวนจุดแวะลงในเส้นโค้ง ในตัวอย่างนี้ จุดสีเขียวแต่ละจุดหมายถึงการหยุด

เมื่อส่งผ่านไปยัง linear() ผลลัพธ์จะเป็นเส้นโค้งที่ดูเหมือนเส้นโค้งเดิม แต่ที่ขอบจะหยาบกว่าเล็กน้อย

เปรียบเทียบช่องภาพเคลื่อนไหวสีเขียวกับช่องสีน้ำเงิน คุณจะเห็นได้ว่า กล้องไม่ราบรื่นเท่าที่ควร

แต่ถ้าคุณเพิ่มจุดแวะมากพอ คุณจะประมาณเส้นโค้งเดิมได้ค่อนข้างดี เวอร์ชันอัปเดตมีดังนี้

เพียงเพิ่มจำนวนครั้งที่แวะพักเป็น 2 เท่า คุณก็ได้ผลลัพธ์ที่ราบรื่นแล้ว

โค้ดที่ใช้ทำให้ภาพเคลื่อนไหวมีลักษณะดังนี้

animation-timing-function: linear(
  /* Start to 1st bounce */
  0, 0.004, 0.016, 0.035, 0.063 9.1%, 0.141, 0.25, 0.391, 0.563, 0.765, 1,
  /* 1st to 2nd bounce */
  0.891, 0.813 45.5%, 0.785, 0.766, 0.754, 0.75, 0.754, 0.766, 0.785, 0.813 63.6%, 0.891, 1 72.7%,
  /* 2nd to 3rd bounce */
  0.973, 0.953, 0.941, 0.938, 0.941, 0.953, 0.973, 1,
  /* 3rd bounce to end */
  0.988, 0.984, 0.988, 1
);

เครื่องมือที่จะช่วย

การสร้างรายการจุดแวะนี้ด้วยตนเองอาจเป็นเรื่องยุ่งยาก โชคดีที่ Jake และ Adam ได้สร้างเครื่องมือที่จะช่วยคุณแปลงเส้นโค้งในการค่อยๆ เปลี่ยนให้เป็นเส้นโค้ง linear()

ภาพหน้าจอของการใช้งาน https://linear-easing-generator.netlify.app/ ในการใช้งานจริง

เครื่องมือจะใช้ฟังก์ชันการค่อยๆ เปลี่ยนของ JavaScript หรือเส้นโค้ง SVG เป็นอินพุต และเอาต์พุตเป็นเส้นโค้งอย่างง่ายโดยใช้ linear() ใช้แถบเลื่อนเพื่อควบคุมจำนวนจุดแวะพักที่ต้องการและความแม่นยำ

ที่ด้านบนขวา คุณยังเลือกค่าที่กำหนดล่วงหน้าได้ 1 อย่าง ได้แก่ แบบสปริง การตีกลับ ความยืดหยุ่นแบบเรียบ หรือดีไซน์ Material ที่เน้นการค่อยๆ เปลี่ยน

การรองรับเครื่องมือสำหรับนักพัฒนาเว็บ

เครื่องมือสำหรับนักพัฒนาเว็บมีให้ใช้งานในการแสดงภาพและแก้ไขผลลัพธ์ของ linear() คลิกที่ไอคอนเพื่อแสดงเคล็ดลับเครื่องมือแบบอินเทอร์แอกทีฟที่คุณสามารถลากไปรอบๆ จุดแวะ

ภาพหน้าจอของเครื่องมือแก้ไข "linear()" ของ Chrome DevTools

ฟีเจอร์เครื่องมือสำหรับนักพัฒนาเว็บนี้พร้อมใช้งานในการจัดส่งเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome 114

รูปภาพโดย Howie Mapson ใน Unsplash