css3动画使用GPU加速
2019-09-30 本文已影响0人
木中木
CSS3实现动画，可以实现不使用js，避免使用js主线程，阻塞主线程，下面我们看个很基本的动画
<div style="position: relative; height: 200px;">
<div class="btn">测试按钮1234</div>
</div>
.btn{
width: 200px;
height: 50px;
background: red;
text-align: center;
line-height: 50px;
border-radius: 2px;
margin-left: 50px;
animation: myanimation 1s ease-in infinite;
position: relative;
}
@keyframes myanimation {
0% {
left:0;
top:0;
}
20% {
left:0;
top:20px;
}
40% {
left:0;
top:40px;
}
60% {
left:0;
top:60px;
}
80% {
left:0;
top:80px;
}
100% {
left:0;
top:100px;
}
}
这个基本的动画，但是整体动画存在卡顿，我们用performance检测一下,我们看到这里绿色部分就是resize repaint，不断触发回流重绘。其实可以通过tansform就可以了，我们修改下代码
1-1.png
@keyframes myanimation {
0% {
transform: translate(0,0)
}
20% {
transform: translate(0,20px)
}
40% {
transform: translate(0,40px)
}
60% {
transform: translate(0,60px)
}
80% {
transform: translate(0,80px)
}
100% {
transform: translate(0,100px)
}
}
我们通过chrome的moretool中的rendering来查看本次就首次回流后，就没有再次触发过多的repaint操作。
那为什么没有触发repaint操作呢，因为tansform是交付给了GPU渲染，我们知道，页面初始化的时候，会先解析文本，形成dom节点树和css 样式树，再将两者结合形成渲染树，渲染每个layout的时候都会形成相应的图层，这个图层就是由GPU渲染完成，本文的示例就是处于复合图层中。
形成复合图层的条件有：
1.3D 或者 CSS transform
2.<video> 和 <canvas> 标签
3.CSS filters
4.元素覆盖时，比如使用了 z-index 属性
1-2.png
1-3.png
1-4.png
我们再放大一下可以看到每次动画的具体时间
1-5.png
能通过GPU加速的样式：
- tansform
- opacity
- filter
