สร้างเส้นโค้งภาพเคลื่อนไหวที่ซับซ้อนใน 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()`

Browser Support

Source

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

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

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

เมื่อแสดงเป็นภาพ กราฟสำหรับ linear(0, 0.25, 1) จะมีลักษณะดังนี้

การแสดงภาพแผนภูมิของเชิงเส้น(0, 0.25, 1)

หากไม่ต้องการให้ป้ายรถเมล์กระจายอย่างเท่าเทียมกัน คุณจะส่งความยาวของป้ายรถเมล์ก็ได้ เมื่อส่งค่าหนึ่งค่าเป็นความยาวหยุด คุณจะกําหนดจุดเริ่มต้นของค่าดังกล่าวได้ดังนี้

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

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

การแสดงภาพแผนภูมิของเชิงเส้น(0, 0.25 75%, 1)

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

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

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

การแสดงภาพแผนภูมิของเชิงเส้น(0, 0.25 25% 75%, 1)

สร้างเส้นโค้งที่ซับซ้อน

แม้ว่าตัวอย่างก่อนหน้าจะเป็นการค่อยๆ เปลี่ยนที่ง่ายกว่า แต่คุณก็ใช้ 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 เท่า

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

เอดิเตอร์เชิงเส้นของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome — ภาพหน้าจอของเครื่องมือแก้ไข `linear()` ใน Chrome DevTools

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