http://www.web008.net

css属性的挑选对动漫片品质的熏陶

css属性的接受对动漫片品质的震慑

2016/03/06 · CSS · 1 评论 · 动画

原稿出处: 携程设计划委员会员会   

今昔手提式有线电话机的占比进一层高,各个炫目页面不可枚举,这个特效都离不开css动漫。谈起css动画,主流的动静也就偏偏这两大类:位移和形变。而作者辈在写二个动漫片特效的长河中,如何去进步它的品质呢?当然首先大家要求去探听一下基本的定义,举个例子浏览器渲染的做事原理等,那几个小编也在读了三人大咖写的连带作品后才有了迟早的摸底,这边作者也不细说了,风乐趣的同桌能够去询问一下。本次的指标大约暴虐地讲,其实正是大家理应使用什么css属性去开展动漫的绘图时,能够有效的做实浏览器在渲染和制图进度中的质量。

迅猛步入正题,大家先来看个demo。笔者分别使用了left和transform在2秒内向右平移了500px的移动。代码如下:

<style> .box-ps,.box-tf{position:absolute;top:0;left:0;width:100px;height:100px;background-color:red;} .box-ps{-webkit-animation:box-ps 2s linear;} .box-tf{-webkit-animation:box-tf 2s linear;} @-webkit-keyframes box-ps{ 0%{ left:0; }100%{ left:500px; } } @-webkit-keyframes box-tf{ 0%{ -webkit-transform:translate(0,0); }100%{ -webkit-transform:translate(500px,0); } } </style> <body> <div class="box-ps"></div> <div class="box-tf"></div> </body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<style>
.box-ps,.box-tf{position:absolute;top:0;left:0;width:100px;height:100px;background-color:red;}
.box-ps{-webkit-animation:box-ps 2s linear;}
.box-tf{-webkit-animation:box-tf 2s linear;}
 
@-webkit-keyframes box-ps{
0%{
left:0;
}100%{
left:500px;
}
}
 
@-webkit-keyframes box-tf{
0%{
-webkit-transform:translate(0,0);
}100%{
-webkit-transform:translate(500px,0);
}
}
</style>
 
<body>
<div class="box-ps"></div>
<div class="box-tf"></div>
</body>

下一场在chrome下拿到了如下的结果,第一张为利用left的截图,第二张为运用transform的截图:

图片 1

图片 2

生硬,大家在帧形式这里可以看来left比transform帧数要低,並且在渲染和制图那边的耗费时间,left要远远的过量transform。见到这里,相信大家心里已经有结论了。
作者们再利用chrome的show paint rectangles来察看一下两端在动漫进度中,渲染和制图的区域有啥差异,第一张为使用left的截图,第二张为利用transform的截图:

图片 3

图片 4

咱俩得以观望,使用left写的漫天动漫进度中,浏览器一向在开展绘图管理。而相对来说,使用transform时,仅仅是在动漫伊始和得了是拓宽了绘图。由此,对于动漫的性质上,transform要特别卓绝。至于原因,这里将在引进叁个触及重新布局的定义:

我们在改动一些性情时,借使是跟layout相关的性质,则会接触重新布局,引致渲染和制图所急需的年月将会更加长。因而,大家在写动漫的时候因该规避这几个属性:width, height, margin, padding, border, display, top, right, bottom ,left, position, float, overflow等。
不会出发重新布局的质量有:transform(当中的translate, rotate, scale), color, background等。

就此,我们一向在写css动漫时,应该事先利用不触发重新布局的习性,那样能够使大家所展现动漫效果的愈加流畅。

 

2 赞 3 收藏 1 评论

图片 5

郑重声明:本文版权归美高梅163888所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。