问题标签 [requestanimationframe]

我正在构建一个使用 requestAnimationFrame 进行视差滚动的网站。有多个部分，每个部分都有一个全尺寸的背景图像和一些中间和前景图像。我已经设法通过 requestAnimationFrame 相对顺利地获得了这个动画，但动画中仍然偶尔会出现抖动。

通过在帧模式下查看 Chrome 的时间线，我可以看到导致“卡顿”的进程被标记为“图像解码”。此外，一旦动画完成一次，卡顿就不会再次发生。

似乎大多数浏览器现在都推迟了对尚未显示的图像的解码。有没有一种方法可以在用户不可见的情况下预解码（不仅仅是预加载）图像？

I whipped up a simple little spinner widget based on the Windows 8 loading animation, and I haven't been able to figure out why each dot appears to jitter slightly. I've tried various things to normalize the values and haven't found anything that has smoothed it out.

http://jsbin.com/ilafov/16

What am I doing wrong?

刚刚发现requestAnimationFrame，我已经深入研究了所有我能找到的关于它的信息。仅举几个我遇到的资源，以防其他人在寻找有关它的更多信息：

• http://creativejs.com/resources/requestanimationframe/ - 解释有关它的基础知识。
• http://www.html5rocks.com/en/tutorials/speed/animations/ - 解释如何使用它。

无论如何，所有这些资源都告诉我一些关于它是如何requestAnimationFrame工作的或者它可以/应该如何使用的信息，但是它们都没有告诉我什么时候使用它是正确的。

• 我应该将它用于动画吗（重复更改元素的样式，就像 CSS 动画一样）？
• 当自动化事件想要更改一个或多个元素的 css/类时，我应该使用它吗？
• 当自动化事件想要更改一个或多个元素的文本值时，我应该使用它吗？（例如每秒更新一次时钟的值）
• 当自动化事件想要修改 DOM 时，我应该使用它吗？
• 当自动事件需要 .offsetTop、.offsetLeft 之类的值，然后想要更改诸如 top 和 left 几行之类的样式时，我应该使用它吗？
• 当用户生成的事件导致上述任何更改时，我应该使用它吗？

TL;DR：什么时候使用 requestAnimationFrame 合适？

我尝试运行示例：http ://tutorials.jenkov.com/html5-canvas/animation.html 。
但它在 Opera 12+ 上给了我以下错误：
未捕获的异常：TypeError：'reqAnimFrame'不是函数。

谢谢斯内哈
_

我正在使用动画构建一个 jQuery 应用程序。

目前，requestAnimationFrame如果我最小化浏览器或更改浏览器选项卡，API 会暂停动画，然后当我回到我的应用程序时，它会再次启动。

是否可以避免这种暂停，以便在我离开当前选项卡时动画继续运行？

对于 HTML5 游戏，带有适用于移动设备的画布动画。

我面临一些性能问题，这些问题使每个设备与其他设备之间的速度不同。

requestAnimationFrame根据设备速度加快游戏动画的速度。
setInterval让我震惊的是，从一个设备到另一个设备存在延迟。
setTimeout也会减慢画布上的绘图速度。

谁有过移动 HTML5 游戏的经验，可以指导我抛出其中三个（或其他技术，如果可用）的最佳方法，以便在画布上开发动画在不同的移动设备上保持稳定？

所以我一直是一个优秀的网民，使用功能检测来查看浏览器是否支持requestAnimationFrame，否则只能退回到setTimeout基于 - 的解决方案（类似于Paul Irish 的著名帖子）。

在 Internet Explorer 10 出现之前，这在任何地方都非常有效。在 IE10 中，time传递的参数似乎与当前时间没有任何关系，搞砸了timePassed.

这是怎么回事？

以下导致错误（FF、Chrome 和？）：

JSFiddle 娱乐

完整的上下文是：

FF - mozRequestAnimationFrame() 中的错误如下： NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object

Chrome - webkitRequestAnimationFrame() 中的错误如下： Uncaught TypeError: Illegal invocation

在线上：

日志读取打印出“准备好”，但没有“完成”

如果我只使用一个函数而不是本机 RAF 方法，它可以工作（记录“完成”）：

JSFiddle 娱乐

RequestAnimationFrames 发生了什么？

1. 普通JS中的以下内容是什么？

   $(window).scroll(function() { });

2. 我也在寻找动画滚动，例如：

   $('html, body').animate({scrollTop:1750}, 'slow');

我应该使用requestAnimationFrame吗？

http://paulirish.com/2011/requestanimationframe-for-smart-animating/

是否有任何示例在单击时触发动画而不是连续渲染？

所以我有一个小球在屏幕上移动，我想计算 FPS。我正在使用 KineticJS (4.3.1)，它在后台使用 requestAnimationFrame。

'frame' 对象有一个 time 属性，可以使用 frame.time 访问它，它测量自动画首次启动以来的时间（以毫秒为单位）。

什么是测量 FPS 的准确方法？