Jquery 网页上多个html5画布元素的计时实践

Jquery 网页上多个html5画布元素的计时实践,jquery,animation,canvas,html5-canvas,Jquery,Animation,Canvas,Html5 Canvas,我发现了一些关于使用请求动画帧为html5画布元素制作动画的文章 如果我有多个元素,我应该为每个元素单独设置一个计时系统(一个单独的脚本),还是应该在一个循环中设置所有元素 这是一个杂志概念,其中你可能有一个不同的动画每个“页面”(一个是一系列的线,另一个是波浪,也许另一个在你阅读文本时分解你眼前的图像) 任何帮助都会得到感激。这完全取决于你。是否希望元素彼此同步运行?还是没关系 如果这不重要,或者您需要同步它们,请使用一个计时器将它们保持在一个循环中。它在每个浏览器上都可能更快,并且更容易调试

我发现了一些关于使用请求动画帧为html5画布元素制作动画的文章

如果我有多个元素,我应该为每个元素单独设置一个计时系统(一个单独的脚本),还是应该在一个循环中设置所有元素

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


任何帮助都会得到感激。

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

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


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

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

  • 如果一个画布中的动画速度较慢,则另一个画布中的动画将不得不不必要地等待
  • requestAnimationFrame帮助您创建智能循环,即如果画布处于隐藏状态或选项卡未处于活动状态,则不会对画布进行回调。在同步的情况下,您将无法完全优化。
    • 在一个循环中管理所有动画比单个循环更复杂
  • 调试时,您可能会遇到由页面中的其他动画引起的问题
因此,如果您的动画不相关,我强烈建议不要将动画与一个循环同步。希望这能回答你的问题

以下链接将帮助您了解有关Html5画布的更多信息


谢谢。同步不重要。。。只是想知道编码是否更容易。我一直很难让两个独立的计时器处理一个“问题”,这是一个单页web应用程序。