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

Kayce Basques
Rachel Andrew

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

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

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

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

transform

การรองรับเบราว์เซอร์

  • Chrome: 36
  • ขอบ: 12.
  • Firefox: 16.
  • Safari: 9.

แหล่งที่มา

opacity

การรองรับเบราว์เซอร์

  • Chrome: 1.
  • ขอบ: 12.
  • Firefox: 1.
  • Safari: 2.

แหล่งที่มา

will-change

การรองรับเบราว์เซอร์

  • Chrome: 36
  • ขอบ: 79
  • Firefox: 36
  • Safari: 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;
  }
}

หลีกเลี่ยงพร็อพเพอร์ตี้ที่ทำให้เลย์เอาต์หรือการลงสีแสดงขึ้น

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

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

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

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

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

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

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

ถ้าคุณต้องการบังคับให้สร้างเลเยอร์ในเบราว์เซอร์ที่ไม่รองรับ will-change (ส่วนใหญ่เป็น Internet Explorer) คุณสามารถตั้งค่า 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 ตัวอย่าง Glitch ต่อไปนี้ และสำรวจประสิทธิภาพโดยใช้เครื่องมือสำหรับนักพัฒนาเว็บ

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

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

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

วันที่ แผงสรุปจะแสดง 37 มิลลิวินาทีสําหรับการแสดงผล และ 79 มิลลิวินาทีสําหรับการแสดงผล
รูปภาพanimation-with-top-left ตัวอย่างทำให้เกิดการแสดงผล
แผงสรุปจะแสดงค่าเป็น 0 สําหรับการแสดงผลและการวาดภาพ
ภาพเคลื่อนไหวที่มีการเปลี่ยนรูปแบบ ไม่ทำให้แสดงผล

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

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

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

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

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

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

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

วันที่ มาตรวัด FPS แสดงให้เห็นว่าเฟรมลดลง 50%
รูปภาพanimation-with-top-left เฟรมต่างๆ ลดลง 50%
มาตรวัด FPS แสดงให้เห็นว่าเฟรมลดลงเพียง 1%
ภาพเคลื่อนไหวที่มีการเปลี่ยนรูปแบบ ทำให้เฟรมลดลงเพียง 1%

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

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

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

  1. เปิดแท็บการแสดงผลใน Chrome DevTools
  2. เลือก Paint Flashing
  3. เลื่อนตัวชี้ไปรอบๆ หน้าจอ
องค์ประกอบ UI ที่ไฮไลต์ด้วยสีเขียวซึ่งแสดงให้เห็นว่าจะได้รับการทาสีใหม่
ในตัวอย่างนี้จาก Google Maps คุณจะเห็นองค์ประกอบที่นำมาทาสีใหม่

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

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

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

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

บทสรุป

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

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

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