在不同的选项卡上时，使requestAnimationFrame（）动画持久存在

Question

When you are using requestAnimationFrame() for animation, the animation persists when you change browsers but not when you change tabs within your browser. The animation seems to pause.

For example, this animation. http://pixijs.github.io/examples/index.html?s=basics&f=spritesheet.js&title=SpriteSheet%20Animation

Is there a way to make the animation persist even when you are in a different tab?

Answer 1

Your question isn't actually PIXI specific. It's about how the browser handles screen updates.

PIXI applications typically update each frame using the common Javascript function Window.requestAnimationFrame() .

This function tends to pause when you switch tabs. From the docs:

The callback rate may be reduced to a lower rate when running in background tabs or in hidden <iframe>s in order to improve performance and battery life.

https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

---

So the short answer is no, HOWEVER you can easily simulate it by keeping keep track of the time elapsed between updates, and move your animation forward accordingly.

In the PIXI example you provided, change the animate() function to this code below, and re-run it. Switch tabs, and when you switch back, you will see that the animation appears to continue as though you never switched tabs. Hope that helps! :)

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);
}