這似乎requestAnimationFrame是現在制作動畫的事實上的方式。在大多數情況下,它對我來說效果很好,但是現在我正在嘗試做一些畫布動畫,我想知道:有沒有辦法確保它以某個fps運行?我知道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 = nodes.filter(function(elem){ return elem.timer < timerMax; }); if(unfinishedNodes.length === 0) { console.log("done"); cancelAnimationFrame(rafID); instance.animate(); }}其中Node.drawFlash()只是一些代碼,它根據計數器變量確定半徑,然后繪制一個圓。
使用requestAnimationFrame控制fps?
天涯盡頭無女友
2019-08-30 14:33:48