Javascript 多物体的运动速度

我有一个小小的html画布应用程序，我使用kinetic js来制作几百个沿着各条线移动的小圆圈的动画。它工作正常，但有时可能有点慢。我希望能够将其放大到几千，并让它在每一帧上更新每个圆。我怎样才能使它更快？在这方面，是否有比kinetic js更好的替代方案？谢谢

以下是一个示例：

---

您没有让用户与您的跑步者圈子互动

由于您不需要Kinetic.Circles提供的交互性，您可以通过在一个Kinetic.Shape上绘制所有跑步者，而不是创建数十万个单独的Kinetic.Circles，来获得速度提升的幅度

形状为您提供了一个上下文，在该上下文上，您可以使用原生上下文.arcx，y，radius，0，PI2更快地绘制非交互式圆

如果以后需要交互性，可以快速测试鼠标位置与每个跑步者对象的数学关系

---

祝你的项目好运

不知道那页上发生了什么。这个脚本似乎不知怎么搞混了。你能发布一个JSFIDLE吗？我最初的问题是你是如何完成你的主要游戏循环的。我早期的一个错误是允许移动基于帧率，而不是自上次运行主循环以来经过的时间量。非常感谢！这就是我要找的。对于仍然感兴趣的人，我做了一个小提琴，在那里你可以把许多点分散在许多方向上。我会尝试让它们都处于相同的动力学形状。实际上，你能详细说明一下吗？我不需要交互性，但我仍然需要每个圈按照自己的节奏走自己的路。下面是一个简单的小提琴示例：。在实际项目中，每个kinetic.circle都会跟踪它所遵循的路径和速度。明白了。所以这些圆不再是物体了。在动画中，使用setDrawFunc根据相应的runner对象完全重新绘制所有圆。这使得它非常平滑，多达几千个。也许要1万2万太多了。确切地说，每个跑步者都是使用context.arc绘制的对象。实际对象取决于您的设计需要。例如，runner对象可以有currentX、currentY、leg1time、leg2time等信息。然后可以有一个对比赛计时的elapsedTime变量。要使跑步者处于当前XY状态：首先确定跑步者在该时间段上的腿。然后以百分比的形式计算跑步者在该腿上的进步程度。然后以该百分比沿该曲线插值适当的XY。