问题标签 [requestanimationframe]

我想更改视口内元素的背景颜色（使用overflow: scroll）

所以这是我的第一次尝试：http: //jsfiddle.net/2YeZG/

如您所见，在绘制新颜色之前，先前的颜色会短暂闪烁。其他人也有类似的问题。

按照HTML5 Rocks 的说明，我尝试引入requestAnimationFrame来解决这个问题，但无济于事：

http://jsfiddle.net/RETbF/

我在这里做错了什么？

这是一个显示相同问题的更简单示例：http: //jsfiddle.net/HJ9ng/

在此处提交了 Chromium 的错误：http ://code.google.com/p/chromium/issues/detail?id=151880

我已经设置了以下 jsFiddle http://jsfiddle.net/ZbhQY/4/

我使用了一个小的 requestAnimationFrame polyfill 并将结果返回给 window.reqeuestAnimFrame 这一切工作正常，并且对该函数的所有调用都按预期工作。

如果我将其更改为返回 game.reqeuestAnimFrame 并将所有对 window.reqeuestAnimFrame 的调用替换为新的 game.reqeuestAnimFrame 它不再起作用。

有人可以解释为什么会这样以及我能做些什么来完成这项工作吗？谢谢。

我正在尝试为我的网站背景创建 webgl 动画，灵感来自“threejs - 云示例”（http://mrdoob.com/lab/javascript/webgl/clouds/）。在我的电脑上看起来相当不错......但对于某些电脑来说它很慢。

有没有办法进一步优化我的代码，并检测显卡是否不支持 webgl ？

我的动画（背景）：http ://wabeo.fr/?theme=auriga-7

我的代码：

谢谢你的帮助 ：-）

我从http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating获得了以下 RequestAnimationframe 函数

我正在尝试使用它。但不知道如何调用它和使用它。谁能给我一个简单的例子。我是这个 html5 动画的新手，所以你可以理解..

我将非常感谢任何帮助！功能如下。。

我将 Box2D 与 WebGL 一起使用。Box2D 需要恒定的帧速率（“世界”更新的时间步长）。

但我已经读过定义如下的 requestAnimFrame 是正确的方法。

requestAnimFrame 没有给我一个恒定的帧速率，所以我的 Box2D 的变量是不同步的。

有解决办法吗？

[编辑]

实施时约翰（Cutch）的解决方案如下所示：

请注意，我的物理更新函数负责next_attribue设置 s。而且，update在此之前调用了一个物理，以使物理世界领先一帧。

结果

动画相当流畅，除了那些我可以看到一些非常糟糕的跳跃和随机出现的微动的时候。

我认为解决方案中没有解决以下问题：

----> 1) dt可能会变得大于time_step：这将dt/time_step大于 1，这会破坏插值方程。

当dt仍然大于time_step一致时，问题会增加。是否有可能克服时间间隔变大的问题time_step？

我的意思是，即使我们将世界保持在渲染之前一帧，如果时间间隔始终大于time_step，那么“提前”帧也不会花费很长时间。

----> 2) 想象dt不到time_step1 毫秒。然后，世界不会更新那一次。现在插值完成并找到了近似位置（比它应该在的位置晚 1 毫秒）。

可以说下一次dt和之间没有区别time_step。

现在，考虑到这一点，没有进行插值dt并且time_step是相等的。那么，下一个绘制的是世界上的“前方”框架，对吗？（使用这些方程，用t = 1）

但准确地说，渲染的世界应该是它之前的 1 毫秒。我的意思是，它落后于世界框架的 1ms 不应该消失。但是用t = 1, 绘制物理世界框架并忘记了 1ms。

我对代码或以上两点有误吗？

我请求你澄清这些问题。

[编辑]

我在那里的评论中询问了这个网页的作者，寻找一种有效地绘制许多形状的方法。

我学会了这样做：我 bufferData通过为每个形状保存单独的缓冲区来保存调用，并且createBuffer在初始化期间只调用一次bindBuffer。bufferData

每次刷新屏幕时，我都必须遍历所有形状，并且必须在绑定所需形状的缓冲区（使用）之后调用enableVertexAttribArray和。vertexAttribPointerbindBuffer

我的形状不会随着时间而改变。它们中只有很多种（如多边形、圆形、三角形）从头到尾都保持不变。

请求一个动画帧来开始 CSS 过渡是否有意义？

例如，Mozilla CSS 转换页面包含指向此jsfiddle 示例的链接：

CSS：

JavaScript：

如下重写这个例子是否有意义？（见这个 jsfiddle）

JavaScript：

感谢您的任何回答。

我注意到，每当我停靠浏览器窗口或切换选项卡时， requestAnimationFrame 都会停止被调用（我希望会发生这种情况）。

有没有办法检测何时发生此停止？

原因是，我的游戏中有一个计时器。当 requestAnimationFrame 不再呈现时，我想停止计时器。

我已经查看了“window.blur”和“window.focus”事件，但这些与 requestAnimationFrame 何时停止和启动无关（例如，当您在浏览器窗口外单击时触发 window.blur 事件但 requestAnimationFrame 保持跑步）。

我想订阅 requestAnimationFrame 何时开始和停止。你知道方法吗？

I am encountering a strange situation with Safari on iPad. I do have a spritesheet-based animation sequence that you can play in a "ping-pong" manner: you click once, it plays forward until its last frame, you click back, it plays backwards again until it reaches frame 1.

The JS I use for that looks like:

This works perfectly fine in all desktop browsers, yet Safari on the iPad won't stop requesting animation frames, the animation will "overflow" until the image is long gone (via its margin), but when I log the number or requestAnimationFrame calls (I am using the Paul Irish shim btw - yet it makes no difference if I use webkitRequestAnimationFrame) I can see that the recursive pingpong calls never stop in iOS (on the desktop they do). Also, trying to cancelAnimationFrame the id of my calls makes no difference.

Is my understanding of requestAnimationFrame flawed or am I missing something different here? Is there a difference in the new Date().getTime() behavior on the iPad? I am currently with a setInterval based solution, but I am really completely ridiculed by this behavior so I thought someone might now where I am wrong here?

我正在阅读一篇关于HTML5Rocks的文章，该文章给出了一个关于滚动网页并检查 DOM 元素数组 offsetTop 以查看它们是否应该可见的示例。

文章说这样做的最佳实践方法是在每次触发滚动事件时使用窗口当前偏移量顶部更新变量。当第一个滚动事件被触发时，它会触发 requestAnimationFrame 过程来检查 DOM 元素的 offsetTop。这将可见性逻辑与滚动事件分离。

虽然我理解肯定将这两个进程解耦的好处（因为滚动事件可以每秒调用数百次），但我看不到在第一个滚动事件后每 16 毫秒运行一次可见性逻辑的好处，无论是否用户是否继续移动..

有人可以解释一下我在这里缺少的过程的哪一部分吗？

http://updates.html5rocks.com/2012/05/requestAnimationFrame-API-now-with-sub-millisecond-precision告诉我，最近（Chrome 20）requestAnimationFrame 获得了一个新的亚毫秒精度计时器，并且我有更新我的代码以支持它。

环顾四周的各种 polyfill，它们似乎都早于这次更新。它们是否以某种方式起作用（我不这么认为），还是根本没有可用的最新版本？我应该自己做计时吗（似乎有点浪费）。