10
การควบคุม fps ด้วย requestAnimationFrame?
ดูเหมือนว่าrequestAnimationFrameจะเป็นวิธีการทำให้สิ่งต่างๆเคลื่อนไหวโดยพฤตินัยแล้ว มันทำงานได้ดีสำหรับฉันเป็นส่วนใหญ่ แต่ตอนนี้ฉันกำลังพยายามทำแอนิเมชั่นแคนวาสและฉันสงสัยว่า: มีวิธีใดบ้างที่จะทำให้แน่ใจว่ามันทำงานที่เฟรมต่อวินาที? ฉันเข้าใจว่าจุดประสงค์ของ RAF คือเพื่อให้ภาพเคลื่อนไหวที่ราบรื่นสม่ำเสมอและฉันอาจเสี่ยงต่อการทำให้แอนิเมชั่นขาด ๆ หาย ๆ แต่ตอนนี้ดูเหมือนว่าจะทำงานด้วยความเร็วที่แตกต่างกันอย่างมากโดยพลการและฉันสงสัยว่ามีวิธีต่อสู้หรือไม่ อย่างนั้น ฉันจะใช้setIntervalแต่ฉันต้องการการเพิ่มประสิทธิภาพที่ rAF เสนอ (โดยเฉพาะหยุดโดยอัตโนมัติเมื่อแท็บอยู่ในโฟกัส) ในกรณีที่มีคนต้องการดูรหัสของฉันมันค่อนข้างมาก: animateFlash: function() { ctx_fg.clearRect(0,0,canvasWidth,canvasHeight); ctx_fg.fillStyle = 'rgba(177,39,116,1)'; ctx_fg.strokeStyle = 'none'; ctx_fg.beginPath(); for(var i in nodes) { nodes[i].drawFlash(); } ctx_fg.fill(); ctx_fg.closePath(); var instance = this; var rafID = requestAnimationFrame(function(){ instance.animateFlash(); }) var unfinishedNodes = …