javascript - RaphaelJS - 同步动画

Question

我的乒乓球生成得非常稳定，但是利率动态变化。所以在给定的一秒钟内，可能会有 1 乒乓球正在绘制并在屏幕上平移的球(不断从左到右)或 50。

我有一个乒乓 Racket ，它会根据这些的生成做出响应球，它应该“接住”每一个球被送往目的地。 x 坐标始终是相同，因为乒乓 Racket 永远不会移动，但 y 坐标是随机生成。

这是一个非常相似(如果不完全相同)的例子做:http://www.youtube.com/watch?v=HeWfkPeDQbY

我已经写了很多这样的代码，但恐怕我的设计 catch 的方法不正确/效率低下。它有效，但是 Racket 很容易与正在打球的球不同步扔向它。

我目前这样做的方法是将每个球对象放入全局数组， Racket 弹出队列中的下一个球，然后使用基本算法来计算它需要的速度转换为下一个球的 y 坐标。

有没有更有效的方法？

Answer 1

我假设问题是每个球(和 Racket )的运动都由一个单独的计时器控制。由于无法保证 js 计时器的准确性，因此真的无法保证有多少计时器会交互。

纠正该问题的两种主要方法是:

1. 不使用 raphaeljs 动画基元，而是使用 setTimer 自己实现一个同步动画，同步更新每个球(和 Racket )的位置。然后，任何计时器卡顿都会一致地应用于您的宇宙中的所有元素。

2. 使用反馈来修正桨的位置，例如通过一个特殊的 setTimer 定期查看 Racket 离它需要的位置有多近，并在必要时调用 Racket 动画的 .stop() 以便使用更积极的参数重新执行，缩小差距。