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

Kayce Basques

Rachel Andrew

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

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

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

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

transform

Browser Support

• 36
• 12
• 16
• 9

Source

opacity

Browser Support

• 1
• 12
• 1
• 2

Source

will-change

Browser Support

• 36
• 79
• 36
• 9.1

Source

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

หากต้องการย้ายองค์ประกอบ ให้ใช้ค่าคีย์เวิร์ด 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

หลีกเลี่ยงพร็อพเพอร์ตี้ที่ทริกเกอร์เลย์เอาต์หรือการวาด

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

คำเตือน: หากคุณต้องใช้พร็อพเพอร์ตี้ที่ทริกเกอร์เลย์เอาต์หรือการแสดงผล คุณอาจไม่สามารถ

รักษาภาพเคลื่อนไหวให้ราบรื่นหรือมีประสิทธิภาพสูงได้

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

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

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

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

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

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

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

หากต้องการบังคับให้สร้างเลเยอร์ในเบราว์เซอร์ที่ไม่รองรับ will-change คุณสามารถ ตั้งค่า transform: translateZ(0) ได้

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

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

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

ภาพเคลื่อนไหวที่ย้ายองค์ประกอบโดยใช้สิ่งอื่นที่ไม่ใช่ 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));
  }
}

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

• ก่อนหน้านี้มีภาพเคลื่อนไหว top และ left
• หลังจากนั้นด้วย transform

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

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

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

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

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

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

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

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

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

ตรวจสอบเฟรมที่หลุด

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

สังเกตป้ายกำกับเฟรมที่ด้านบนของ UI FPS Meter ซึ่งจะแสดงค่าต่างๆ เช่น 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 คุณจะเห็นองค์ประกอบที่กำลังวาดใหม่

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

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

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

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

สร้างภาพเคลื่อนไหวในขั้นตอนการคอมโพสิต

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

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

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