1

我是 html5/CSS3/jquery 的新手，我正在制作这个（尚未完成）： http ://catherinearnould.sio4.net/autres/kat/ 问题在于，由于带有粒子的大画布，动画不像它可以的那样流畅。因此，如果您感到无聊，请不要犹豫，看看我的代码并给我一些建议以提高流动性^^

非常感谢！

4

3 回答 3

1

对于一个使用 RequestAnimationFrame() 而不是 setTimeout() 可能会使事情变得更顺利。请参阅 Paul Irish 他的博客文章requestAnimationFrame 以了解智能动画。

于 2012-01-12T21:18:38.597 回答
0

巨大的性能损失很可能是由实时计算/渲染的 CSS 属性引起的，例如透明度、阴影和圆角。

另请注意，导致重排的 DOM 元素更改代价高昂（例如动画），请参阅http://code.google.com/speed/articles/reflow.html。

运行此命令后，我看到了很大的不同：

$('*').css({backgroundColor:'transparent', opacity:1, boxShadow:'none'});

如果可以，请将所有（半）透明和圆形图形替换为等效的 png 图像。

于 2012-01-13T01:36:50.143 回答
0

您还可以考虑对某些动画使用 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动画有点多，已经有这么多，也许不需要那个效果？只是我作为用户的看法。

于 2012-01-13T02:02:23.220 回答