การสำรวจ HTML5: การเพิ่มประสิทธิภาพแอนิเมชั่นบนเว็บด้วย requestAnimationFrame

ในโปรแกรมแอนิเมชันของเบราว์เซอร์ เรามักจะใช้ตัวจับเวลาเพื่อวนวัตถุเป้าหมายทุกๆ สองสามมิลลิวินาทีเพื่อให้วัตถุเคลื่อนที่ ข่าวดีก็คือนักพัฒนาเบราว์เซอร์ได้ตัดสินใจแล้ว: เฮ้ ทำไมเราไม่จัดเตรียม API ดังกล่าวในเบราว์เซอร์เพื่อที่เราจะได้เพิ่มประสิทธิภาพภาพเคลื่อนไหวให้กับผู้ใช้ได้ ดังนั้น ฟังก์ชัน requestAnimationFrame() นี้เป็น API สำหรับเอฟเฟกต์ภาพเคลื่อนไหว คุณสามารถใช้มันเพื่อเปลี่ยนสไตล์บน DOM หรือภาพเคลื่อนไหวแคนวาสหรือ WebGL

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

 // เลเยอร์ชิมด้วย setTimeout fallbackwindow.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function( callback ){ window.setTimeout(callback, 1000 / 60); };} )();// การใช้งาน:// แทน setInterval(render, 16) ....(function animloop(){ requestAnimFrame(animloop); render();})();// วาง rAF *ก่อน* render() เพื่อให้มั่นใจว่าใกล้เคียงกับ// 60fps ด้วย setTimeout fallback

การห่อหุ้ม requestAnimationFrame ที่เชื่อถือได้มากขึ้น

ช่างเทคนิคเบราว์เซอร์ Opera Erik Möller ได้สรุปฟังก์ชันนี้เพื่อให้เข้ากันได้กับเบราว์เซอร์ต่างๆ ได้ดียิ่งขึ้น คุณสามารถอ่านบทความนี้ได้ แต่โดยพื้นฐานแล้วโค้ดของเขากำลังตัดสินใจว่าจะใช้ดีเลย์ 4ms หรือ 16ms เพื่อให้ตรงกับ 60fps มากที่สุด ด้านล่างนี้คือโค้ดนี้ คุณสามารถใช้ได้ แต่โปรดทราบว่าโค้ดนี้ใช้ฟังก์ชันมาตรฐาน และฉันได้เพิ่มคำนำหน้าให้ซึ่งเข้ากันได้กับเอ็นจิ้นเบราว์เซอร์ต่างๆ

 (function() { var LastTime = 0; var vendors = ['webkit', 'moz']; for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; window.cancelAnimationFrame = window[ผู้ขาย[x]+'CancelAnimationFrame'] ||. window[vendors[x]+'CancelRequestAnimationFrame']; } if (!window.requestAnimationFrame) window.requestAnimationFrame = function(โทรกลับ, องค์ประกอบ) { var currTime = new Date().getTime(); สูงสุด (0, 16 - (currTime - LastTime)); var id = window.setTimeout(function() { โทรกลับ (currTime + timeToCall); }, timeToCall); LastTime = currTime + timeToCall; }; if (!window.cancelAnimationFrame) window.cancelAnimationFrame = ฟังก์ชั่น(id) { clearTimeout(id)

ขอดูผลของการใช้ requestAnimationFrame หน่อยครับ

 window.requestAnimationFrame(function(/* time */ time){ // time ~= +new Date // the unix time});

พารามิเตอร์ในฟังก์ชันโทรกลับสามารถส่งผ่านได้ทันเวลา

การสนับสนุนของเบราว์เซอร์ต่างๆ สำหรับ requestAnimationFrame

Google Chrome, Firefox และ IE10+ ต่างก็ใช้ฟังก์ชันนี้ แม้ว่าเบราว์เซอร์ของคุณจะเก่ามาก แต่การห่อหุ้ม requestAnimationFrame ข้างต้นสามารถทำให้วิธีการนี้ปราศจากข้อผิดพลาดบน IE8/9