Three.js requestAnimationFrame 或 TweenMax 刻度处理程序

Question

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

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

如果我使用 TweenMax例如:TweenMax.ticker.addEventListener('tick', animate);它运行大约 55-60fps，但有点不稳定。

我可以在 TweenMax 中更改 fps与 TweenMax.ticker.fps(30);正如预期的那样，它的运行类似于 Three.js rAF 版本。

我的问题是哪种方法是首选，一种被认为是最佳实践？另外，如果我选择 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 都打开了抗锯齿。

Answer 1

澄清一下，默认的 TweenMax RAF 行为并没有限制 fps，因为……嗯……这就是 requestAnimationFrame 的第一点 - 它旨在成为 的内容。浏览器 规定(通常约为 60fps)。使用 TweenMax.ticker.fps() 设置特定的 fps 只是对其设置一个上限(除非您设置 TweenMax.ticker.useRAF(false) 在这种情况下它将使用 setTimout() 尽可能接近您的 fps放)。

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

如果您想 ，请仅使用 TweenMax.ticker.fps()下 低于正常浏览器刷新率的帧率，通常约为 60fps。如果您正在寻找最平滑的结果，我可能会坚持使用 TweenMax 的默认配置。你可以尝试关闭 requestAnimationFrame 并使用非常高的 fps (TweenMax.ticker.useRAF(false); TweenMax.ticker.fps(100))，但缺点是你失去了 RAF 的所有好处，比如改进的电池移动设备上的生命在选项卡处于非事件状态时，使用 native 浏览器刷新的同步更新等。

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

我不熟悉 Three.js，所以我无法谈论它的功能或哪个选项更适合用来驱动你的其他东西(抱歉)。我只能说我是 GreenSock 的忠实粉丝(哈哈)