码迷,mamicode.com
首页 > 其他好文 > 详细

因为动画导致卡闪的解决方法

时间:2018-08-29 14:06:51      阅读:162      评论:0      收藏:0      [点我收藏+]

标签:调用   尺寸   效果   注意   one   动态   frame   交互   html   

方法:

1、对使用-webkit-transform:translate() 移动的标签,使用translate3d 替换 translate

2、增加-webkit-transform-style: preserve-3d; 样式

3、增加-webkit-backface-visibility:hidden; 样式

4、尽量使用-webkit-transform 代替 -webkit-animation

5、减少@-webkit-keyframe 的定义和 使用

6、减少图片,降低图片大小;避免大图片压缩成小图片显示,或者小图片放大成大图片显示;图片显示尺寸尽量还原真实(高清@x2)情况

7、-webkit-transform 的时候,不用同时使用其他动画(例如 opacity)

8、不要使用all,也就是不要使用-webkit-transiton:all 1s;应该尽量详细定义 -webkit-transiton 的属性,例如-webkit-transiton:-webkit-transform 1s;

9、查看附近的webview 是否加载太多内容,太多动画,若是请添加离开当前页面时把动画效果暂时取消的功能;

10、对于运用了硬件加速的元素(例如元素A),与它重叠的元素如果没有同样运用硬件加速的属性,也会影响整个动画效果

11、尽量对使用动画的元素 设置成“非布局元素”,例如 position:absolute/fixed。

12、元素 从display:xxx 到 display:none;会使浏览器layout计算。要隐藏元素,请用visibility:hidden,或者translate(9999px,9999px)

13、对于多个png比较大的图片,建议把其改为一个jpg的图片和一个填充区域为黑色的图片,采取-webkit-mask-image:url()来降低图片大小。

14、如果连续多篇大交互文章,存在太多的动画,建议在中间插入引导页或其他文章隔开,多图片,并且动画效果多,效果一定会卡机,我们可以避免减少使用图片,如10张数字的图片,尽量找相近的字体动态生成数字

 

补充,iOS6 及以上的系统不再支持上面的前两条的属性触发硬件加速,请用以下属性(经过测试得出,最起码3个属性一起用的时候是有效的)代替之:

-webkit-transform: translateZ(0);

-webkit-perspective: 1000;

-webkit-backface-visibility:hidden;

 

解释:

第1、2条,在iOS 6 之前,是web 触发 浏览器启动硬件加速(GPU 渲染)的方法

第3条,一种调用 GPU 渲染的 hack

第4、5条,animation 会比 transform 多消耗性能

第11条,对于“布局”元素,当它进行动画的时候会触发浏览器的重绘

第12条,对于被改变成display:none 的元素,浏览器会停止绘制,也就触发了浏览器重新计算当前文档需要绘制图形的个数,消耗量cpu 的计算导致影响其他JS 和 css 的动画计算能力。

第13条,采用jpg和png的混合使用方法来实现遮罩,大大节省了空间。

 

特别注意:

硬件加速不能大量地,随意地用,因为大量的使用 GPU 渲染同样会拖慢 渲染效果。

 

相关资料:

iOS6 html hardware acceleration changes and how to fix them:http://indiegamr.com/ios6-html-hardware-acceleration-changes-and-how-to-fix-them/

CSS3 TRANSITION 的背后:http://newhtml.net/behind-css3-transitions/

高性能 CSS3 动画:http://www.qianduan.net/high-performance-css3-animations.html

 

因为动画导致卡闪的解决方法

标签:调用   尺寸   效果   注意   one   动态   frame   交互   html   

原文地址:https://www.cnblogs.com/greengreencui/p/9552633.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!