网页上多个html5 canvas元素的计时实践

时间:2011-09-26 15:38:33

标签: jquery animation canvas html5-canvas

我找到了一些关于使用请求动画帧来动画制作html5画布元素的文章。 http://paulirish.com/2011/requestanimationframe-for-smart-animating/

如果我有多个元素,我应该为每个元素单独设置一个计时系统(一个单独的脚本),还是应该在一个循环中将它们全部放在一起?

这是一个杂志概念,其中你可能每个'页面'都有一个不同的动画(一个是一系列的线,另一个是一个波,也许是另一个在阅读文本时在你眼前解体的图像)

任何帮助总是受到赞赏。

2 个答案:

答案 0 :(得分:1)

这完全取决于你。您是否希望元素彼此同步运行?或者没关系?

如果它无关紧要或者你需要它们同步,请用一个计时器将它们全部保持在一个循环中。它可能在每个浏览器上都更快,并且更容易调试,维护和理解代码。

如果他们不应该同步,那么你当然必须有两个计时器!此外,如果您觉得将来可能希望不同的部分以明显不同或不断变化的速度运行,那么您可能需要考虑两个计时器。

答案 1 :(得分:1)

我假设您将分别开发每个动画,并且这些动画彼此之间没有关系。在这种情况下你根本不需要同步...如果你在一个循环中同步它们,你将遇到以下问题......

  • 如果一个画布中的动画很慢,其他画布中的动画将不得不等待......
  • requestAnimationFrame帮助您创建智能循环,即如果隐藏的画布或您的选项卡未激活,则不会对画布进行回调。如果是同步,您将无法完全优化。
    • 在一个循环中管理所有动画而不是单个循环会更复杂。
  • 调试时,您可能会遇到页面中其他动画导致的问题......

因此,如果您的动画不相关,我强烈建议不要将动画与一个循环同步。希望这能回答你的问题。

以下链接将帮助您了解有关Html5 Canvas ...

的更多信息