亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

使用requestAnimationFrame控制fps?

使用requestAnimationFrame控制fps?

這似乎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()只是一些代碼,它根據計數器變量確定半徑,然后繪制一個圓。
查看完整描述

3 回答

?
慕田峪4524236

TA貢獻1875條經驗 獲得超5個贊

我建議把你的電話換成requestAnimationFrame一個setTimeout。如果你setTimeout從你請求動畫幀的函數中調用,那么你就失去了目的requestAnimationFrame。但如果你requestAnimationFrame從內部打電話setTimeout順利工作:


var fps = 25

function animate() {

  setTimeout(function() {

    requestAnimationFrame(animate);

  }, 1000 / fps);

}


查看完整回答
反對 回復 2019-08-30
  • 3 回答
  • 0 關注
  • 2007 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號