RaphaelJS - 同步动画

时间:2011-01-31 00:36:22

标签: javascript raphael

我有非常一致的乒乓球,但是 利率动态变化。所以在一定时间内,可能会有1个乒乓球 在屏幕上绘制和翻译的球(不断地 从左到右),或50.

我有一个乒乓球拍根据这些的产生做出反应 球,它应该“抓住”每一个球 被送往目的地。 x坐标始终是 同样,因为乒乓球拍从不移动,但是y坐标是 随机生成。

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

我已经写了很多这样的代码,但我担心我的设计 用于接球是不正确/低效的。它有效,但是 桨很容易与球正在变得不同步 向它投掷。

我现在这样做的方法是将每个球对象放入一个 全局数组,并且paddle弹出此队列中的下一个球 使用基本算法来计算它需要的速度 转换为下一个球的y坐标。

有更有效的方法吗?

1 个答案:

答案 0 :(得分:2)

我认为问题在于每个球(和球拍)的运动是由一个单独的计时器控制的。由于无法保证js计时器的准确性,因此确实无法保证有多少计时器会相互影响。

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

  1. 不使用raphaeljs动画原语,而是使用setTimer自行实现同步动画,同步更新每个球(和球拍)的位置。然后,任何计时器断断续续地应用于Universe中的所有元素。

  2. 使用反馈来校正桨位置,例如通过一个特殊的setTimer定期查看paddle与它需要的距离,如果有必要,在paddle的动画上调用.stop(),以便用更激进的参数重新执行,缩小差距。