如何使用requestAnimationFrame優化js動畫並引入delta？

我有一個以逐漸增加的速度落下的基本動畫。如何使用requestAnimationFrame優化js動畫並引入delta？

據有些工作作爲最初與預期速度的預期。所以點擊畫布我們可以重複動畫，所以每次我們可以看到球速不斷增加。 5-6點擊球后高速移動。

所以問題是幀速率和預期單位每幀移動。？

1.如何減少/優化循環調用？，並在每次點擊中獲得恆定速度。

我不想更改Ball模型中的值，但必須減少ball.update()的時間。

var ball = new Ball(10,10,20); 

function animate() {  
    ctx.fillStyle = "#CCC"; 
    ctx.fillStyle = "#CCC"; 
    ctx.fillRect(0, 0, 500, 500);  
    ball.update(); 
    ball.draw(ctx); 
    requestAnimationFrame(animate); // add timestamp to optimize ? 
}

和點擊重置動畫是這樣

$("#element").on('click', function() { 
     ball = new Ball(10,10,20) 
     requestAnimationFrame(animate); 
});

和2.爲什麼它與預期速度initialy工作？我更喜歡在球移出畫布後清除動畫。

來源

2014-02-19 Sarath

這是你的小提琴叉的作品：http://jsfiddle.net/8egrw/

註釋掉該行：

$("#element").on('click', function() { 
    ball = new Ball(10,10,20) 
    //animationId = requestAnimationFrame(animate); 
});

來源

2014-02-19 14:38:44

主要的原因是，你使用requestAnimationFrame哪一種失敗的宗旨相結合的setTimeout。

不僅你的rAF由一個不準確的計時器觸發，而且當rAF踢進它時不確定你會得到一個可以產生生澀結果的幀。

更改這些行：

setTimeout(function() { 
    animationId = requestAnimationFrame(animate); 
}, 1000/60);

到

//setTimeout(function() { 
animationId = requestAnimationFrame(animate); 
//}, 1000/60);

然後重新設置你的球與Greg的答案。有沒有必要再次呼籲英國皇家空軍，因爲它已經在運行：

$(function(){  
    requestAnimationFrame(animate);  
    $("#element").on('click', function() { 
     ball = new Ball(10,10,20); 
    }); 
});

Modified fiddle

您也可以通過更新其屬性重置球。

來源

2014-02-19 14:57:13 K3N

+1。 @Sarath你誤會了'requestAnimationFrame'是如何工作的。這就像一個事件：你要求瀏覽器在下一幀調用'animate'。它就像一個異步循環，因爲animate會再次請求瀏覽器在下一幀調用'animate' ...當這個過程開始時，你所要做的就是修改球的內容，並且它會自動在下一幀。 –

我唯一的建議是利用球的重置方法，而不是每創建一個新球，因爲創建一個新球會造成舊球的垃圾。就原始問題而言，速度需要重新設定，位置而不是半徑。它可能被認爲過度優化，但它永遠不會傷害到垃圾收集器。更新小提琴：http://jsfiddle.net/qYYmJ/4/ – HJ05

如何使用requestAnimationFrame優化js動畫並引入delta？

回答

相關問題