ขอแนะนำ 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
- 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()
เครื่องมือจะใช้ฟังก์ชันการค่อยๆ เปลี่ยนของ JavaScript หรือเส้นโค้ง SVG เป็นอินพุต และเอาต์พุตเป็นเส้นโค้งอย่างง่ายโดยใช้ linear()
ใช้แถบเลื่อนเพื่อควบคุมจำนวนจุดแวะพักที่ต้องการและความแม่นยำ
ที่ด้านบนขวา คุณยังเลือกค่าที่กำหนดล่วงหน้าได้ 1 อย่าง ได้แก่ แบบสปริง การตีกลับ ความยืดหยุ่นแบบเรียบ หรือดีไซน์ Material ที่เน้นการค่อยๆ เปลี่ยน
การรองรับเครื่องมือสำหรับนักพัฒนาเว็บ
เครื่องมือสำหรับนักพัฒนาเว็บมีให้ใช้งานในการแสดงภาพและแก้ไขผลลัพธ์ของ linear()
คลิกที่ไอคอนเพื่อแสดงเคล็ดลับเครื่องมือแบบอินเทอร์แอกทีฟที่คุณสามารถลากไปรอบๆ จุดแวะ
ฟีเจอร์เครื่องมือสำหรับนักพัฒนาเว็บนี้พร้อมใช้งานในการจัดส่งเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome 114
รูปภาพโดย Howie Mapson ใน Unsplash