requestAnimationFrame在屏幕外移動時表現出奇怪的圖像

我有一張沿屏幕緩慢移動的圖片。一旦他們離開屏幕，他們就會回到色帶的後面。所以當你在網頁上時，一切都很正常，但當你離開時，一個圖像超出了界限。它會被放回錯誤的地方。我認爲這可能是requestAnimationFrame的東西，但我不知道會導致這種情況。requestAnimationFrame在屏幕外移動時表現出奇怪的圖像

function tick(timePassed) 
{ 
//dont worry about it 
area.tick(); 
//updates the imgs X position 
for (var i = 0; i < loadedImgs.length; i++) 
{ 
    loadedImgs[i].x -= (timePassed * 10)/1000; 
    if (loadedImgs[i].x + loadedImgs[i].width <= 0) 
    { 
     loadedImgs[i].x = totalLength - loadedImgs[i].width; 
    } 
} 
//updates there y position based on scroll wheel 
dy -= dy * .1; 
y += dy/10; 



}

緩衝功能

//buffer function 
function update() 
{ 

buffer.clearRect(0, 0, width, 600); 
area.draw();//this has nothing to do with what going on 
if (showAlert)//checks to see if a message is needed 
{ 
    buffer.font = "30px monospace"; 
    var strings = alertMessage.split(" "); 
    var charCount = 0; 
    var line = 0; 
    for(var i =0;i<strings.length;i++) 
    { 
     buffer.fillText(strings[i], (width/5) + (charCount* letterSize), 300 + (line * 30)); 
     if (Math.floor(charCount/50) > 0) 
     { 
      line++; 
      charCount = 0; 
     } 
     else 
     { 
      charCount += strings[i].length + 1; 
     } 

    } 

} 
else 
{ 
    //paints all imgs 
    for (var i = 0; i < loadedImgs.length; i++) 
    { 
     buffer.drawImage(loadedImgs[i].obj, loadedImgs[i].x, y); 
    } 
} 
//dont worry about it 
buffer.drawImage(area.canvas, (width/2) - (area.width/2), y + 1000); 
//calls the render 
render();

}

渲染功能

function render() 
    { 
      //paints to main canvas 
      ctx.clearRect(0, 0, width, 600); 
      ctx.drawImage(b, 0, 0); 
    }

保持時間

function renderLoop(time) 
{ 
    var timePassed = time - lastRender; 
    if (timePassed < 33) { window.requestAnimationFrame(renderLoop); return; } 
    window.requestAnimationFrame(renderLoop); 
    lastRender = time; 
    tick(timePassed); 
    update(); 

    }

來源

2016-07-22 ZergRush

'requestAnimationFrame'將在其瀏覽器選項卡失去焦點時停止，因此焦點在'renderLoop'中返回'time'時比您預期的大得多。 – markE

因此，imgs的移動就像時間已過，因爲我根據上次記錄的變化移動它們。 – ZergRush

是的！ :-) – markE

將在其瀏覽器選項卡失去焦點時停止，因此當焦點在renderLoop中返回您的時間比您預期的要大得多。

這會導致renderLoop假定已經過去了更長的時間，並且正在拋棄您的重新定位。

來源

2016-07-24 20:25:55 markE

requestAnimationFrame在屏幕外移動時表現出奇怪的圖像

回答

相關問題