多个 HTML5 画布动画

Question

我在不同的 AngularJS 指令中有多个 HTML canvas 元素。这些元素中的每一个都使用requestAnimationFrame 进行动画处理。

1. 性能如何？是否可以为每个 canvas/directive 调用 requestAnimationFrame 或者使用一个 service 和 callback 函数来更好地渲染函数？
2. 在绘制内容之前，在渲染函数内部进行了大量的计算。对于每一帧，这些计算都是必要的。这应该在requestAnimationFrame 调用之前完成，还是可以在调用之后进行大量计算？

Answer 1

requestAnimationFrame 将为同一帧完成所有请求，尽管我不确定请求的顺序是什么。我假设它们的顺序与请求的顺序相同。

多帧请求或单帧请求调用多个函数之间的差异是微不足道的。这将是一种风格选择，而不是一种性能选择。

如果每个渲染帧都需要计算，那么让它们独立于帧请求运行是没有好处的，因为您必须找到一种方法让它们保持同步，这会增加开销。如果它们不依赖于帧，那么最好以任何能够保持应用平稳运行的速率来执行它们。