首页 > 开发 > CSS > 正文

android下css3动画非常卡,GPU也不差啊

2017-09-12 09:39:30  来源: 网友分享

测试用机是米3。做的一个场景动画,iphone4下都很流畅,而安卓机跪了,尤其集中在面积较大的动画执行上,米3惨不忍睹,MOTO G稍微好一点,大家有什么好建议吗

解决方案

按下面顺序优化一遍吧:

  1. 是否导致layout
    如果是,尽可能将动画元素absolute化以避免影响文档树,造成大面积重新计算layout。
  2. 是否启用硬件加速
    “用到了CSS3动画”和“开启了硬件加速”是两件事情,虽然前者有可能导致后者。
    开启硬件加速在webkit中有神奇的万金油:opacity: 1;或者-webkit-backface-visibility: hidden;
  3. 是否是有高消耗的属性(css shadowbackground-attachment: fixed等)
    有的话,图片也是一种选择。这算得上是用空间换时间的优化了。
  4. repaint的面积
    如果是,只好缩小动画面积了。这一步的优化有限,基本上还是依赖于上面三者

翻墙读一下High Performance Animations吧: