วิธีสร้างภาพเคลื่อนไหว CSS ประสิทธิภาพสูง

Kayce Basques

Rachel Andrew

คู่มือนี้จะสอนวิธีสร้างภาพเคลื่อนไหว CSS ประสิทธิภาพสูง

ดูทำไมภาพเคลื่อนไหวบางภาพจึงทำงานช้า เพื่อเรียนรู้ทฤษฎีเบื้องหลังคำแนะนำเหล่านี้

ความเข้ากันได้กับเบราว์เซอร์

คุณสมบัติ CSS ทั้งหมดที่คู่มือนี้แนะนำมีการสนับสนุนข้ามเบราว์เซอร์ที่ดี

transform

การสนับสนุนเบราว์เซอร์

• 36
• 12
• 16
• 9

แหล่งที่มา

opacity

การสนับสนุนเบราว์เซอร์

• 1
• 12
• 1
• 2

แหล่งที่มา

will-change

การสนับสนุนเบราว์เซอร์

• 36
• 79
• 36
• 9.1

แหล่งที่มา

ย้ายองค์ประกอบ

หากต้องการย้ายองค์ประกอบ ให้ใช้ค่าคีย์เวิร์ด translate หรือ rotation ของพร็อพเพอร์ตี้ transform

เช่น หากต้องการเลื่อนรายการขึ้นมาในมุมมอง ให้ใช้ translate

.animate {
  animation: slide-in 0.7s both;
}

@keyframes slide-in {
  0% {
    transform: translateY(-1000px);
  }
  100% {
    transform: translateY(0);
  }
}

ใช้ rotate เพื่อหมุนองค์ประกอบ ตัวอย่างต่อไปนี้จะหมุนองค์ประกอบ 360 องศา

.animate {
  animation: rotate 0.7s ease-in-out both;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

ปรับขนาดองค์ประกอบ

หากต้องการปรับขนาดองค์ประกอบ ให้ใช้ค่าคีย์เวิร์ด scale ของพร็อพเพอร์ตี้ transform

.animate {
  animation: scale 1.5s both;
}

@keyframes scale {
  50% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1);
  }
}

เปลี่ยนการเปิดเผยองค์ประกอบ

หากต้องการแสดงหรือซ่อนองค์ประกอบ ให้ใช้ opacity

.animate {
  animation: opacity 2.5s both;
}

@keyframes opacity {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

หมายเหตุ: ค้นหาการคัดลอกและวางตัวอย่างภาพเคลื่อนไหวต่างๆ ที่ Animista

หลีกเลี่ยงที่พักที่ทำให้เลย์เอาต์หรือ Paint แสดง

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

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

บังคับสร้างเลเยอร์

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

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

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

ใน CSS คุณสามารถใช้ will-change กับตัวเลือกใดก็ได้ดังนี้

body > .sidebar {
  will-change: transform;
}

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

หมายเหตุ: หากต้องการดูข้อมูลเพิ่มเติมและตัวอย่างการใช้งาน will-change โปรดดูข้อมูลทั้งหมดที่จำเป็นต้องทราบเกี่ยวกับพร็อพเพอร์ตี้ will-change ของ CSS

หากต้องการบังคับให้สร้างเลเยอร์ในเบราว์เซอร์ที่ไม่รองรับ will-change (น่าจะเป็น Internet Explorer) ให้ตั้งค่า transform: translateZ(0)

แก้ไขข้อบกพร่องของภาพเคลื่อนไหวที่ช้าหรือข้อบกพร่อง

เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome และ Firefox DevTools มีเครื่องมือมากมายที่จะช่วยให้คุณทราบ สาเหตุที่ภาพเคลื่อนไหวช้าหรือข้อบกพร่อง

ตรวจสอบว่าภาพเคลื่อนไหวทริกเกอร์เลย์เอาต์หรือไม่

ภาพเคลื่อนไหวที่ย้ายองค์ประกอบโดยใช้สิ่งอื่นที่ไม่ใช่ transform มักจะทำงานช้า ตัวอย่างต่อไปนี้จะเปรียบเทียบภาพเคลื่อนไหวที่ใช้ transform กับภาพเคลื่อนไหวที่ใช้ top และ left

ไม่ควรทำ

.box {
  position: absolute;
  top: 10px;
  left: 10px;
  animation: move 3s ease infinite;
}

@keyframes move {
  50% {
     top: calc(90vh - 160px);
     left: calc(90vw - 200px);
  }
}

ควรทำ

.box {
  position: absolute;
  top: 10px;
  left: 10px;
  animation: move 3s ease infinite;
}

@keyframes move {
  50% {
     transform: translate(calc(90vw - 200px), calc(90vh - 160px));
  }
}

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

• ก่อน
• หลัง

เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

1. เปิดแผงประสิทธิภาพ
2. บันทึกประสิทธิภาพของรันไทม์ ขณะที่ภาพเคลื่อนไหวกำลังเกิดขึ้น
3. ตรวจสอบแท็บสรุป

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

ตัวอย่างanimation-with-top-leftจะทำให้การแสดงผลทำงานได้

ตัวอย่าง animation-with-transform จะไม่ทำให้การแสดงผลทำงาน

เครื่องมือสำหรับนักพัฒนาเว็บใน Firefox

ใน Firefox DevTools Waterfall จะช่วยให้คุณเข้าใจว่าเบราว์เซอร์ใช้เวลาไปกับส่วนใดบ้าง

1. เปิดแผงประสิทธิภาพ
2. เริ่มบันทึกประสิทธิภาพขณะที่กำลังมีภาพเคลื่อนไหว
3. หยุดการบันทึกและตรวจสอบแท็บ Waterfall

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

ตรวจหาเฟรมที่ตก

1. เปิดแท็บการแสดงผลในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
2. เปิดใช้ช่องทำเครื่องหมายเครื่องวัด FPS
3. ดูค่าในขณะที่ภาพเคลื่อนไหวทำงาน

ดูที่ป้ายกำกับเฟรมที่ด้านบนของ UI ของเครื่องวัด FPS คอลัมน์นี้จะแสดงค่าอย่างเช่น 50% 1 (938 m) dropped of 1878 ภาพเคลื่อนไหวที่มีประสิทธิภาพสูงมีเปอร์เซ็นต์สูง เช่น 99% ซึ่งหมายความว่ามีการวางเฟรมเพียงไม่กี่เฟรมและภาพเคลื่อนไหวดูราบรื่น

ตัวอย่าง animation-with-top-left ทำให้เฟรมลดลง 50%

ตัวอย่าง animation-with-transform ทำให้เฟรมถูกตัดเพียง 1% เท่านั้น

ตรวจสอบว่าภาพเคลื่อนไหวทำให้เกิดการแสดงผลหรือไม่

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

เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

1. เปิดแท็บการแสดงผลในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
2. เลือกการกะพริบเพนท์
3. เลื่อนเคอร์เซอร์ไปรอบๆ หน้าจอ

ในตัวอย่างนี้จาก Google Maps คุณจะเห็นองค์ประกอบที่กำลังมีการทาสีใหม่

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

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

เครื่องมือสำหรับนักพัฒนาเว็บใน Firefox

1. เปิดการตั้งค่าและเพิ่มปุ่มกล่องเครื่องมือสำหรับ สลับการกะพริบเพนท์
2. ในหน้าเว็บที่คุณต้องการตรวจสอบ ให้สลับปุ่มและเลื่อนเมาส์ หรือเลื่อนเพื่อดูพื้นที่ที่ไฮไลต์

บทสรุป

หากเป็นไปได้ ให้จำกัดภาพเคลื่อนไหวไว้ที่ opacity และ transform เพื่อให้ภาพเคลื่อนไหวอยู่ในระยะการประกอบภาพของเส้นทางการแสดงผล ใช้เครื่องมือสำหรับนักพัฒนาเว็บเพื่อตรวจสอบว่า ภาพเคลื่อนไหวส่งผลต่อขั้นตอนใดในเส้นทาง

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

ใช้พร็อพเพอร์ตี้ will-change อย่างจำกัด และใช้เฉพาะเมื่อคุณประสบปัญหาด้านประสิทธิภาพเท่านั้น