Question

我想知道当画布所在的选项卡未聚焦时是否可以更新PIXI JS应用程序。例如，如果我有一个PIXI应用程序运行在一个选项卡上，但随后又切换到另一个选项卡，则PIXI应用程序将停止运行。这是我拍摄的一些示例代码（从github教程中复制）

//Aliases
let Application = PIXI.Application,
    Container = PIXI.Container,
    loader = PIXI.loader,
    resources = PIXI.loader.resources,
    TextureCache = PIXI.utils.TextureCache,
    Sprite = PIXI.Sprite,
    Rectangle = PIXI.Rectangle;

//Create a Pixi Application
let app = new Application({ 
    width: 256, 
    height: 256,                       
    antialias: true, 
    transparent: false, 
    resolution: 1
  }
);

//Add the canvas that Pixi automatically created for you to the HTML document
document.body.appendChild(app.view);

loader
  .add("images/cat.png")
  .load(setup);

//Define any variables that are used in more than one function
let cat;

function setup() {

  //Create the `cat` sprite 
  cat = new Sprite(resources["images/cat.png"].texture);
  cat.y = 96; 
  app.stage.addChild(cat);

  //Start the game loop 
  app.ticker.add(delta => gameLoop(delta));
}

function gameLoop(delta){

  //Move the cat 1 pixel 
  cat.x += 1;

  //Optionally use the `delta` value
  //cat.x += 1 + delta;
}

虽然焦点集中在选项卡上，但是猫图像在画布上移动，但是当我切换到另一个选项卡时，它会保持在相同的位置，直到我切换回带有画布的选项卡为止。我有什么可能的方法来使猫的位置更新，即使标签没有聚焦？

Answer 1

如果选项卡不是活动的选项卡，则各种浏览器动画方法（setTimeout，setInterval和requestAnimationFrame）都被设计为暂停。

有一种方法可以使用Web Worker来完成您要问的事情。有关实现的信息，请参见此问题的第二个答案：javadoc

本质上，将app.ticker.add...移到Web Worker中，并通过每帧发送'tick'消息使其与选项卡进行通信。该示例使用setInterval而不是app.ticker（在后台使用requestAnimationFrame），但是想法是相同的。

在标签不突出的情况下更新PIXI JS画布

1 个答案: