css实现动画机能优化-百分百源码网

css实现动画机能优化

发布时间：09/01 来源：未知浏览：关键词：

一、使用css，jquery，canvas制作动画

1、Canvas

长处：机能好，强大，支撑多数阅读器（除了IE6、IE7、IE8），画出来的图形可以直接留存为 .png 或者 .jpg的图形；

缺陷：依靠于HTML，只能通过足本绘制图形，没有实现动画的API（依托事件和按时器更新）；由于在 canvas 上以编程方式显示的文本其实就是位图，因此搜索爬行器将完全忽略文本。文本内容也没法被屏幕阅读器识别。

2、css3

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

缺陷：有阅读器兼容性问题、安卓手时机显现卡顿、受排版引擎的限制，与整个页面的dom构造痛痒相关。

3、JQuery

长处：没有兼容性问题

缺陷：每一帧，都要停止repaint、recomposite（非常耗时）；

总结：在移动端动画结果上，使用css3动画要比jquery动画效力高的多。在安卓手机上展现特别明显！所以移动端动画以css3动画为优先，jquery只能用来简便处置利用逻辑。css3动画是用来给内容规划加上特效的通用解决方案，但是在机能堪忧的移动阅读器上很大概会受排版机能所限，达不到抱负的结果。而对机能有要求的特定场景，比方游戏，用canvas会有很大的提高。

（引荐教程：CSS入门教程）

二、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操纵，支撑硬件加快，并不需要软件方面的渲染

三、动画历程有闪耀（一样显现在动画开端）

解决办法：

.cube {
 
   -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;
 
   /* Other transform properties here */
 
}

在webkit内核的阅读器中，另一个卓有成效的办法是：

.cube {
 
   -webkit-transform: translate3d(0, 0, 0);
 
   -moz-transform: translate3d(0, 0, 0);
 
   -ms-transform: translate3d(0, 0, 0);
 
   transform: translate3d(0, 0, 0);
 
  /* Other transform properties here */
 
}

相关视频教程引荐：css视频教程

以上就是css实现动画机能优化的具体内容，更多请关注百分百源码网其它相关文章！

打赏