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

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

Bramus

การค่อยๆ เปลี่ยนใน 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
• 17.2

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

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

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

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

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

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

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

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

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

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

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

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

มาดูเส้นโค้งการโจมตีแบบนุ่มนวลนี้ ซึ่งเป็นการโจมตีแบบนุ่มนวลประเภทที่ไม่สามารถแสดงใน 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() ใช้แถบเลื่อนเพื่อควบคุมจำนวนป้ายจอดรถที่ต้องการและความแม่นยำของป้าย

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

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

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

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

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

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