CSS Animation 使 Mobile 网页崩溃！? 效能优化篇(3) - 优化Animation动画～

解决问题搂
终於最後一步要来了！问题已找到～我们动手开始优化吧

1.将连续图拿掉,改用css制作动画
原本有一个流星动画是一张750 × 148544 连续图, 利用background-position-y变更制成动画

<style>
    .effect {
      width: 750px;
      height: 422px;
      background-image: url(图片位置);
    }
    .effect.is-play {
      animation: effect-keyframes 30s  step-end infinite;
    }

    @keyframes effect-keyframes {
      0%
          background-position-y: 0px;
      3.5%
          background-position-y: 422px;
      .......
    }
</style>

最後修改成纯使用CSS制作

<style>
.effect {
  width: 750px;
  height: 422px;
}
.effect .star {
  /* 流星样式 */
}
.effect .star:after {
  /* 流星尾巴样式 */
}
.effect.is-play .star {
  animation: effect-keyframes 0.51s  ease-out;
}
.effect.is-play .star:after {
  animation: effect-keyframes-2 0.51s  ease-out;
}
@keyframes effect-keyframes {
  0%
      transform: scale(1) rotate(0) translate3d(-26px, -162px, 0);
      opacity: 0;
  100%
      transform: scale(1) rotate(0) translate3d(161px, 90px, 0);
      opacity: 1;
}
@keyframes effect-keyframes-2 {
  0%
      transform: scale(0) rotate(-130deg) translate3d(0, 0, 0);
      opacity: 0.2;
  100%
      transform: scale(1) rotate(-130deg) translate3d(0, 0, 0);
      opacity: 1;
}
</style>

对！～最後拿掉了750 × 148544 连续图
用纯css+html就做完这个效果了
面对有机会用css解决的动画, 真是不能偷懒啊～

2.无法拔掉的连续图-缩小
面对有些动画，实在无法用css处理,例如蜡烛火焰的动画, 用css实在很难满足需求
这边处理的方式为"减少连续图的数量"
我们将连续图从 299 × 20691 减少到 148 × 2312
大大的减少了效能负担

3.无法拔掉的连续图-优化动画指令
面对还是需要跑连续图的动画,进行改写
待机动画原本的写法

<style>
    .effect {
      width: 299px;
      height: 422px;
      background-image: url(图片位置);
    }
    .effect.is-play {
      animation: effect-keyframes 0.8s step-end alternate infinite;
    }

    @keyframes effect-keyframes {
      0%
          background-position-y: 0px;
      5%
          background-position-y: 422px;
      .......
    }
</style>

经过优化後

<style>
    .effect-wapper {
      width: 750px;
      height: 422px;
      overflow: hidden;
    }
    .effect {
      width: 750px;
      height: 8440px;
      background-image: url(图片位置);
    }
    .effect.is-play {
      animation: effect-keyframes 0.8s step-end alternate infinite;
    }

    @keyframes effect-keyframes {
      0%
          transform: translate3d(0px, 0px, 0px);
      5%
          transform: translate3d(0px, -422px, 0px);
      .......
    }
</style>

是的！背景background-position-y, 改成transform变形, 就是这点写法上的改变,就让待机时的效能产生极大改变!(详细原因请看上篇)
原本待机时的cpu使用度(左边电脑MacBook Pro, 右边小米s4)

background-position-y 变为 transform 後(左边电脑MacBook Pro, 右边小米s4)

电脑版回到正常的1%以下, 手机也从18%回到正常的1%左右

最终结果(动画播放时)：

优化前CPU Lag的不要不要的

整体优化後
电脑CPU使用落在10%内, 手机版CPU使用约在30%~60%之间跳跃,运作顺畅～搞定！

结语：

对於动画的建议是,所有变型与位移都使用transform, 显示与隐藏使用opacity, 大部分动画靠这两个属性可以全部搞定,真的搞不定的.....就只能祈祷浏览网页的人手机给力搂～