css属性的选择对动画品质的熏陶,揭秘CSS属性选拔对动画片质量的震慑

css属性的选择对动画品质的熏陶,揭秘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

css属性的选料对动画质量的震慑,css属性动画性能

现行手机的占比更是高,各样酷炫页面家常便饭,那一个特效都离不开css动画。说到css动画,主流的意况也就单单那两大类:位移和形变。而大家在写一个动画特效的经过中,怎样去提高它的属性呢?当然首先我们须求去探听一下中坚的概念,比如浏览器渲染的行事规律等,这么些我也在读了几位大牛写的相干作品后才有了肯定的询问,那边我也不细说了,有趣味的同班可以去询问一下。这一次的目标大约阴毒地讲,其实就是我们应该选用什么css属性去举办动画的绘图时,能够使得的滋长浏览器在渲染和制图进度中的品质。

各自选择了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>

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

亚洲必赢官网 6

transform的截图

亚洲必赢官网 7

 

确定性,我们在帧方式那里可以观望left比transform帧数要低,而且在渲染和制图这边的耗时,left要远远的超过transform。看到那里,相信大家心中早已有结论了。
俺们再利用chrome的show paint
rectangles来察看一下双方在动画进度中,渲染和制图的区域有啥差异,第一张为使用left的截图,第二张为利用transform的截图:

亚洲必赢官网 8

transform的截图

亚洲必赢官网 9

咱俩得以见到,使用left写的一体动画进度中,浏览器一直在展开绘图处理。而相对而言,使用transform时,仅仅是在动画起头和为止是举办了绘图。因而,对于动画的习性上,transform要尤其良好。至于原因,那里即将引入一个触及重新布局的概念:

俺们在转移一些品质时,假若是跟layout相关的性质,则会接触重新布局,导致渲染和制图所急需的光阴将会更长。因而,大家在写动画的时候因该规避那些属性:width,
height, margin, padding, border, display, top, right, bottom ,left,
position, float, overflow等。
不会出发重新布局的属性有:transform(其中的translate, rotate, scale),
color, background等。

故而,我们日常在写css动画时,应该先行选择不触发重新布局的属性,这样可以使我们所呈现动画效果的更是流畅。

转发请表明来源:携程设计委员会

现在手机的占比进一步高,各个酷炫页面不乏先例,那个特效都离不开css动画。说到cs…

现今手机的占比更是高,种种酷炫页面数见不鲜,那个特效都离不开css动画。说到css动画,主流的情事也就只是那两大类:位移和形变。而大家在写一个动画片特效的历程中,怎么样去升高它的质量呢?当然首先大家须求去了然一下中央的概念,比如浏览器渲染的劳作规律等,那一个我也在读了几位大牛写的有关小说后才有了一定的摸底,那边我也不细说了,有趣味的同桌能够去明白一下。本次的目标大致狠毒地讲,其实就是我们应当利用什么css属性去进行动画的绘图时,可以行得通的抓牢浏览器在渲染和制图进度中的质量。

如今手机的占比进一步高,各个酷炫页面不足为奇,这个特效都离不开css动画。说到css动画,主流的动静也就唯有那两大类:挪动和形变

分别使用了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>

此次的目标大致残忍地讲,其实就是大家应有运用什么css属性去开展动画的绘图时,可以行得通的滋长浏览器在渲染和制图进程中的质量。

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

很快进入正题,我们先来看个demo。我分别使用了left和transform在2秒内向右平移了500px的活动。代码如下:

亚洲必赢官网 10

亚洲必赢官网 11

transform的截图

接下来在chrome下得到了之类的结果,第一张为运用left的截图,第二张为使用transform的截图:

亚洲必赢官网 12

亚洲必赢官网 13

 

亚洲必赢官网 14

大庭广众,大家在帧方式那里能够看看left比transform帧数要低,而且在渲染和制图这边的耗时,left要远远的超越transform。看到那里,相信我们心中早已有结论了。
咱俩再选取chrome的show paint
rectangles来考察一下两端在动画进度中,渲染和制图的区域有啥不一致,第一张为利用left的截图,第二张为运用transform的截图:

众目睽睽,大家在帧形式那里可以见见left比transform帧数要低,而且在渲染和制图那边的耗时,left要远远的超过transform。看到此间,相信大家心中早已有结论了。

亚洲必赢官网 15

大家再利用chrome的show paint
rectangles来考察一下两端在动画进程中,渲染和制图的区域有啥异样,第一张为利用left的截图,第二张为利用transform的截图:

亚洲必赢官网,transform的截图

亚洲必赢官网 16

亚洲必赢官网 17

亚洲必赢官网 18

大家得以见见,使用left写的成套动画进程中,浏览器一直在开展绘图处理。而相对而言,使用transform时,仅仅是在动画伊始和终止是拓展了绘图。由此,对于动画的性质上,transform要进一步卓绝。至于原因,这里就要引入一个触及重新布局的定义:

怎么样,看后是是不是有得到呀,希望小编的享受对大家有所辅助,也欢迎我们提议不足,也足以加我Q群:142991222联名享受,这样大家的友谊才能长久。

我们在改动部分属性时,如果是跟layout相关的特性,则会触发重新布局,导致渲染和制图所须求的年月将会更长。因而,大家在写动画的时候因该规避这一个属性:width,
height, margin, padding, border, display, top, right, bottom ,left,
position, float, overflow等。
不会出发重新布局的性质有:transform(其中的translate, rotate, scale),
color, background等。

我们得以阅览,使用left写的一切动画进度中,浏览器一贯在开展绘图处理。而相对而言,使用transform时,仅仅是在动画开端和为止是拓展了绘图。由此,对于动画的性质上,transform要进一步杰出。至于原因,那里即将引入一个触及重新布局的概念:

为此,我们平昔在写css动画时,应该先行接纳不触发重新布局的属性,那样可以使大家所突显动画效果的愈发通畅。

咱俩在转移部分性质时,要是是跟layout相关的性质,则会触发重新布局,导致渲染和制图所须求的岁月将会更长。因而,大家在写动画的时候因该规避这一个属性:width,
height, margin, padding, border, display, top, right, bottom ,left,
position, float, overflow等。

转发请评释来源:携程设计委员会

不会出发重新布局的习性有:transform(其中的translate, rotate, scale),
color, background等。

所以,大家一贯在写css动画时,应该先行选择不触发重新布局的特性,那样可以使我们所浮现动画效果的愈发通畅。

网站地图xml地图