使用Javascript - requestAnimationFrame幀率

我有哪裏我使用requestAnimationFrame方法動畫只有4片這樣的圖片上spritesheet一個精靈表動畫是我的代碼： http://hyque.com/ryan/ani-ryan-2.html 的問題是，它是太快了以60 fps ，所以我想減慢fps。我一直在閱讀幾篇關於使用setInterval或Date（）的方法。我似乎無法讓代碼正常工作。任何人都可以幫忙，請。這裏是我試圖合併到我的代碼的文章之一： http://codetheory.in/controlling-the-frame-rate-with-requestanimationframe/使用Javascript - requestAnimationFrame幀率

來源

2016-11-29 Andy Gagner

一個簡單的setInterval怎麼樣？ –

請發佈問題中的代碼。如果某人找不到可用的相同問題，那麼外部鏈接對於尋求幫助的人無效。 – Archer

基本上：移除requestAnimation調用並使用：setInterval（animate，your_framerate）; –

所以我喜歡用來控制動畫分開形成「遊戲循環」。

var lastRender = 0; 
var counter = 0; 
function render(time) 
{ 
    //checks to see if enough time has passed 
    if(time - lastRender<16){requestAnimationFrame(render);return;} 
    lastRender = time; 
    counter++; 
    if(counter %20 && counter != 0) 
     animation(); 
    if(counter >= 60) 
     counter=0; 
    requestAnimationFrame(render); 
} 
requestAnimationFrame(render);

這給你更多的控制你的精靈，所以你現在可以讓他們以不同的速度和你的邏輯保持在60fps。

來源

2016-11-29 15:43:43 ZergRush

通常，對於遊戲引擎，您會希望渲染速度與邏輯速度不同。

邏輯速度應該簡單地儘可能快

的setInterval（邏輯，0）; //運行儘可能快

SetTimer的（邏輯，0）; //邏輯（）再次運行這個（我認爲這一般是越多越好）

而渲染應該保持你擁有它，以最快的速度渲染完成

requestAnimationFrame（渲染）//每渲染幀

然而，requestAnimationFrame是機器之間不穩定的，並且在大多數情況下將運行每秒60幀（取決於用戶的硬件）。

在這種情況下，爲了保持一致性，您應該將您的動畫設置爲一致的TIME或setTimeout。

在你的動畫，你可以使用類似

VAR日期=新的日期（）//日期對象

毫秒= date.getMilliseconds（），// 0 - 999秒

totalSpriteFrames = 4

幀= Math.floor（毫秒/（1000/totalSpriteFrames））; //將第二幀分成四幀

在動畫範圍外創建日期對象進行優化，並且可以輕鬆地使用該數學來選擇您的精靈所在的「幀」。你也可以將它用於多個精靈，只需更改它們的「totalSpriteFrame」

這也是可擴展的，如果你最終得到一個帶有許多幀的幀精靈。

來源

2016-11-29 16:09:54

感謝所有的建議，但我嘗試了一堆不同的東西。我認爲我的問題是我沒有將代碼實施到我已有的代碼中： –

我嘗試了很多這些類型的東西，並感謝所有偉大的建議，當我嘗試添加時，它們從不工作他們到我現有的代碼。任何人都可以指向我使用requestAnimationFrame（）可以看到整個精靈動畫的位置，並減慢幀速率。按照建議，我嘗試將我的代碼放到這裏，但它說它太長了。鏈接在我原來的問題上面。我似乎無法正確執行附加代碼。 –

使用Javascript - requestAnimationFrame幀率

回答

相關問題