问题标签 [requestanimationframe]

目前，我正在使用requestAnimationFrame（理想情况下）60 FPS 渲染 WebGL 内容。我还在同时安排一个“更新”进程，该进程使用setTimeout. 我使用后者是因为我只需要每秒更新大约 30 次对象，而且它并不是绘制序列的一部分；为实际渲染通道节省剩余的 CPU 似乎是个好主意，因为我的大多数动画都是相当硬件密集型的。

我的问题是最佳实践之一。setTimeout并且setInterval对电池寿命和 CPU 消耗不是特别友好，尤其是当浏览器不在焦点时。另一方面，使用requestAnimationFrame（或将更新直接绑定到现有的渲染阶段）可能会每秒强制执行比严格必要的更新更多的更新，并且可能会在浏览器不在焦点时或在浏览器认为的其他时间完全停止更新“动画”是不必要的。

更新但不呈现内容的最佳行动方案是什么？

我对 window.requestAnimFrame 有疑问。它在 FF、Chrome 和 IE9、Opera 中以不同的方式工作。例如这个http://jsfiddle.net/vZP3u/2/（来自另一个关于 requestAnimFrame 的问题）。它在 FF 9.0.1 和 Chrome 16.0.912.77 m 中显示大约 60 fps（我猜应该是 30）。但它在 IE9 和 Opera 中运行良好。你知道如何解决这个问题吗？

我怎样才能创建一个平滑的动画，当它改变位置时向目标缓和？

正如这个 jsFiddle 所示，动画在期间停止或被阻塞，moveTarget()而不是继续朝着新的目标坐标前进。

达到预期效果的理想实施/结构是什么？

我想知道在实验之外使用 requestAnimationFrame 是否安全？我猜你仍然需要供应商前缀（moz、ms 等）。有多少现代浏览器支持它？差异有多大？我知道 FF 在 fps 上限为 62.5 时遇到了问题 - 回调时间。

与 setInterval 循环相比，使用 requestAnimationFrame 的真正区别是什么？

为了好玩，我制作了一个小的 HTML 画布可视化工具，我注意到它在 Chrome 中运行非常糟糕，在 Firefox 中非常糟糕，但在 Safari 中绝对令人惊讶，包括 iPhone 和 iPad！

谁能解释为什么？

我认为代码应该相当简单，但基本上我正在为鼠标（或触摸）位置绘制点，然后使用 drawImage 将画布复制到临时画布。从那里我清除显示画布，然后将临时画布复制回来（4 次），但应用一些东西，如旋转、偏移、透明度和缩放（并使用一些不同的 globalCompositeOperations），所有这些都使用 drawImage。所以总的来说，drawImage 在每个循环中被调用 5 次。

您可以在此处查看演示：http: //lakenen.com/vis.html

任何见解将不胜感激！

PS。如果可以的话，在 iPad 上试试这个；多点触控非常简洁:)

在我的应用程序中，我有一个画布，它的 CSS 大小（CSS，不是 html）会根据窗口大小进行更新。

我有一个主要的游戏循环，看起来像这样：

我的 requestAnimFrame 函数是来自 Paul Irish 的函数：

所以基本上问题是我记录的用于测量 requestAnimFrame 调用和有效函数调用之间时间的计时器完全改变了。如果我的浏览器处于全屏状态，我会得到 50/60 毫秒，如果我有一个小窗口，我可以达到 10 毫秒。

由于 requestAnimFrame 调用应该以 60fps 的节奏（我认为大约是 30 毫秒）不断调用函数，所以我不应该有这种结果，因为在计时器的创建和检查之间基本上没有发生任何事情，除了requestAnimFrame

我也有一些反复出现的微冻结（不到一秒），每 2/3 秒发生一次。但是计时器没有检测到时间的任何变化（就像javascript的时间计数器被阻止一样）

我的计时器功能是这样的，但在这里并不重要

刚刚在运行 10.7.1 的 Mac 上将 Chrome 从 17 更新到 18.0.1025.142，它扼杀了我们网站的性能。我们一直在使用 translate3d 来在屏幕上移动大量项目。我正在使用 requestAnimationFrame 制作动画。在 17 中，我们获得了超过 50fps 的帧速率。现在幸运地获得了 15fps。这真的很糟糕。

默认情况下是否关闭了硬件加速？其他人注意到这样的问题吗？我注意到字体渲染已经得到改进，现在与 Safari （运行网站精美）相当，也许这种变化对一般渲染性能产生了影响？

恐怕由于保密协议，我无法分享链接。但任何帮助将不胜感激！

更新：

据我所知，它仍然是 GPU 加速的，但性能真的很差，其他人也报告了类似的事情。v19 的 Chromium 版本似乎回到了旧的性能质量。

启动 chrome --show-composited-layer-borders 时曾经有一个标志，它会在 gpu 加速元素周围放置红色边框。此选项现在似乎已添加到 chrome://flags/ 中，但它在图层周围绘制绿色边框，并且似乎不再区分 gpu 元素。有谁知道显示元素是否由 gpu 呈现的选项？

chrome://gpu/ 说一切都在硬件加速......

我正在编写一个 jquery 插件来在画布中渲染图像。

最终目标是实现类似

该插件需要几个类、herpers 和其他一些 jquery 插件才能正常工作。

所以假设我依赖于

• 鼠标滚轮jQuery插件
• 一个缓存库，它不是一个 jquery 插件，而是一个带有原型和一些枚举的对象

我有一个动画引擎，它是一个需要全局变量（或至少在插件级别）的循环

我必须定义我自己的对象

• 观点
• 长方形
• 视口
• 图像源
• 动画1

所以我的尝试是这样的：

所以我的问题是：

• 你觉得走这条路好吗？
• 如果我这样做，ImageSource 的定义将在插件之外不可用
• 我是否应该放弃 ImageSource 对象来使用数组，所以我对对象定义没有问题
• 插件内部定义的全局变量的生命周期是怎样的，比如动画，会一直可用吗？
• 使用动画之类的变量是最佳做法，还是使用 .data jquery 函数更好，但在这种情况下如何共享变量？

提前感谢您的帮助

弗雷德

我正在开发一个资源相当匮乏的 Web 应用程序，该应用程序严重依赖 Raphael.js 来处理大约 50% 的动画，其余部分我推出了自己的动画方法，它使用 webkitRequestAnimationFrame 和 Web Audio API 的 context.currentTime将动画与音频组件同步。

目前我的表现非常糟糕，通过 Raphael 的源代码，我发现它也使用了 requestAnimationFrame。我遇到的大部分延迟似乎都发生在我的动画和拉斐尔的动画同时运行时。这是因为 requestAnimationFrame 基本上每个绘制周期被调用两次吗？

基本上我要问的基本上是我是否必须为 raphael 对象重新滚动我自己的动画实现并将其与我现有的 requestAnimationFrame 一起使用？

我正在使用 chrome 中的 requestAnimationFrame 在 raphael 中运行一个简单的视图框动画。我注意到所有脚本和渲染任务都已完成，但我仍然看到 30 到 60 毫秒之间的“死区”，看起来浏览器坐在那里无所事事。对此有任何见解吗？