问题标签 [requestanimationframe]

我正在尝试构建一个视差站点，它会在滚动站点时移动一些元素。但是，在阅读了 Paul Irish 的这篇文章之后，我没有使用滚动事件侦听器，而这段视频说滚动侦听器有点错误。我的问题是：requestAnimationFrame

1. 它在 Chrome 中看起来很流畅，但在 Firefox 中闪烁严重。我在这里做错了吗？
2. 我的代码实际上是否比使用普通滚动事件侦听器占用更多资源？每次我玩这个代码时，我都能听到我的笔记本电脑风扇在燃烧。

我的文件位于http://www.socialbuzz.com.au/index.html，请滚动到页面底部以查看正在从 javascript 操作的元素。

我正在使用咖啡脚本类来尝试自动化画布的一些基本功能。上面的代码在大多数情况下都可以正常工作，但我真的很想开始使用requestanimationframe而不是setInterval.

我想使用这里发布的 polyfill：https ://gist.github.com/1579671

不幸的是，我只是不明白。如何重写此类以使其具有相同的功能并requestanimationframe改为使用？

我正在尝试在 Firefox 中调用 mozRequestAnimationFrame，但我不断收到错误消息。这是我的代码：

错误发生在obj.animFrame(a);我收到以下错误消息：

WrappedNative原型对象的非法操作

我在 SO：requestAnimationFrame上找到了这个线程 ，然后发现 requestanimationframe 可能没有正确的“this”上下文，所以我尝试了

但仍然收到相同的错误消息。那么为什么会出现错误呢？

我在想，对于一些我做的项目，60fps 并不是完全需要的。我想我可以拥有更多以 30fps 运行的对象和事物，如果我能让它以该帧速率平稳运行的话。我想如果我在 three.js 中编辑 requestAnimationFrame 垫片，我可以将它限制为 30。但我想知道是否有更好的方法来使用所提供的three.js 本身。此外，这会给我带来我所想的那种性能提升吗？我能以 30 fps 渲染两倍于 60 fps 的对象吗？我知道以 30 和 60 运行的东西之间的区别，但我能否让它以平稳的恒定 30fps 运行？

我通常使用 WebGLRenderer，如果需要，我会回退到 Canvas，除非项目专门针对它，通常是 webgl 着色器项目。

因此，我正在使用 Paul Irish 的 requestAnimationFrame 在页面上制作侧边栏“粘性”。我发现至少在 webkit 浏览器中，这比 Waypoints 等其他解决方案带来了巨大的性能改进。但是，我在 Firefox 上注意到，当我开始滚动页面时，CPU 会飞过屋顶，因此页面速度非常慢。我是在执行这个错误，还是需要为 Firefox 使用另一种方法？

非常感谢任何帮助！对于如何解决这个问题，我也对完全不同的解决方案持开放态度（但 Waypoints 的性能不足以很好地工作）。

我有一个 Canvas 调整大小以在调整窗口大小时自动填充整个窗口。

在画布的一个角落，我正在绘制 5 个动画精灵。这里没问题。

它以完美的 60 fps 运行，但是当我最大化窗口以填充屏幕时，fps 下降到 30 fps 并在 30 fps 和 60 fps 之间波动。当我再次缩小窗口时，它会恢复到一致的 60 fps。

所有的动画都在画布的一个角落，画布的其余部分是空白的。我知道在每个刻度上重绘整个画布是非常低效的，并且应该只重绘正在变化的部分。

但我的问题是 - 这是正常的行为吗？是否应该重绘整个屏幕，即使屏幕除了角落里的几个精灵之外是空白的，也会导致 fps 在 30 到 60 fps 之间波动？

浏览器：Chrome 20 操作系统：OSX Lion 计算机：Macbook Air

我包括了一个小提琴：http: //jsfiddle.net/XQpzU/3561/

尝试使渲染窗口更大，FPS 会下降。

我正在寻找编写一个简单的每秒帧数动画基准 Javascript 实用程序。FPS 在这里可能是一个失败的术语，但理想情况下，它可以让我更准确地比较和测量不同动画（CSS3/canvas/webgl）在浏览器和设备之间的执行情况。（所以不是只测试特定代码的东西 - 而是一个包含在页面中并且能够自己完成它的事情的 JS 库）

我正在寻找有关如何最好地处理该主题的想法。

例如，我希望 requestAnimationFrame 是我正在寻找的 - 我已经阅读了一些关于它的内容，似乎每次浏览器可以重绘/动画时都会调用它，对吗？因此，如果（在运行动画时）浏览器不经常可用（例如在空白运行中），按照相同的逻辑 - 我们已经有一些数字可以在那里进行比较。

问题当然是 requestAnimationFrame 没有得到我想要的广泛支持（尤其是在移动设备上）。可以以某种方式在那里使用 setInterval 吗？我知道它不那么可靠，但也许这可以用于我的优势 - 例如，如果我每秒调用它 1000 次，然后将其与每秒实际执行的次数进行比较 - 这已经是一种基准。

这里唯一的问题是该方法会返回任何数量的问题的测量值，而不仅仅是动画 - 例如，我可以想象浏览器跳过一个间隔，因为它在 DOM 中做某事等等。你可能会争辩说浏览器是一种单进程动物，因此 DOM 更改也会影响动画 - 但如果 CSS3 动画是 GPU 硬件加速的，那仍然如此吗？

目前只是一个理论 - 所以任何想法都非常感谢！;-)

是否有使用 requestAnimationFrame 的 JavaScript 动画库？

今天，我一直在努力让自己熟悉 HTML5 所提供的任何新功能，尤其是画布。我来到网站 www.html5canvastutorials.com 并开始学习一些教程并在不同的浏览器中玩弄代码。当我看到下面的例子时，我注意到谷歌浏览器中有一些奇怪的东西。http://www.html5canvastutorials.com/advanced/html5-canvas-oscillation-animation/

webkitRequestAnimationFrame 函数应该有助于在站点不活跃时帮助降低 FPS（从而降低 CPU 成本），例如当您转到不同的选项卡时。然而，当我尝试这个例子时，我注意到这并不总是能给出令人愉快的结果。

• 谷歌浏览器作为活动窗口，当前选项卡上的站点：获得大约 60 FPS，太棒了！
• 谷歌浏览器作为活动窗口，在不同的选项卡上：获得大约 1 FPS，非常好。
• 谷歌浏览器作为活动窗口，在我的电视上（用作第二台显示器），120 FPS，奇怪，但没有抱怨。
• 谷歌浏览器不是活动窗口，而是在不同的选项卡上，也大约 1 FPS 左右，完美。

然后是不好的部分：如果我的网站在当前选项卡上，但我有另一个窗口完全覆盖了 google chrome 窗口（例如最大化的窗口），则 FPS 最高可达 2500 左右（因此最大化一个 CPU 核心）。

当我在 Firefox 中尝试同一个站点时，一切正常。

这个小提琴是一个例子，它显示了自上次刷新以来的平均 FPS：http: //jsfiddle.net/kmKZa/55/ （我几乎从教程站点复制了代码）

如果有人有任何想法，我想知道如何防止这些可怕的 CPU 峰值。提前感谢您的任何建议！

渲染我的画布的函数是一个类的原型方法，如下所示：

当我尝试直接运行此代码时，它工作正常：

当我尝试在 Chrome 或 Firefox 中使用 requestAnimationFrame 运行它时，我得到了这个：

它运行，但它总是抛出一个错误。这不酷。

当我尝试像这样运行它时：

它什么也不做。

我能够通过使用闭包来解决这个问题，但我仍然想知道为什么我不能将这样的函数传递给 requestAnimationFrame。