ภาพเคลื่อนไหว

ภาพเคลื่อนไหวเป็นวิธีอันยอดเยี่ยมในการไฮไลต์องค์ประกอบแบบอินเทอร์แอกทีฟ รวมถึงเพิ่มความสนใจและความสนุกสนานให้กับงานออกแบบของคุณ ในโมดูลนี้ โปรดดูวิธีการเพิ่มและควบคุมเอฟเฟกต์ภาพเคลื่อนไหวด้วย CSS

บางครั้งคุณจะเห็นผู้ช่วยเล็กๆ น้อยๆ ในอินเทอร์เฟซที่เมื่อคลิก ก็จะให้ข้อมูลที่เป็นประโยชน์เกี่ยวกับส่วนนั้นๆ โฆษณาเหล่านี้มักจะมีภาพเคลื่อนไหวที่กะพริบอยู่เพื่อบอกให้รู้ว่ามีข้อมูลอยู่และควรโต้ตอบด้วย แล้วคุณจะนำ CSS ไปใช้ได้อย่างไร

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

คีย์เฟรมคืออะไร

ในซอฟต์แวร์ภาพเคลื่อนไหว, CSS และเครื่องมืออื่นๆ ส่วนใหญ่ที่ทำให้คุณสามารถทำให้บางสิ่งเคลื่อนไหวได้ คีย์เฟรมเป็นกลไกที่คุณใช้กำหนดสถานะของภาพเคลื่อนไหวให้กับการประทับเวลา พร้อมกับไทม์ไลน์

ลองมาดูบริบทของเรื่องนี้กัน ภาพเคลื่อนไหวทั้งหมดจะแสดงเป็นเวลา 1 วินาทีและแสดงมากกว่า 2 สถานะ

มีจุดเฉพาะเจาะจงที่สถานะภาพเคลื่อนไหวเหล่านี้แต่ละสถานะเริ่มต้นและสิ้นสุด จับคู่สิ่งเหล่านี้ในไทม์ไลน์ด้วยคีย์เฟรม

@keyframes

ตอนนี้คุณทราบความหมายของคีย์เฟรมแล้ว ความรู้ดังกล่าวน่าจะช่วยให้คุณเข้าใจวิธีการทำงานของกฎ CSS @keyframes นี่คือกฎพื้นฐานที่มี 2 รัฐ

@keyframes my-animation {
    from {
        transform: translateY(20px);
    }
    to {
        transform: translateY(0px);
    }
}

ส่วนแรกที่ควรทราบคือรหัสที่กำหนดเอง (ตัวระบุที่กำหนดเอง) หรือเป็นชื่อกฎคีย์เฟรมซึ่งเป็นคำที่ใช้เรียกบุคคลจริงๆ มากขึ้น ตัวระบุของกฎนี้คือ my-animation ตัวระบุที่กำหนดเองจะทำงานเหมือนกับชื่อฟังก์ชัน ซึ่งตามที่คุณได้เรียนรู้ในโมดูลฟังก์ชัน ช่วยให้คุณอ้างอิงกฎคีย์เฟรมในตำแหน่งอื่นๆ ในโค้ด CSS ได้

ภายในกฎคีย์เฟรม from และ to คือคีย์เวิร์ดที่แสดงถึง 0% และ 100% ซึ่งเป็นจุดเริ่มต้นของภาพเคลื่อนไหวและจุดสิ้นสุด คุณสามารถสร้างกฎเดิมอีกครั้งได้ดังนี้

@keyframes my-animation {
    0% {
        transform: translateY(20px);
    }
    100% {
        transform: translateY(0px);
    }
}

คุณสามารถเพิ่มตำแหน่งในกรอบเวลาได้มากเท่าที่ต้องการ บริบทจากตัวอย่าง "Pulser" มี 2 สถานะ ซึ่งแปลเป็น 2 คีย์เฟรม ซึ่งหมายความว่าคุณมี 2 ตำแหน่งในกฎคีย์เฟรมเพื่อแสดงการเปลี่ยนแปลงของแต่ละคีย์เฟรมเหล่านี้

@keyframes pulse {
  0% {
    opacity: 0;
  }
  50% {
    transform: scale(1.4);
    opacity: 0.4;
  }
}

พร็อพเพอร์ตี้ animation

หากต้องการใช้ @keyframes ในกฎ CSS ให้กำหนดพร็อพเพอร์ตี้ของภาพเคลื่อนไหวต่างๆ หรือ ให้ใช้พร็อพเพอร์ตี้ชวเลข animation

animation-duration

.my-element {
    animation-duration: 10s;
}

พร็อพเพอร์ตี้ animation-duration กำหนดระยะเวลาของไทม์ไลน์ของ @keyframes ซึ่งควรเป็นค่าเวลา โดยเริ่มต้นที่ 0 วินาที ซึ่งหมายความว่าภาพเคลื่อนไหวจะยังทำงานอยู่ แต่คุณจะเห็นเร็วเกินไป คุณเพิ่มค่าเวลาเชิงลบไม่ได้

animation-timing-function

ในการสร้างการเคลื่อนไหวที่เป็นธรรมชาติอีกครั้งในภาพเคลื่อนไหว คุณสามารถใช้ฟังก์ชันการจับเวลาซึ่งคำนวณความเร็วของภาพเคลื่อนไหวในแต่ละจุด ค่าที่คำนวณได้มักจะโค้ง ซึ่งทำให้ภาพเคลื่อนไหวทำงานด้วยความเร็วแปรผันในช่วง animation-duration และหากคำนวณค่านอกเหนือจากค่าที่กำหนดไว้ใน @keyframes ให้ทำให้องค์ประกอบดูเหมือนเด้ง

มีคีย์เวิร์ดหลายรายการเป็นค่าที่กำหนดล่วงหน้าใน CSS ซึ่งใช้เป็นค่าสำหรับ animation-timing-function: linear, ease, ease-in, ease-out, ease-in-out

.my-element {
    animation-timing-function: ease-in-out;
}

ค่ามีลักษณะเป็นเส้นโค้งพร้อมกับฟังก์ชันการค่อยๆ เปลี่ยน เนื่องจากการค่อยๆ เปลี่ยนจะคำนวณโดยใช้เส้นโค้งเบซิเยร์ ซึ่งใช้ในการจำลองอัตราความเร็ว แต่ละคีย์เวิร์ดของฟังก์ชันการจับเวลา เช่น ease จะอ้างอิงเส้นโค้งเบซิเยร์ที่กำหนดไว้ล่วงหน้า ใน CSS คุณจะกำหนดเส้นโค้งเบซิเยร์ได้โดยตรงโดยใช้ฟังก์ชัน cubic-bezier() ซึ่งยอมรับค่าตัวเลข 4 ค่า ได้แก่ x1, y1, x2, y2

.my-element {
    animation-timing-function: cubic-bezier(.42, 0, .58, 1);
}

ค่าเหล่านี้แสดงแต่ละส่วนของเส้นโค้งตามแกน X และ Y

การทำความเข้าใจเส้นโค้งเบซิเยร์เป็นเรื่องที่ซับซ้อนและเครื่องมือแบบภาพ เช่น โปรแกรมสร้างโดย Lea Verou นี้ มีประโยชน์มาก

ฟังก์ชันการค่อยๆ เปลี่ยน steps

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

.my-element {
    animation-timing-function: steps(10, end);
}

อาร์กิวเมนต์แรกคือจํานวนขั้นตอน หากกำหนดขั้นตอนเป็น 10 และมี 10 คีย์เฟรม แต่ละคีย์เฟรมจะเล่นตามลำดับเวลาที่แน่นอน โดยไม่มีการเปลี่ยนระหว่างสถานะ หากมีคีย์เฟรมไม่เพียงพอสำหรับขั้นตอนต่างๆ ระบบจะเพิ่มขั้นตอนระหว่างคีย์เฟรมตามอาร์กิวเมนต์ที่สอง

อาร์กิวเมนต์ที่ 2 คือทิศทาง หากตั้งค่าเป็น end ซึ่งเป็นค่าเริ่มต้น ขั้นตอนจะเสร็จสิ้นที่ส่วนท้ายของไทม์ไลน์ หากตั้งค่าเป็น start ขั้นตอนแรกของภาพเคลื่อนไหวจะเสร็จสมบูรณ์ทันทีที่เริ่มต้น ซึ่งหมายความว่าสิ้นสุด 1 ขั้นตอนก่อนวันที่ end

animation-iteration-count

.my-element {
    animation-iteration-count: 10;
}

พร็อพเพอร์ตี้ animation-iteration-count กำหนดจำนวนครั้งที่ควรเรียกใช้ไทม์ไลน์ @keyframes โดยค่าเริ่มต้น ค่านี้จะเป็น 1 ซึ่งหมายความว่าเมื่อภาพเคลื่อนไหวเล่นมาถึงจุดสิ้นสุดของไทม์ไลน์ ภาพเคลื่อนไหวจะหยุดลงที่ท้ายสุด จำนวนต้องไม่เป็นจำนวนลบ

คุณสามารถใช้คีย์เวิร์ด infinite ซึ่งจะเล่นภาพเคลื่อนไหวแบบวนซ้ำ ซึ่งเป็นวิธีการทำงานของการสาธิต "จังหวะกะพริบ" ตั้งแต่เริ่มต้นบทเรียนนี้

animation-direction

.my-element {
    animation-direction: reverse;
}

คุณกำหนดทิศทางที่ไทม์ไลน์จะวิ่งบนคีย์เฟรมได้ด้วย animation-direction ดังนี้

• normal: ค่าเริ่มต้น ซึ่งอยู่ถัดไป
• reverse: วิ่งย้อนบนไทม์ไลน์
• alternate: สำหรับการแสดงภาพเคลื่อนไหวซ้ำแต่ละครั้ง ไทม์ไลน์จะวิ่งไปข้างหน้าหรือถอยหลังตามลำดับ
• alternate-reverse: ย้อนกลับของ alternate

animation-delay

.my-element {
    animation-delay: 5s;
}

พร็อพเพอร์ตี้ animation-delay กำหนดระยะเวลาที่ต้องรอก่อนที่จะเริ่มภาพเคลื่อนไหว การตั้งค่านี้ยอมรับค่าเวลาเช่นเดียวกับพร็อพเพอร์ตี้ animation-duration

ซึ่งต่างจากพร็อพเพอร์ตี้ animation-duration ตรงที่สามารถกำหนดให้เป็นค่าลบได้ หากกำหนดค่าลบไว้ ไทม์ไลน์ใน @keyframes จะเริ่มต้น ณ เวลานั้น ตัวอย่างเช่น หากภาพเคลื่อนไหวยาว 10 วินาทีและตั้งค่า animation-delay เป็น -5s ภาพเคลื่อนไหวจะเริ่มต้นจากครึ่งทางในไทม์ไลน์

animation-play-state

.my-element:hover {
    animation-play-state: paused;
}

พร็อพเพอร์ตี้ animation-play-state ช่วยให้คุณเล่นและหยุดภาพเคลื่อนไหวชั่วคราวได้ ค่าเริ่มต้นคือ running และหากคุณตั้งค่าเป็น paused ภาพเคลื่อนไหวจะหยุดลงชั่วคราว

animation-fill-mode

พร็อพเพอร์ตี้ animation-fill-mode จะกำหนดค่าในไทม์ไลน์ของ @keyframes ที่จะยังคงอยู่ก่อนที่ภาพเคลื่อนไหวจะเริ่มต้นหรือหลังจากสิ้นสุด ค่าเริ่มต้นคือ none ซึ่งหมายความว่าเมื่อภาพเคลื่อนไหวเสร็จสมบูรณ์ ระบบจะไม่เก็บค่าในไทม์ไลน์ โดยมีตัวเลือกอื่นๆ ได้แก่

• forwards: คีย์เฟรมสุดท้ายจะยังคงอยู่ ขึ้นอยู่กับทิศทางของภาพเคลื่อนไหว
• backwards: คีย์เฟรมแรกจะยังคงอยู่ โดยอิงตามทิศทางของภาพเคลื่อนไหว
• both: เป็นไปตามกฎสำหรับทั้ง forwards และ backwards

ชวเลข animation

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

1. animation-name
2. animation-duration
3. animation-timing-function
4. animation-delay
5. animation-iteration-count
6. animation-direction
7. animation-fill-mode
8. animation-play-state

.my-element {
    animation: my-animation 10s ease-in-out 1s infinite forwards forwards running;
}

ข้อควรพิจารณาเมื่อทำงานกับภาพเคลื่อนไหว

ผู้ใช้สามารถกำหนดในระบบปฏิบัติการว่าต้องการลดการเคลื่อนไหวเมื่อโต้ตอบกับแอปพลิเคชันและเว็บไซต์ ระบบตรวจพบค่ากำหนดนี้ได้โดยใช้คำค้นหาสื่อ prefers-reduced-motion

@media (prefers-reduced-motion) {
  .my-autoplaying-animation {
    animation-play-state: paused;
  }
}

ซึ่งไม่จำเป็นต้องเป็นภาพเคลื่อนไหวเลย แต่เป็นค่ากำหนดที่จะลดภาพเคลื่อนไหว โดยเฉพาะสิ่งที่ไม่ได้คาดคิด ดูข้อมูลเพิ่มเติมเกี่ยวกับค่ากำหนดนี้และประสิทธิภาพโดยรวมได้จากคำแนะนำเกี่ยวกับภาพเคลื่อนไหวนี้

ตรวจสอบความเข้าใจของคุณ

ทดสอบความรู้เกี่ยวกับภาพเคลื่อนไหว