1. 需求背景
随着前端的发展，我们在做项目的时候除了追求炫酷的特效外，更加追求
用户的体验和资源的利用率，我们之前在项目里面做动图时都是引入Flash动画，但是Flash动画通常都是非常大的文件，所以为了资源优化，我们需要用到animation-timing-function的steps属性，将动画变为GPU渲染出来。
2. animation-timing-function的简介
animation-timing-function是控制时间的属性,常见的属性有
在上图中，我们可以看到animation-timing-function常见的值可以选择六种。那么今天我们来讲解不常见的一个值（steps）。
3. steps属性
animation默认以ease方式过渡,它会在每个关键帧之间插入补间动画,所以动画效果是连贯性的.除了ease、linear、cubic-bezier之类的过渡函数都会为其插入补间.但有些效果不需要补间,只需要关键帧之间的跳跃,这时应该使用steps过渡方式.
4. steps的测试案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div {
height: 100px;
position: absolute;
left: 0;
}
.div_static {
width: 600px;
background-color: #000000;
top: 10%;
}
.div_move {
width: 100px;
animation: melon 2s infinite ease;
/*animation: melon 2s infinite step-end;*/
/*animation: melon 2s infinite step-start;*/
/*animation: melon 2s infinite steps(3);*/
top: 30%;
background-color: #87CEEB;
}
@keyframes melon {
0% {
left: 0;
}
20% {
left: 100px;
}
40% {
left: 200px;
}
60% {
left: 300px;
}
80% {
left: 400px;
}
100% {
left: 500px;
}
}
</style>
</head>
<body>
<div class="div_static"></div>
<div class="div_move"></div>
</body>
</html>
5. 讲解
其中div_static的div是一个参考线，没有任何动画，div_move的div才是我们的目标。
l 步骤一
将上面的代码复制到你的编辑器里面。
l 效果
我们可以看到因为现在我们使用的是默认值ease，所以看起来帧与帧之间的动画虽然看起来是不连贯的，但是起码每一步状态之间还是会有动画将其连接起来。
l 步骤二
将动画有ease变为step-end。
l 效果
我们可以看到，现在的动画会忽略最后一步，即我们现在动画从80%到100%的那一步骤。如果我们的动画步骤只有两步的话，那么动画会一直维持在第一步。
l 步骤三
将动画有step-end变为step-start。
l 效果
我们可以看到，现在的动画会忽略第一步，即我们现在动画直接从20%到100%，不会出现0%的状态。
l 步骤四
将动画有step-start变为steps（1）。
l 效果
我们可以看到，现在的动画和step-end是一样的，会忽略最后一步，注意，steps可以输入两个字，现在我们只是输入了一个1，第二个值默认是end，所以现在的效果其实是steps（1,end）。
l 步骤五
将动画有steps（1）变为steps（2）。
l 效果
我们可以看到，现在的动画还是和step-end一样的，但是，动画的频率变快了。
动画还是从0%一直到80%，一共花了两秒钟走了四步，即每一步用时0.5秒，0%到20%视为一步。
而现在将数值由1变为2时， 还是花了两秒，但是0%到20%被拆分成了两步，即现在一共花了两秒钟走了八步，所以动画时间缩短，频率变快了。
l 步骤六
我们通过步骤五发现，steps属性是将每一步按照值进行切割，所以我们可以利用他这一个特征，将原来我们手写的动画变成程序自动切割，例如我们现在要从0px移动到500px，则需要变为
<style type="text/css">
.div_move{
width: 100px;
animation: melon 2s infinite steps(4);
top: 30%;
background-color: #87CEEB;
}
@keyframes melon{
0%{
left: 0;
}
100%{
left: 500px;
}
}
</style>
l 效果
可以发现和step-end效果是一样的，将0px到500px的距离分为五步，只不过因为第二参数默认值是end，所以会忽略最后一步。只会显示0px到400px，但是代码量少了很多。
6. 扩展
我们可以利用steps属性将帧动画变为连续的动画，试试将下图变成动画吧。
l 素材
l 效果
7. 总结
l 如果在@keyframes里面设置是动画不是从0%-100%时,那么动画帧与动画帧中间会运用animation-timing-function进行过渡,这样的动画非常不顺滑.
l steps(x,start|end)的第一个参数是指时间函数中的间隔数量(必须是正整数),第二个参数默认值是end,也可以填start,x是指在第一步中又一次分割x次进行动画,而不是指从第x开始执行,也不是指整个动画的变化次数.
l step-start等同于steps(1,start),会忽略第一步,即从第二步开始执行直到最后,如果只有两步,那么会一直存在第二步.
l step-end等同于steps(1,end),会忽略最后一步,即从第一步开始执行直到倒数第二步,如果只有两步,那么会一直存在第一步.
l 引用w3c的一张step的工作机制图 steps
l 最后再次强调:timing-function 作用于每两个关键帧之间，而不是整个动画
广州蓝景，助力在IT路上前进的你，
让你在IT之路越走越远，越飞越高！
网友评论