如何允许 Easeljs 代码在用户切换选项卡时保持活动状态

How can I allow Easeljs Tickers to remain active when a user switches tabs

本文关键字：选项 活动状态 Easeljs 何允许 代码 用户      更新时间：2023-09-26

我正在使用Createjs制作游戏，一旦我切换标签，游戏就会自动暂停。我已经研究了这个主题，我相信已经发现不是Createjs暂停了股票代码，而是浏览器本身。这与页面可见性API有关，该API知道文档何时隐藏或可见，一旦隐藏，我相信它会减慢该文档的RAF或setIntervals，使其看起来像是暂停的。这为 CPU 和电池提供了帮助，使它们不会烧坏。

我需要我的游戏始终在后台运行，即使用户切换选项卡也是如此。我能做到这一点的最好方法是什么？只是想提一下，如果这很重要，我正在使用带有股票代码的 Easeljs。

如果我说的任何事情有误，请纠正我。我仍然是一个初学者，通过纠正我，我将能够理解真正的问题。谢谢你的时间。

你所描述的行为是意料之中的，浏览器会将 JavaScript 的执行限制在大约 1 FPS。

解决此问题的常用方法是确保您的应用程序/动画未绑定到特定的 FPS。例如，下面是形状在屏幕上移动的示例：http://jsfiddle.net/lannymcnie/4neobe00/2/

  • 从左到右大约需要 5 秒
  • 计数显示它重置的次数

如果只是在精灵中添加一定量(比如蓝色形状(，当浏览器框架关闭时，它每秒只会更新 1 次。我使用了 1.66，因为它与其他精灵的速度非常匹配。

lockedShape.x = (lockedShape.x + 1.66); // Moves a certain amount per tick

但是，Ticker 在 tick 事件中提供了一个delta，当您具有可靠的帧速率时，该值约为 1，但提供一个可用于确定帧花费多长时间的乘数。在示例中，索引递增1 x event.delta：

index += event.delta;

然后根据指数确定仓位：

shape.x = (index/10)%500; // divide by 10 to slow it down, modulus 500 to make it loop

我们甚至可以确定项目"循环"了多少次，因为我们知道，如果您将该索引除以宽度，它会为您提供循环次数：

text.text = (index/10/500 |0).toString(); // rough position divided by 500, rounded.

因此，使用这种方法，您可以使其余内容以一致的速度运行，因为您知道自上次报价以来已经过去了多少时间。这是一个官方教程(它有一个基本相同的示例，这可能是我制作自己的示例时想到的(。

请注意，TweenJS 使用基于时间的补间，您可以在使用此方法的 EaselJS 中的影片剪辑和精灵上设置帧速率。

希望有帮助。

相关文章：