问题标签 [requestanimationframe]

所以，我正在制作一个动画（不在网站/网页上！），它使用Javascript. 对于动画，我使用requestAnimationFrame而不是setInterval, 因为它setInterval不能很好地满足我的需要。

然而，虽然requestAnimationFrame在动力充足的设备上运行良好，但慢速设备无法跟上标准的 60 FPS，从而减慢了整个动画时间。

有没有一种方法可以让动画在一个时间范围内工作，并让 FPS 根据它跟得上的程度而变化？也欢迎其他想法。

（注意，我真的不想发布代码，只是相信我的话。我只是想要想法）

如果我有一个包含大量图像的页面，其中应用了很多 CSS 效果和 CSS 动画，我是否会通过循环使用与使用 jQuery 以编程方式将页面滚动到某个点“x”来获得window.scrollTo性能requestAnimationFrame提升$("html").animate({ scrollTop: "x" })？

Tl;DR — rAF +window.scrollto()与.animate({scrollTop: "x"})性能

谢谢！

requestAnimationFrame 是否与其他正常运行的javascript（即来自用户输入或来自setTimeout/setInterval）同时运行排队的函数？

我为我的个人主页编写了一个插件，它应该滚动浏览一系列元素，捕捉到每个元素 offsetTop。
我正在使用requestanimationframe来消除滚动事件，但有时会跳过幻灯片，我就是不知道为什么。此外，在 Chrome 和 Safari 上，我遇到了window.pageYOffset的问题可能小于 0 并且大于文档高度，因为这些浏览器在 mac（带有触摸板）上使用了某种缓和功能——你将如何处理？

这是代码：

希望有人可以提供帮助。谢谢。

我正在尝试在画布上沿对角线方向制作一个圆圈。我正在使用 requestanimationframe。它在所有浏览器中都能顺利运行，但在 Firefox 中却不行。动画进行时会不断闪烁。请有人告诉我我做错了什么。我需要在Firefox中以至少合理的速度平滑动画。

这是我的简单代码，也许有人可以指出我在这里缺少的东西..：

我正在努力使用请求动画框架创建线条绘制动画。当我使用 setInterval 函数时，一切正常，但我在某处读到请求 ani 帧更加优化，并且间隔中的所有函数都应该以这种方式编写。

所以这是我的代码：

var topMinX = 3; 变量 topMaxX = 75; var topMinY = 2;
变量 topMaxY = 2; 变量最小值；变量最大值；

问题是 xMin 值不会增加。它总是会警告 5，我希望它在每次迭代中增加 2。基本上我只想画一个正方形，所以我不需要任何对角线移动，这就是我添加方向参数的原因。

我是画布新手并请求 ani 框架，所以任何帮助都会更有用。

我正在开发一个利用视差滚动的网站。它在 chrome 中看起来很漂亮，但我想绘制到画布上的图像都没有在 Firefox 中呈现。我很困惑。

这是HTML：

和 Javascript：

谢谢！

我想比较 jQuery 的动画功能和纯 CSS3 过渡的性能。我发现有一个requestAnimationFrame API来衡量性能，但它似乎只能与 canvas 元素一起使用？

与CSS3和canvas相比，有什么好方法可以测试绝对定位的性能吗？

stats.js有用且值得信赖吗？你有什么经验？

我构建了这个jsPerf 测试。不幸的是 jQuery.on 方法没有被执行。:(

嗨，我在使用 webgl 和使用 requestAnimationFrame 时遇到问题，如果我继续调试动画很好，但只要我让脚本自由运行，我就会从浏览器收到一个无响应的脚本错误

这是我的html：

我的地球脚本文件

和循环代码：

我正在使用 HTML5 画布开发游戏，所以我有使用 requestAnimationFrame 调用的游戏循环。当我使用 Chrome 或 IE 时，它运行良好，稳定 60 fps 并且流畅。当我在 Firefox 上运行它时，问题就开始了。FPS 计数器超过 60 fps（设置在 65-70 左右），并且游戏体验一点也不流畅。如果它实际上运行超过 60 fps，我想我可能会丢失一些帧。这是我用于游戏循环的代码：

你对此有什么解释吗？这甚至可能是正常的，但我玩其他游戏，他们在 Firefox 上似乎根本没有这样的行为。

我试过这个解决方案：

http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating

但最终结果是一样的。