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

บทนำเกี่ยวกับ linear()

วิธีใหม่ในการกำหนดการค่อยๆ เปลี่ยนใน 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%

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

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()

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

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

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

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

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

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