在JavaScript中制作并发画布动画？

Question

我最近在学习JavaScript画布，我提出了两种制作动画的方法。我搜索谷歌一段时间，但无法确定哪种方式是正确的。

假设我想要使用30 fps渲染不同的对象在画布上做不同的事情。有两种方法可以实现这一目标。

对于这两种方式，应该有一个主setInterval函数draw所有对象都是30fps。

1. 每个对象都有一个nextframe(user_response)方法，它根据用户响应更改此对象的“状态”，并由主setInterval调用30次ps。主setInterval需要以某种方式将用户响应传递到每个nextframe(...)，并为每个对象调用draw。 - 这种方法的问题是，每帧调用所有对象的所有nextframe，占用系统资源。

2. 对象使用setInterval实现自己的动画方法。根据用户响应调用这些方法，每秒更改对象“状态”30次。并且主setInterval函数仅以30fps为每个对象调用draw，表现得像每个对象状态的“拍照”。对象状态在其他线程中独立更改。所以总有一个30fps的主线程正在运行，如果有m个对象动画，而n对象此刻没有动画，那么总共有(m+1)个线程 - 问题因此，当许多对象被动画化时，我运行了很多线程，这也占用了系统资源。

那么，哪一个更合适呢？还是他们都错了？产品：＆gt; 提前谢谢你！

Answer 1

第二个是好的。除了你应该使用requestNextAnimationFrame而不是setInterval。

要解决资源问题，可以在draw（）方法中添加条件，以避免在不需要时重绘。但我认为你需要为每个帧重绘，因为你必须清理你的舞台以绘制移动的物体。