移动端动画用什么实现好？一些站长在做移动端网站时，想要做动画的效果，而制作动画效果的方法有css，jquery，canvas，那么究竟选择哪个实现好呢？另外，对于css3在移动端出现卡顿问题，我们又该如何解决？

    一、使用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会有很大的提高。

    二、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 */

}

    现在大家对于移动端网站动画的实现以及方法，以及卡顿问题的解决方法等等这些都情况了吧，希望大家阅读完这篇文章能有所收获。最后，想要了解更多大家可以继续关注其他相关文章。

文本转载自脚本之家

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• CSS3弹性盒子是什么，怎样实现？

  这篇文章我们来了解CSS3弹性盒子是什么。CSS3中，弹性盒子是一种布局方式，小编觉得挺实用的，因此分享给大家做个参考，文中的示例代码介绍得很详细，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。

• CSS3中选择偶数表格的方法和代码是什么

  css中，可用“nth-child()”选择器来选择表格的偶数行元素，该选择器用于匹配属于其父元素的第n个子元素，当选择器内的值为“2n”时，就会选择偶数个数对象，语法为“表格行元素:nth-child(2n){css样式代码;}”。

• CSS中transform-origin属性的作用是什么，能怎样应用

  这篇文章主要介绍了CSS transform-origin属性的理解,详细的介绍了CSS transform-origin属性的作用及其实践，非常具有实用价值，需要的朋友可以参考下

• css中div不设高度能完全居中吗？

  在开发过程中，很多需求需要我们居中一个div，而CSS实现div居中的方法有很多，那么div不设高度能完全居中吗？答案是可以的，这篇文章主要就给大家介绍div不设置高度如何实现完全居中效果，以下是实现要求：

• CSS中图片亮度怎样控制，如何低亮度显示？

  这篇文章给大家分享的是CSS中图片亮度的控制显示方法。小编觉得挺实用的，因此分享给大家做个参考，文中的示例代码介绍得很详细，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。