ขอแนะนำ linear()
ซึ่งเป็นฟังก์ชันการค่อยๆ เปลี่ยนใน CSS ที่จะสอดประสานเป็นเส้นตรงระหว่างจุดต่างๆ ซึ่งจะช่วยให้คุณสร้างเอฟเฟกต์การตีกลับและสปริงอีกครั้งได้
การค่อยๆ เปลี่ยนใน CSS
เมื่อทำให้องค์ประกอบเคลื่อนไหวหรือเปลี่ยนแปลงองค์ประกอบใน CSS คุณจะควบคุมอัตราการเปลี่ยนแปลงค่าด้วยฟังก์ชันการค่อยๆ เปลี่ยนโดยใช้พร็อพเพอร์ตี้ animation-timing-function
และ transition-timing-function
คีย์เวิร์ดหลายรายการที่ใช้เป็นค่าที่กำหนดล่วงหน้าใน CSS ได้ ได้แก่ linear
, ease
, ease-in
, ease-out
และ ease-in-out
หากต้องการสร้างเส้นโค้งในการกำหนดความเร็วในการค่อยๆ เปลี่ยนของคุณเอง ให้ใช้ฟังก์ชัน cubic-bezier()
หรือทำตามขั้นตอนโดยใช้ฟังก์ชันการค่อยๆ เปลี่ยนของ steps()
เมื่อใช้การค่อยๆ เปลี่ยนอย่างเหมาะสม การค่อยๆ เปลี่ยนจะทำให้องค์ประกอบที่เคลื่อนไหวมีน้ำหนักเนื่องจากดูเหมือนว่าจะรวบรวมโมเมนตัม
การสร้างเส้นโค้งที่ซับซ้อน เช่น เอฟเฟกต์การตีกลับหรือสปริงจะทำใน CSS ไม่ได้ แต่การใช้ linear()
ทำให้คุณประมาณค่าเหล่านั้นได้อย่างดีจนน่าอัศจรรย์
บทนำเกี่ยวกับ linear()
การรองรับเบราว์เซอร์
- 113
- 113
- 112
- 17.2
วิธีใหม่ในการกำหนดการค่อยๆ เปลี่ยนใน 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()
![ภาพหน้าจอของเครื่องมือสร้างการค่อยๆ เปลี่ยนแบบเชิงเส้น](https://developer.chrome.com/static/docs/css-ui/css-linear-easing-function/image/screenshot-the-linear-ea-6721398d032d1.png?authuser=5&hl=th)
เครื่องมือจะใช้ฟังก์ชันการค่อยๆ เปลี่ยนของ JavaScript หรือเส้นโค้ง SVG เป็นอินพุต และแสดงผลเส้นโค้งแบบง่ายโดยใช้ linear()
ใช้แถบเลื่อนเพื่อควบคุมจำนวนการหยุดพักและความแม่นยำของจุดแวะพัก
ที่ด้านขวาบน คุณยังสามารถเลือกค่าที่กำหนดล่วงหน้าอย่างใดอย่างหนึ่ง ซึ่งได้แก่ สปริง เด้ง ยางยืดเรียบง่าย หรือดีไซน์ Material ที่มีความเร็วในการเคลื่อนไหวที่เน้นการค่อยๆ เปลี่ยน
การสนับสนุนเครื่องมือสำหรับนักพัฒนาเว็บ
เครื่องมือสำหรับนักพัฒนาเว็บรองรับเพื่อแสดงภาพและแก้ไขผลลัพธ์ของ linear()
คลิกที่ไอคอนเพื่อแสดงเคล็ดลับเครื่องมือแบบอินเทอร์แอกทีฟที่คุณสามารถลากไปรอบๆ จุดแวะ
![ภาพหน้าจอของเครื่องมือแก้ไข "Linear()" ของ Chrome DevTools](https://developer.chrome.com/static/docs/css-ui/css-linear-easing-function/image/screenshot-chrome-devtoo-10fa39ac3b457.png?authuser=5&hl=th)
ฟีเจอร์เครื่องมือสำหรับนักพัฒนาเว็บนี้พร้อมใช้งานในการจัดส่งเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome 114
รูปภาพโดย Howie Mapson ใน Unspring