css3制做动画性能问题

这篇文章主要讲的是怎样制做流畅动画，特别是针对移动端。在这里我首先介绍制做动画的几种方法的优缺点；接着会着重介绍用css3制做动画的注意事项。

1、用canvas、css3、jquery制做动画

Canvas

优势：性能好，强大，支持多数浏览器（除了IE6、IE7、IE8），画出来的图形能够直接保存为 .png 或者 .jpg的图形；

缺点：依赖于HTML，只能经过脚本绘制图形，没有实现动画的API（依靠事件和定时器更新）；因为在 canvas 上以编程方式显示的文本其实就是位图，所以搜索爬行器将彻底忽略文本。文本内容也没法被屏幕阅读器识别。

css3

优势：简单且与内容分离、css动画不触发layout和paint；（这些属性的修改不会触发layout和paint：backface-visibility、opacity、perspective、perspective-origin、transform）；

缺点：有浏览器兼容性问题、安卓手机会出现卡顿、受排版引擎的限制，与整个页面的dom结构息息相关。

Jquery

优势：没有兼容性问题；

缺点：每一帧，都要进行repaint、recomposite（很是耗时）；

总结：在移动端动画效果上，使用css3动画要比jquery动画效率高的多。在安卓手机上表现尤为明显！因此移动端动画以css3动画为优先，jquery只能用来简单处理应用逻辑。css3动画是用来给内容布局加上特效的通用解决方案，可是在性能堪忧的移动浏览器上极可能会受排版性能所限，达不到理想的效果。而对性能有要求的特定场景，好比游戏，用canvas会有很大的提升。

2、css3在移动端卡顿问题

Css3制做的动画在ios上跑的66的，可是在安卓上有时会出现卡顿现象。不妨从下面几点找找问题。

a、是否致使layout
若是是，尽量将动画元素absolute或者fixed化以免影响文档树，以减小重排.

b、是否启用硬件加速
“用到了CSS3动画”和“开启了硬件加速”是两件事情，虽然前者有可能致使后者。
开启硬件加速在webkit中有神奇的万金油：opacity: 1;或者-webkit-backface-visibility: hidden;。

c、是不是有高消耗的属性（css shadow、gradients、background-attachment: fixed等）
有的话，图片也是一种选择。这算得上是用空间换时间的优化了。

d、repaint的面积
若是是，只好缩小动画面积了。这一步的优化有限;

e、尽可能使用 transform 生成动画，避免使用 height,width,margin,padding 等；如如下例子1和例子2。

PS：使用 transform，浏览器只须要一次生成这个元素的位图，并在动画开始的时候将它提交给 GPU 去处理 。以后，浏览器不须要再作任何布局、 绘制以及提交位图的操做。从而，浏览器能够充分利用 GPU 的特长去快速地将位图绘制在不一样的位置、执行旋转或缩放处理。简而言之，transform 动画由GPU控制，支持硬件加速，并不须要软件方面的渲染

三、动画过程有闪烁（通常出如今动画开始）

-webkit-backface-visibility:hidden;

-moz-backface-visibility:hidden;

-ms-backface-visibility:hidden;

backface-visibility:hidden;

-webkit-perspective:1000;

-moz-perspective:1000;

-ms-perspective:1000;

perspective:1000;

例子1：

.ball-running { animation: run-around 4s infinite; } 

@keyframes run-around {

0%: { top: 0; left: 0; } 

25% { top: 0; left: 200px; } 

50% { top: 200px; left: 200px; } 

75% { top: 200px; left: 0; } 

}

例子2：

.ball-running { animation: run-around 4s infinite; } 

@keyframes run-around {

0%: { transform: translate(0, 0); } 

25% { transform: translate(200px, 0); } 

50% { transform: translate(200px, 200px); } 

75% { transform: translate(0, 200px); } 

}

例子2会比例子1看起来流畅多了。由于 transform 属性不会触发浏览器的 repaint，而 left 和 top 则会一直触发 repaint；