4

我一直在试验Greensock 的 TweenMax JS和Three.js。由于两个库都使用 requestAnimationFrame (rAF)，我需要决定哪个库应该处理这个问题。

如果我使用内置的 rAF Three.js，它的运行速度约为 30fps，并且非常流畅。

如果我使用TweenMax例如：TweenMax.ticker.addEventListener('tick', animate);它运行大约 55-60fps 但有点波涛汹涌。

我可以更改与 Three.js rAF 版本类似的预期运行的TweenMaxfps TweenMax.ticker.fps(30);。

我的问题是哪种方法更受青睐，并且哪种方法被认为是最佳实践？另外，如果我选择 Three.js，我是否能够在其 rAF 实现中更改 fps？

最后，您将如何决定 fps 以适应更广泛的受众？限制为 30fps 似乎没问题，但有点武断，一些用户的速率可能比我允许的高得多。

更新 ：

根据 mrdoob 和 jack 的反馈，我已经尝试过在 three.js 中的 rAF 和使用 TweenMax 的 rAF，并打开和关闭了抗锯齿。

抗锯齿：

Three.js rAF (default) - 30fps smooth.

http://jsfiddle.net/cR7Lx/21/

TweenMax rAF (default) - 55-60fps slightly choppy.

http://jsfiddle.net/cR7Lx/23/

TweenMax rAF (fps(30)) - 30fps smooth.

http://jsfiddle.net/cR7Lx/24/

抗锯齿关闭：

Three.js rAF (default) - 30 - 60fps slightly choppy.
TweenMax rAF (default) - 92-120fps slightly choppy.
TweenMax rAF (fps(30)) - 30fps smooth.

可以与知道 requestAnimationFrame 如何在后台工作的人一起帮助解释差异，现在我将使用 TweenMax 30fps 或 Three.js 两者都启用抗锯齿。

4

2 回答 2

3

澄清一下，默认的 TweenMax RAF 行为不会限制 fps，因为......嗯......这就是 requestAnimationFrame 的重点——它旨在成为浏览器所要求的东西（通常是大约 60 帧/秒）。使用TweenMax.ticker.fps()设置特定的 fps只是对其设置一个上限（除非您设置TweenMax.ticker.useRAF(false)在这种情况下，它将使用setTimout()来尽可能接近您的 fps放）。

我注意到有人说你必须在 TweenMax 中设置一个 fps 以使其平滑，我只是想澄清这不是真的 - 如果/当它们发生得太快时，这样做只会跳过 RAF 更新 - 我无法想象那怎么会让事情变得更顺利。它可能会适得其反。

如果您想将帧速率降低到低于正常浏览器刷新率（通常为 60fps 左右），请仅使用TweenMax.ticker.fps() 。如果您正在寻找最平滑的结果，我可能会坚持使用 TweenMax 的默认配置。您可以尝试关闭 requestAnimationFrame 并使用非常高的 fps ( TweenMax.ticker.useRAF(false); TweenMax.ticker.fps(100) )，但不利的一面是您会失去 RAF 的所有好处，例如改进电池移动设备上的生命在选项卡处于非活动状态时，使用本机浏览器的同步更新刷新等。

抖动行为的最大原因是与 JavaScript 动画引擎无关的浏览器中的图形渲染。

我不熟悉 Three.js，所以我无法谈论它的功能或哪个选项会更好地用于驱动您的其他东西（抱歉）。我只能说我是 GreenSock 的忠实粉丝（哈哈）

于 2012-08-23T00:00:48.750 回答
0

当我检查这两个实施时，实际上它们实际上非常相似。他们都使用这种实现，但差别很小。

Three.js 实现计算您的最后一次通话并将下一次通话延迟（16 ms - lastCall）以修复您的 fps 60。如果它不能在 16 ms 内完成，它自然会等待，只要它需要。

TweenMax 的实施最初并没有修复您的 fps。相反，您必须手动调用 fps。这造成了这种波涛汹涌的局面。因为您必须始终提供正确的 fps 值（不多 - 不少）来调整延迟时间。

编辑 ：

我必须编辑 TweenMax 行为，因为我错过了在 fps 未定义时将默认 fps 设置为 60 的代码类末尾的构造函数调用 this.fps(fps)。

于 2012-08-22T14:26:53.720 回答