问题标签 [requestanimationframe]

我正在用 JavaScript 开发一个游戏，我很困惑我应该使用哪个 - window.webkitRequestAnimationFrame或者setInterval移动我的游戏角色。

从单个图像开始，我希望它在每次单击图像时循环播放三个动画。我创建了这个开关：

1 个静态 + 3 个动画状态。

我的动画使用了 Paul Irish 的 requestAnimframe Polyfill 然后：

每个动画基本上都是相同的代码，但图像不同。该代码在我直接测试时有效，但当我复制到交换机时它将不起作用。

我尝试使用多种方法将它们插入我的交换机，但似乎无法正常工作。有小费吗？谢谢！

我有一个看起来像这样的应用程序对象构造函数：

然后当我这样做时：

我得到：

因为在调用 requestAnimationFrame 时，循环函数内部的 this-value 被设置为 window。

有人知道如何调用 requestAnimatinFrame 并将“theApp”对象设置为 this 值吗？

我正在玩，requestAnimationFrame但我在 Chrome 以外的任何其他浏览器中都得到了非常生涩的动画。

我创建一个这样的对象：

现在我只是在画布元素上绘制一个矩形并移动它。这是处理器上非常轻量级的操作。这在 Chrome 中运行得非常顺利，当我控制台记录 delta 值时，它几乎在 ~17 左右一致。但是，如果我在 Firefox 或 Safari 中执行相同操作，我会得到以下 delta 值：

看起来浏览器似乎没有很好地与显示器同步，并且在除 Chrome 之外的所有其他情况下，使用旧的 setTimeout 方法（将 16 毫秒作为目标超时）可以获得更流畅的动画。

有谁知道，是否可以requestAnimationFrame在 Chrome 以外的浏览器中使用更流畅的动画？有没有人成功获得比 Firefox 上面发布的更稳定的 delta 值？

我正在尝试用 javascript 探索动画，并决定制作一个小游戏，让玩家在遇到障碍物时跳过障碍物。它似乎工作正常（虽然代码有点乱）。我唯一的问题是，当玩家试图跳过障碍物时，动画的帧速率会大幅下降；从大约 60fps 到 40fps。尽管环顾四周，我不知道如何阻止这种情况发生……我的 CPU 几乎没有发现差异，所以我有点难过。谁能告诉我应该如何使用requestAnimationFrame()而不是setInterval()我以前使用的方法。

这是到目前为止我所拥有的非常粗略的大纲：http: //embracelondon.com/file_host/g-cycling/index-2.html

我有一个使用 requestAnimationFrame() 的 animate() 循环的“简单”游戏：

我想运行 drawCollision() 代码 5 秒，所以我做了这样的事情：

但是，两个 rAF 调用似乎同时运行？或者，在运行 drawCollision 时至少执行调用 drawCollision() 之后的代码。

尽管我使用了基于 Javascript 的 Unity 的 UnityScript，但我几乎没有使用 Javascript 的经验。

在 UnityScript 中，有一个Update()函数可以在游戏的每一帧执行函数中的命令。有什么办法可以在香草 JavaScript 中做到这一点吗？

任何帮助将非常感激。

我已经解决这个问题好几天了。我第一次在构造函数模式中编写了我的代码。我想在过渡中扩展 10 条贝塞尔线的高度。我尝试过 kineticjs（我失败），尝试过 Setinterval（创建 jerk在动画中）。所以我最终求助于 requestAnimationFrame。但是由于这种构造函数模式，我完全不知道在哪里包含它以及要进行哪些更改。

这就是我到目前为止所做的——JSFIDDLE

所以基本上我将在过渡中扩展我的 endY 和 cpY1 和 cpy2。在画布的鼠标悬停时，所有贝塞尔线的高度必须在过渡中增加，使其具有动画般的感觉。

JAVASCRIPT：

如果我正在做多个动画，添加多个requestAnimationFrame回调是否可以提高性能？前：

或者它被证明比使用单个回调更糟糕：

我问是因为我真的不知道幕后发生了什么，requestAnimationFrame当你多次调用它时排队回调？

这就是我想要实现的——GRASS Animation (Desired Animation)

这就是项目目前所处的位置——我的头发动画

这是上面代码更结构化的代码--我的头发动画（by markE）--markE的头发动画代码

问题： -

我可以给头发运动，但动画应该更像是自由流动的波浪草。现在不是很平滑。可以做些什么来让头发以更自然的方式流动。如果可能的话，请给我一个小样品！！！

JAVASCRIPT