CSS动画-调速函数-steps

发表于 更新于 本文字数： 557 阅读时长 ≈ 2 分钟

这是我参与8月更文挑战的第28天，活动详情查看：8月更文挑战

在文章CSS动画-调速函数一文中，我们初步了解了一下CSS调速函数animation-timing-function的作用，介绍了一个重要的调速函数参数cubic-bezier(x1, y1, x2, y2)，即贝塞尔曲线。在学习animation-timing-functionMDN文档时，发现除了可以取贝塞尔曲线外，还有另外一个函数：steps，

steps规范

具体规范如下：

1
steps(number_of_steps, direction)

其中，number_of_steps表示一个正整数，表示动画变化的步数/帧数，direction表示变化函数是否为左连续或右连续。steps(2, jump-start)的变化曲线如下所示：横轴表示动画的时间进度，竖轴表示动画的执行进度。

image.png

通过分析函数曲线，我们可以看到，在(0, 0)时，动画进度发生阶梯跳跃，即此时动画效果是瞬时完成的，相比通过贝塞尔曲线对动画进行平滑过度，什么情况下需要使用steps函数呢？

在《CSS Secret》中介绍了一种情况：逐帧动画效果

比如下图所示为一个人跳跃的逐帧动画图：

image.png

那么，如何通过CSS动画将这一动画演示出来呢？我们来尝试一下。

帧动画

首先来试一下如果使用贝塞尔曲线会是什么样子：

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
27
28
29
30
<!DOCTYPE html>
<title></title>
<body>
    <div class="jump">

    </div>
</body>
<style>
    body {
        /* 居中 */
        width: 100%;
        height: 100vh;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
    .jump {
        height: 226px;
        width: 112px;
        background: url('./img/jump.png') 0 0;
        overflow: hidden;
        animation: loader 3s infinite;
    }
    @keyframes loader {
        to { background-position: -1009px 0; } 
    }

</style>
</html>

实现效果如下图：

4d064d03-fd37-4400-b21f-dd4360d8d4b0.gif

不管是使用linear或如何调整贝塞尔曲线参数，总是无法达成理想的动画效果。我们来试试如果使用steps有什么效果：

1
animation: loader 1s infinite steps(9);

13f15ec5-0aba-4daf-91a9-2f6366a844fd.gif

（嗯，请稍微忽略因截图问题导致的漏出来的一个脚）

可以看到动画效果非常不错了。

至于另外一个参数direction，我借用另外一篇博客的一个动图，希望能帮助大家理解：

3949005326-57ec7d2e67e8d.gif