在大画布上制作 HTML5 流体粒子
我是 html5/CSS3/jquery 的新手，我正在制作这个（尚未完成）： http://catherinearnould.sio4.net/autres/kat/ 问题是，由于带有粒子的大画布，动画不够流畅。 所以如果你觉得无聊，请不要犹豫看看我的代码并给我一些建议来提高流畅性^^
非常感谢！
I'm a newbie in html5/CSS3/jquery, and I'm making this (not finished yet):
http://catherinearnould.sio4.net/autres/kat/
The problem is that, because of the large canvas with particles, the animations are not as fluid as it could.
So if you're bored, don't hesitate to have a look at my code and give me some advice to improve the fluidity ^^
Many thanks!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
对于使用 RequestAnimationFrame() 而不是 setTimeout() 的人来说，可能会让事情变得更顺利。请参阅 Paul Irish 的博客文章用于智能动画的 requestAnimationFrame。
For one using RequestAnimationFrame() instead of setTimeout() is likely to make things smoother. See Paul Irish his blog post requestAnimationFrame for smart animating.
巨大的性能影响很可能是由实时计算/渲染的 CSS 属性（例如透明度、阴影和圆角）引起的。
另请注意，对 DOM 元素进行更改会导致重排（例如动画），代价高昂，请参阅 http://code.google.com/speed/articles/reflow.html。
运行此命令后，我看到了很大的差异：
如果可以的话，用等效的 png 图像替换所有（半）透明和圆形图形。
The big performance hits are most likely caused by live calculated/rendered CSS attributes such as transparency, shadows and rounded corners.
Also be aware of that changes to DOM elements which cause reflow is costly (such as animations), see http://code.google.com/speed/articles/reflow.html.
I see a big difference just after running this:
If you can, replace all (semi-)transparent and rounded graphics with equivalent png images.
您还可以考虑对某些动画使用 css3 过渡，并向元素删除和添加新类以更改其样式，而不是使用 javascript(jQuery)。使用 jQuery 作为旧版浏览器和 IE 的后备。
http://www.w3.org/TR/css3-transitions/
http://net.tutsplus.com/tutorials/html-css-techniques/css-fundametals-css-3-transitions/
这使浏览器能够进行渲染，并且在某些情况下（例如在 iOS 中），您可以使用硬件加速来进行渲染。
对于画布元素，我对此缺乏经验，但我对您创建的效果感兴趣。但我觉得一开始的大量画布动画有点多了，已经发生了这么多，也许不需要那个效果？只是我作为一个用户的看法。
You could also think of using css3 transition for some of your animation and removing and adding new classes to the elements to changes their styles rather than doing it with javascript(jQuery). Use jQuery as a fallback for older-browsers and IE.
http://www.w3.org/TR/css3-transitions/
http://net.tutsplus.com/tutorials/html-css-techniques/css-fundametals-css-3-transitions/
This gives the browser the power to do the rendering, and in some cases like in the iOS you can get hardware accelerated for the rendering.
For the canvas element, I have little experience with that, but I'm interested in that effect you're creating. But I think the massive canvas animation at the start is a bit much, there is so much going on already, maybe there is no need for that effect? Just my opinion as a user.