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

【问题标题】：Making concurrent canvas animations in JavaScript?在 JavaScript 中制作并发画布动画？
【发布时间】：2014-11-12 15:35:05
【问题描述】：

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

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

对于这两种方式，应该有一个主要的setInterval 函数，draw 以 30fps 的速度处理所有对象。

每个对象都有一个nextframe(user_response) 方法，该方法根据用户响应更改此对象的“状态”，并由主setInterval 调用30 次ps。主要的setInterval 需要以某种方式将用户响应传递给每个nextframe(...)，并为每个对象调用draw。 --这种方法的问题是所有对象的所有nextframe都是按帧调用的，占用系统资源。
对象使用setInterval 实现自己的动画方法。这些方法根据用户响应被调用，每秒改变对象“状态”30 次。而主要的setInterval 函数仅以30fps 的速度为每个对象调用draw，其行为就像对每个对象的状态进行“拍照”一样。对象状态在其他线程中独立更改。所以总是有一个30fps的主线程在运行，如果有m对象动画和n对象没有动画，那么总共有(m+1)线程——这个问题是当很多对象动画我有很多线程在运行，这也占用系统资源。

那么，哪种方法更合适呢？还是他们都错了？ :> 提前谢谢你！

【问题讨论】：

【解决方案1】：

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

为了解决你的资源问题，你可以在draw()方法中添加条件，避免不必要的重绘。但我认为你需要为每一帧重新绘制，因为你必须清除你的舞台才能绘制移动的对象。

【讨论】：