在动画中,为了实现流畅的60帧的动画效果,每一帧都需要在16毫秒左右完成渲染。 时间非常短,所以我们需要找到合适高效的方法来渲染每一帧的内容,从而实现流畅的效果。
在我之前的动画实现中,并没有留意动画的优化。直到看到了一篇文章 《10个原则让动画带你飞》 才明白动画的优化。
在CSS动画的实现中,我们常用的优化手段就是在@keyframes name{}中尽量多写一些帧数。
即@keyframes name{
0%:
25%:
50%:
75%:
100%:
}
这种效果是远好于
@keyframes name{
0%:
100%:
}
的
但是拜读了那篇动画优化文章之后,我才知道浏览器在处理margin left width 等属性时,会耗费很大的性能,因为这会导致浏览器重绘。
所以:
1! 除了透明度(opacity) 和 切换(transform) ,不要改变任何属性
transform 是完全可以处理改变元素的大小,位置等需求的。
opacity 可以隐藏元素。
2! 不要一次性给所有内容都设置动画
因为单一的动画会非常流畅,但是和其他动画糅杂在一起的时候,就不那么流畅了。
所以需要给动画编排合理的时间。
3! 另外一个是利用translate3d(20px, 20px, 0)来创建一个3d图层,来使得浏览器能够调用GPU来帮助渲染。
这种方式可以消除在动画开始之前的图层创建时间,使得动画尽快开始(创建图层和绘制图层还是比较慢的),而且不会随着抗锯齿而导出突变。不过这种方法需要节制,否则会因为创建过多的图层导致崩溃