【CSS】android下css3动画非常卡，GPU也不差啊

• Z时代
• 2024-01-10
• 分类：技术分享

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

回答：

按下面顺序优化一遍吧：

1. 是否导致layout
   

   如果是，尽可能将动画元素absolute化以避免影响文档树，造成大面积重新计算layout。

2. 是否启用硬件加速
   

   “用到了CSS3动画”和“开启了硬件加速”是两件事情，虽然前者有可能导致后者。
   

   开启硬件加速在webkit中有神奇的万金油：opacity: 1;或者-webkit-backface-visibility: hidden;。

3. 是否是有高消耗的属性（css shadow、background-attachment: fixed等）
   

   有的话，图片也是一种选择。这算得上是用空间换时间的优化了。

4. repaint的面积
   

   如果是，只好缩小动画面积了。这一步的优化有限，基本上还是依赖于上面三者

翻墙读一下High Performance Animations吧：

以上是 【CSS】android下css3动画非常卡，GPU也不差啊 的全部内容， 来源链接： utcz.com/a/155411.html