在不同的選項卡上時，使requestAnimationFrame（）動畫持久存在

Question

當使用requestAnimationFrame（）進行動畫處理時，當您更改瀏覽器時動畫將持續存在，但是當您更改瀏覽器中的選項卡時動畫將持續存在。 動畫似乎暫停了。

例如，此動畫。 http://pixijs.github.io/examples/index.html?s=basics&f=spritesheet.js&title=SpriteSheet%20Animation

有沒有辦法使動畫即使在其他選項卡中也能持久保存？

Answer 1

您的問題實際上並非特定於PIXI。 關於瀏覽器如何處理屏幕更新。

PIXI應用程序通常使用通用Javascript函數Window.requestAnimationFrame()更新每個幀。

切換標簽時，此功能傾向於暫停。 從文檔：

在后台選項卡或隱藏的<iframe>中運行時，回調速率可能會降低到較低的速率，以提高性能和電池壽命。

https://developer.mozilla.org/zh-CN/docs/Web/API/window/requestAnimationFrame

---

因此，簡短的答案是“不”，但是，您可以通過跟蹤更新之間經過的時間來輕松模擬它，並相應地將動畫向前移動。

在您提供的PIXI示例中，將animate()函數更改為下面的代碼，然后重新運行它。 切換選項卡，然后再切換回去，您會看到動畫似乎在繼續，就像從未切換過選項卡一樣。 希望有幫助！ :)

var lastUpdate = new Date();
function animate() {
    //Determine the amount of time since last frame update
    var now = new Date();
    var elapsed = now - lastUpdate;
    lastUpdate = now;

    //Update the rotation based on time elapsed
    movie.rotation += elapsed/1000;

    // render the stage container
    renderer.render(stage);    
    requestAnimationFrame(animate);
}