animation-timing-function的steps详解

Posted 2020-10-31 qiufang

W3C里的定义：

animation-timing-function 规定动画的速度曲线。

这个属性有很多取值，

linear：
线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease：
平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
ease-in：
由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out：
由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out：
由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
step-start：
等同于 steps(1, start)
step-end：
等同于 steps(1, end)
steps(<integer>[, [ start | end ] ]?)：
接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。
cubic-bezier(<number>, <number>, <number>, <number>)：
特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内

然后今天我想巴拉的是steps(1,start)和steps(1,end)的区别；

首先，

steps(<integer>[, [ start | end ] ]?)：

接受两个参数的步进函数。

第一个参数必须为正整数，指定了函数中的间隔数量。

第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。

第二个参数是可选的，默认值为end。

step-start等同于steps(1,start)，动画分成1步，动画执行时为开始左侧端点的部分为开始；

step-end等同于steps(1,end)：动画分成一步，动画执行时以结尾端点为开始，默认值为end。

上例子吧！

　　.bird{
　　　　min-width: 91px;
　　　　min-height: 71px;
　　　　background: url(../img/bird.png) -182px 0px no-repeat;
　　}

.birdFly {
    animation: bird-slow 900ms infinite steps(1,start);
}
@keyframes bird-slow{
    0% {
        background-position: -182px 0px;//第三只小鸟
    }
    50% {
        background-position: 0px 0px;//第一只小鸟
    }
    75% {
        background-position: -91px 0px;//第二只小鸟
    }
    100% {
        background-position: -182px 0px;//第三只小鸟
    }
}

图片是这张雪碧图；动画效果就是模拟小鸟展翅飞翔，一直扇动翅膀；默认是先显示第三只小鸟

steps(1,start);第一个参数为1的意思就是，每俩关键帧之间只要1步完成，也就是0%-50%，只分为一步完成，50%-75%，也是一步完成；以此类推；注意steps的设置都是针对两个关键帧之间的，而非是整个keyframes；

timing-function 作用于每两个关键帧之间，而不是整个动画。

steps(1,start) ： 第一只鸟和第二只鸟相互切换

steps(1,end) ： 第三只鸟和第一只鸟相互切换

start跳过0%，end跳过100%

step-start在变化过程中，都是以下一帧的显示效果来填充间隔动画，所以0% 到 50%  直接就显示了第一只鸟

step-end与上面相反，都是以上一帧的显示效果来填充间隔动画，所以0% 到 50% 直接就显示了第三只鸟

然后思考下，此时我们设置成start，小鸟会是怎样的呢？

答案是：

start:进入页面就会显示第一只小鸟，因为跳过了0%；

end:进入页面就会显示第三只小鸟，因为跳过了100%；

所以如果你一进来想显示小鸟展翅的样子就得是start,如果是一进来展示小鸟收翅膀的样子，那就设置成end;

个人觉得一进来看到小鸟展翅的样子还是比较喜欢的，哇哈哈哈、

 

再说下"forwards"和"infinite"

使用"forwards"和"infinite"对步数的的作用是不同的。

如果我们改变成"infinite"，将不会出现"100%",因为"forwards"命令使动画在我们设置的步数外添加了额外的一步。

"forwards"使动画保持结束时的状态，所以在步数执行完毕后，动画会跳到最后一帧的状态并保持不变。

（做那种雨滴滴下来，然后种子就发芽，然后就长成了参天大树，就定格到最后一帧的大树的效果；animation: grow 5000ms forwards steps(20);这里的steps是你的雪碧图里的图片的数量减一哦）

总结：

steps函数，它可以传入两个参数，第一个是分成多少步完成，第二个参数可选，决定显示效果（是上一帧填充还是下一帧填充）；

steps的设置都是针对两个关键帧之间的，而非是整个keyframes；

timing-function 作用于每两个关键帧之间，而不是整个动画；

"forwards"命令使动画在我们设置的步数外添加了额外的一步。