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

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

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

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

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

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

ตัวอย่างเช่น ต่อไปนี้เป็นไทม์ไลน์สำหรับจุด "helper" ที่กะพริบ ภาพเคลื่อนไหวนี้ทำงาน เป็นเวลา 1 วินาทีและมี 2 สถานะ

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

@keyframes

CSS @keyframes อิงตามแนวคิดเดียวกันกับคีย์เฟรมภาพเคลื่อนไหว

ต่อไปนี้เป็นตัวอย่างที่มี 2 สถานะ

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

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

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

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

คุณสามารถเพิ่มตำแหน่งได้มากเท่าที่ต้องการในระหว่างกรอบเวลา ในตัวอย่างตัวช่วยที่กะพริบ มี 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);
}

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

อาร์กิวเมนต์ที่ 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;
}

คุณกำหนดทิศทางที่ไทม์ไลน์จะวิ่งเหนือคีย์เฟรมได้ด้วยทิศทางภาพเคลื่อนไหว ซึ่งจะใช้ค่าต่อไปนี้

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

animation-delay

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

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

สิ่งที่แตกต่างจาก animation-duration คือคุณสามารถกำหนดให้ animation-delay เป็นค่าลบ ซึ่งทำให้ภาพเคลื่อนไหวเริ่มต้นจากจุดที่สอดคล้องกันในไทม์ไลน์ ตัวอย่างเช่น หากภาพเคลื่อนไหวยาว 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: ทั้งคีย์เฟรมแรกและคีย์เฟรมสุดท้ายจะยังคงอยู่

ชวเลข 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;
  }
}

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

ทดสอบความเข้าใจ

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