คู่มือนี้จะสอนวิธีสร้างภาพเคลื่อนไหว CSS ประสิทธิภาพสูง
โปรดดูทำไมภาพเคลื่อนไหวบางภาพจึงช้าเพื่อเรียนรู้เกี่ยวกับ ทฤษฎีเบื้องหลังคำแนะนำเหล่านี้
ความเข้ากันได้กับเบราว์เซอร์
พร็อพเพอร์ตี้ CSS ทั้งหมดที่คู่มือนี้แนะนำสามารถใช้งานข้ามเบราว์เซอร์ได้ การสนับสนุน
transform
opacity
will-change
ย้ายองค์ประกอบ
หากต้องการย้ายองค์ประกอบ ให้ใช้ค่าคีย์เวิร์ด 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
- เปิดแผงประสิทธิภาพ
- บันทึกประสิทธิภาพรันไทม์ ระหว่างที่มีภาพเคลื่อนไหว
- ตรวจสอบแท็บสรุป
หากคุณเห็นค่าการแสดงผลที่ไม่ใช่ 0 ในแท็บสรุป ระบบอาจแสดงค่า หมายความว่าภาพเคลื่อนไหว ทำให้เบราว์เซอร์ทำงานได้
![แผงสรุปจะแสดง 37 มิลลิวินาทีสําหรับการแสดงผล และ 79 มิลลิวินาทีสําหรับการแสดงผล](https://web.developers.google.cn/static/articles/animations-guide/image/the-summary-panel-shows-3-d8a0efc73229b.jpg?authuser=9&hl=th)
![แผงสรุปจะแสดงค่าเป็น 0 สําหรับการแสดงผลและการวาดภาพ](https://web.developers.google.cn/static/articles/animations-guide/image/the-summary-panel-show-ze-6036893c491f8.jpg?authuser=9&hl=th)
เครื่องมือสำหรับนักพัฒนาเว็บใน Firefox
ใน Firefox DevTools นั้น Waterfall จะช่วยให้คุณเข้าใจว่าเบราว์เซอร์ใช้เวลาไปกับส่วนไหน
- เปิดแผงประสิทธิภาพ
- เริ่มบันทึกประสิทธิภาพขณะที่ภาพเคลื่อนไหวของคุณกำลังแสดงอยู่
- หยุดการบันทึกและตรวจสอบแท็บ Waterfall
ถ้าคุณเห็นรายการสำหรับ คำนวณรูปแบบใหม่ ซึ่งหมายความว่าเบราว์เซอร์จะต้องกลับไปยังจุดเริ่มต้นของ การแสดงวิดีโอตามลำดับขั้น เพื่อแสดงภาพเคลื่อนไหว
ตรวจหาเฟรมที่ตกหล่น
- เปิดแท็บการแสดงผลใน Chrome DevTools
- เปิดใช้ช่องทำเครื่องหมายเครื่องวัด FPS
- ดูค่าขณะที่ภาพเคลื่อนไหวทำงาน
ตรวจสอบป้ายกำกับเฟรมที่ด้านบนของ UI ของเครื่องวัด FPS
คอลัมน์นี้จะแสดงค่า เช่น 50% 1 (938 m) dropped of 1878
ประสิทธิภาพสูง
ภาพเคลื่อนไหวมีเปอร์เซ็นต์สูง เช่น 99%
หมายความว่ามี 2-3 เฟรม
ถูกทิ้งและภาพเคลื่อนไหวก็ดูลื่นไหล
![มาตรวัด FPS แสดงให้เห็นว่าเฟรมลดลง 50%](https://web.developers.google.cn/static/articles/animations-guide/image/the-fps-meter-shows-50-e279493d08c47.jpg?authuser=9&hl=th)
![มาตรวัด FPS แสดงให้เห็นว่าเฟรมลดลงเพียง 1%](https://web.developers.google.cn/static/articles/animations-guide/image/the-fps-meter-shows-1-97f98fe03092a.jpg?authuser=9&hl=th)
ตรวจสอบว่าภาพเคลื่อนไหวทริกเกอร์การแสดงผลหรือไม่
คุณสมบัติบางอย่างมีราคาแพงกว่าเบราว์เซอร์ในการวาดภาพมากกว่าคุณสมบัติอื่นๆ สำหรับ เช่น องค์ประกอบใดก็ตามที่มีการเบลอ (เช่น เงา) ให้เบลอได้ยาวขึ้น มากกว่าการวาดกล่องสีแดง อย่างไรก็ตาม ความแตกต่างเหล่านี้ ไม่ได้แสดงอย่างชัดเจนเสมอไปใน CSS แต่เครื่องมือสำหรับนักพัฒนาเว็บในเบราว์เซอร์สามารถช่วยคุณระบุส่วนที่จำเป็นต้อง สีใหม่ รวมถึงปัญหาประสิทธิภาพอื่นๆ ที่เกี่ยวข้องกับภาพวาด
เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
- เปิดแท็บการแสดงผลใน Chrome DevTools
- เลือก Paint Flashing
- เลื่อนตัวชี้ไปรอบๆ หน้าจอ
![องค์ประกอบ UI ที่ไฮไลต์ด้วยสีเขียวซึ่งแสดงให้เห็นว่าจะได้รับการทาสีใหม่](https://web.developers.google.cn/static/articles/animations-guide/image/a-ui-element-highlighted-43b56111254fb.jpg?authuser=9&hl=th)
หากคุณเห็นหน้าจอกะพริบทั้งหน้าจอหรือพื้นที่ที่ไฮไลต์ซึ่งคุณไม่เห็น ควรเปลี่ยน ให้ตรวจสอบเพิ่มเติม
หากคุณต้องการทราบว่า พร็อพเพอร์ตี้หนึ่งๆ ทำให้เกิด เครื่องมือสร้างโปรไฟล์สีเกี่ยวกับปัญหาด้านประสิทธิภาพที่เกี่ยวข้องกับภาพวาด ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome อาจช่วยได้
เครื่องมือสำหรับนักพัฒนาเว็บใน Firefox
- เปิดการตั้งค่า และเพิ่มปุ่มกล่องเครื่องมือ สลับการกะพริบในการแสดงผล
- ในหน้าเว็บที่ต้องการตรวจสอบ ให้เปิดปุ่มแล้วเลื่อนเมาส์ หรือ เลื่อนเพื่อดูพื้นที่ที่ไฮไลต์
บทสรุป
หากเป็นไปได้ ให้จำกัดภาพเคลื่อนไหวไว้ที่ opacity
และ transform
เพื่อเก็บไว้
ในพื้นที่งานประกอบของเส้นทางการแสดงผล ใช้เครื่องมือสำหรับนักพัฒนาเว็บเพื่อตรวจสอบ
ระยะใดของเส้นทางที่ได้รับผลกระทบจากภาพเคลื่อนไหว
ใช้เครื่องมือสร้างโปรไฟล์สีเพื่อดูว่ามีการทำสีพิเศษหรือไม่ มีราคาแพง หากพบผลลัพธ์ ให้ตรวจสอบว่าพร็อพเพอร์ตี้ CSS อื่นให้ รูปลักษณ์แบบเดียวกันแต่ยังมีประสิทธิภาพดียิ่งขึ้น
ใช้พร็อพเพอร์ตี้ will-change
เท่าที่จําเป็นและใช้ในกรณีที่พบปัญหาด้านประสิทธิภาพเท่านั้น