当用户切换选项卡时，如何允许 Easeljs Tickers 保持活动状态

Posted 2023-03-05

【中文标题】当用户切换选项卡时，如何允许 Easeljs Tickers 保持活动状态

【英文标题】：How can I allow Easeljs Tickers to remain active when a user switches tabs

【发布时间】：2016-05-16 15:15:30

【问题描述】：

我正在使用 Createjs 制作游戏，但我遇到了切换标签后游戏自动暂停的问题。我已经研究过这个主题，我相信已经发现不是 Createjs 暂停 Tickers，而是浏览器本身。这与 Page Visibility API 有关，它知道文档何时隐藏或可见，一旦隐藏，我相信它会减慢该文档的 RAF 或 setIntervals 速度，从而使其看起来像是暂停了。这为 CPU 和电池提供了帮助，因此它们不会烧坏。

即使用户切换标签页，我也需要我的游戏始终在后台运行。我能做到这一点的最佳方法是什么？只想提一下，如果这很重要，我正在使用 Easeljs 和 Tickers。

如果我说的有问题，请纠正我。我仍然是初学者，通过纠正我，我将能够理解真正的问题。感谢您的宝贵时间。

【参考方案1】：

您所描述的行为是预期的，浏览器会将 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 在滴答事件中提供了一个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.

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

请注意，TweenJS 使用基于时间的补间，您可以在使用这种方法的 EaselJS 中设置 MovieClips 和 Sprites 的帧率。

希望对您有所帮助。