【发布时间】：2012-01-12 21:09:01
【问题描述】：
我是 html5/CSS3/jquery 的新手，我正在做这个（尚未完成）： http://catherinearnould.sio4.net/autres/kat/ 问题是，由于带有粒子的大画布，动画不像它可以的那样流畅。 所以如果你觉得无聊，不要犹豫，看看我的代码，给我一些建议来提高流动性^^
非常感谢！
【问题讨论】：
【发布时间】：2012-01-12 21:09:01
【问题描述】：
对于一个使用 RequestAnimationFrame() 而不是 setTimeout() 可能会使事情更顺利。请参阅 Paul Irish 他的博文 requestAnimationFrame for smart animating。
【讨论】：
-
嗯，完成了，但稍微好一点。我认为这是因为背景图片
-
... 另一个问题是 cancelAnimationFrame 仅适用于 Chrome：/
-
大多数时候你不需要cancelAnimationFrame。只是不要再调用 requestAnimationFrame() 了。
性能大幅下降很可能是由实时计算/渲染的 CSS 属性（例如透明度、阴影和圆角）引起的。
还要注意导致重排的 DOM 元素更改代价高昂（例如动画），请参阅http://code.google.com/speed/articles/reflow.html。
运行后我看到了很大的不同：
$('*').css({backgroundColor:'transparent', opacity:1, boxShadow:'none'});
如果可以，请将所有（半）透明和圆形图形替换为等效的 png 图像。
【讨论】：
-
好的，我改变了半透明和动画的顺序，现在我觉得很好看。谢谢！
您还可以考虑对某些动画使用 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 中，您可以为渲染获得硬件加速。
对于画布元素，我对此几乎没有经验，但我对您正在创建的效果很感兴趣。但是我觉得一开始的海量canvas动画有点多，已经有这么多，也许不需要那个效果？只是我作为用户的看法。
【讨论】：
-
嗯，其实你是对的，我想我必须使用CSS3而不是js作为背景。 （当我关闭 js 背景时，patricles 运行良好）我将为 IE 制作另一个脚本（该死，我教的问题会随着它而结束）
-
好的，我尝试了 CSS3 背景，但图像背景上的过渡是不可能的，因为它是一个字符串（正如我所读的那样）。所以，现在我改变了动画的顺序，对我来说看起来很不错^^