CSS3图片帧动画性能优化

浏览: 73 发布日期: 2017-09-08 分类: css3

有的复杂动画效果我们没办法用CSS3直接完成,设计师会给出图片序列帧,我们合成雪碧图,通过steps改变background-position的方式来实现动画,如Demo: http://jianxiujiucan.cn/test/...
代码如下:

.ico-vip{width: 44px;height: 30px;overflow: hidden;position: relative;background: url(spr-vip.png) no-repeat;animation: aniVip 1.5s steps(34) infinite;}
@keyframes aniVip {
    0%{background-position: 0 0;}  
    100%{background-position: -1564px 0}
}

但是使用这种写法会导致配置比较差的电脑CPU消耗比较明显。在Chrome按shift+esc查看任务管理器,可以看到CPU的占用会变化,这个值的最高点还是比较高的。

background-position不断的改变会造成浏览器不断重绘而导致CPU上升,可以点开Chrome开发者工具中的Layers看到,绘制一直在不断地改变:

在网上查了一下,有同学建议不要用background-position,可以用translate来代替。于是尝试了一下:http://jianxiujiucan.cn/test/...
代码如下:

.ico-vip{width: 44px;height: 30px;overflow: hidden;}
.ico-vip:after{content:''; width: 1564px;height: 30px;background: url(spr-vip.png) no-repeat;animation: aniVip 1.5s steps(34) infinite;display: block;}
@keyframes aniVip {
    0%{transform: translate3d(0,0,0)}  
    100%{transform: translate3d(-1564px,0,0)}
}

这种写法不会导致重绘,可以减少CPU的消耗。

测试在比较差的机器上测试,CPU可以从20%减少到4%,这个方法还是比较可用的。

返回顶部