问题标签 [requestanimationframe]

我将渲染器 domElement 放在一个名为 plot_area 的 div 中：

以下是初始化程序（主要是标准 Three.js）：

并将控件附加到同一个 div。现在，当尝试旋转或平移时（尽管缩放很好），div 显示为完全空白。一旦我将整个文档用作控件的范围，一切都会正常工作。

我怀疑可能（但不应该）存在全局/本地名称冲突，但问题并没有通过重命名所有init*函数参数来解决。另一个猜测是在返回时调用了某种复制构造函数，因此从返回的对象init*与任何东西都没有真正的关系。（是的，我不是 js 专家）。也许，请求动画帧在失焦时不起作用？

一些例子：document-scoped controls，div-scoped controls。

关于我做错了什么的任何建议？

我正在构建禁用浏览器本机滚动的 webapp，而不是使用 iScroll。我在使用最新的 Firefox 时遇到了以下问题。

在我的 MacBook Air 和 Firefox 23.0.1 上使用双指滚动时，iScroll 4 每个滚动手势仅滚动不到 10 像素，在较旧的 Firefox 中，滚动就像在 Safari 和 Chrome 上一样平滑，滚动长度为几十像素长. 如果我使用带有滚动鼠标滚轮的普通鼠标，滚动是应该的。

使用 macbook 和 firefox 版本 23 的人甚至可以在 iScroll -demo 页面http://lab.cubiq.org/iscroll/examples/simple/上测试该问题。

新版本发布说明http://www.mozilla.org/en-US/firefox/23.0.1/releasenotes/说这个“添加了未加前缀的 requestAnimationFrame”，这是唯一可能与它有关的更新内容。

我试图从 iScroll 的代码中找到问题的解决方案，该代码根据当前浏览器确定 css 转换等的供应商（moz-、webkit-o- 等）。不幸的是，我没有运气。

我将 Firefox 更新到 23.0.1 版本。在那个问题根本没有发生之前，一切都很完美。

如果有人对这个问题有预感或事实，我将不胜感激！

干杯，派瑞

我正在使用 Web Audio API ScriptProcessor，它是onaudioprocess重复回调的事件，例如节拍器。

我尝试在同一个应用程序中使用requestAnimationFrame和节点进行音频可视化。analyser

尝试绘制到using or时，似乎哪个onaudioprocess事件发生的速度减慢了一半。canvasrequestAnimationFramesetInterval

问题是，其他东西可以中断onaudioprocess速度是否正常？还是我做错了什么？

或者它受到canvas绘图的影响？因为我尝试使用 RAF 并设置 Interval 将内容记录到控制台，但它没有任何影响。

我试图公然撕掉小行星，但我遇到了一个严重的内存管理问题。

我正在使用 window.requestAnimationFrame 为我的游戏提供帧，方法是使用“gameloop”函数调用 requestAnimationFrame 并将其自身作为参数。但是，我一定是做错了什么，因为我的游戏的内存使用量很大，导致频繁的垃圾收集和性能不佳（以及与之相关的典型锯齿状内存使用模式）。我很确定这个问题的原因是许多函数对象是由这个函数和回调循环创建的——可能是一些无害的语句导致一个函数被创建而不是被重用......可能是 gameloop 函数。 ..

我从这篇文章中得到了这个想法：https ://www.scirra.com/blog/76/how-to-write-low-garbage-real-time-javascript

这是一个带有我的代码的 jsfiddle：http: //jsfiddle.net/LEqUr/（点击空格，窗口处于焦点位置以使新的小行星出现）。我知道我的一些东西是驼峰式的，有些是用下划线完成的——对不起。

这是（我认为）代码中最相关的部分：

综上所述，我真的很想得到一些关于我的代码是如何组织的反馈（它肯定可以使用一些工作）、一些关于回调的信息、一些关于如何/何时在疯狂的嵌套回调中创建对象的信息以及任何其他有用的信息你可能有的建议。

谢谢！

我正在尝试为圆弧百分比创建动画，但正在创建的内容看起来很糟糕。您可以在圆弧中看到步骤*。*缺乏抗锯齿

我想知道如何正确地做到这一点？

http://jsbin.com/AqaBAWA/1/

感谢您的关注！

我正在创建一个类似于 Chrome for Android 地址栏的标题。效果是标题是一个伪粘性标题，当您向下滚动时会滚动到视图之外，然后您开始向上滚动标题滚动回到视图中。

现在它在桌面上运行良好（大约 60fps），但在 Chrome for Android 上（在 Nexus 7 2013 上）它充满了卡顿。

演示：jsFiddle

标题和内容区域都使用 transform translateY 移动，它比 pos:top 性能更高

我还使用 requestAnimationFrame 来消除滚动并仅在浏览器最方便时更改属性。

标题是position: fixed; top: 0;，然后使用 滚动进出视图transform: translateY(...);。另外，我没有使用 margin-top 从标题下方获取内容，而是使用transform: translateY(...);

我的 js 的基本结构如下：

效果不完整，因为它需要在完成滚动（并且已编码）后解决折叠问题，但我不想让问题复杂化，因为只有滚动移动锁定到标题导致卡顿。我在上下滚动时看到了绘制矩形，即使我正在更改我认为 gpu 正在处理并且不应该绘制的变换。

编辑：似乎在使用 ADB 进行调试时，每帧中都有一堆清晰的灰色轮廓时间。

我开始循环

1. 我无法调整帧速率。它总是非常快。为什么我不能将其更改为每秒 1 帧。我想这样做只是为了测试目的。
2. 我每次都必须清理画布吗？不清除它似乎工作得很好。

谢谢。

这是完整代码的小提琴链接： 完整代码

谢谢

我正在为 JavaScript 性能竞赛构建一个测试平台。其中一项任务要求参赛者优化负责处理画布动画的 JavaScript 代码。提交解决方案后，服务器使用PhantomJS运行它并读取 20 秒动画后的平均 FPS 数。问题是我得到 3-4FPS 优化和未优化的代码。这使得无法判断代码是否得到了改进。

几个事实：

• 我 100% 确定 phanotmjs 正确渲染动画（做了几个截图）
• 在浏览器中未优化的代码以 13FPS 运行，优化以 58FPS 运行
• phantomjs 不支持requestAnimationFrame，所以我不得不使用polyfill
• 我正在使用下面的代码来测试 FPS 的数量

frameCounter.js

我的问题是：如何以编程方式测量画布动画的性能？

我刚刚开始 HTML 5 javascript 游戏开发，我了解到最好使用 requestAnimationFrame polyfill。

我了解该功能，但我不了解其背后的数学原理。

准确地说：

我不明白的数学线是：

如果有人能给我简短解释那行代码是如何工作的，那就太好了。

梅尔文·特胡比朱鲁

我是 Win32 编程的新手。凭借我在浏览器 javascrip 动画方面的先验知识。我知道使用requestAnimationFrame很重要。但我在GDI+中没有找到类似的功能。虽然我不应该期望win32拥有所有类似的浏览器api，但我想知道，我是不是看错了方向？