黑马程序员技术交流社区

标题: 【成都校区】--- 一文读懂 Animation 中的时间函数 steps [打印本页]
作者: 小刀葛小伦    时间: 2019-10-10 18:58
标题: 【成都校区】--- 一文读懂 Animation 中的时间函数 steps
利用 css3 的 Animation 可以创建动画，在许多页面中能够替代 flash、JS 等，提升页面加载速度。众所周知，Animation 有 8 大属性，如下所示：
属性名简 介
animation-name规定需要绑定到选择器的 keyframe 名称
animation-duration完成动画所花费的时间，以秒或毫秒计
animation-timing-function规定动画的速度曲线
animation-delay动画开始前的延迟
animation-iteration-count动画播放次数
animation-direction规定是否应该轮流反向播放动画
animation-play-state指定动画是否正在运行或已暂停
animation-fill-mode当动画不播放时（动画完成或动画延迟），要应用到元素的样式
以上这 8 个属性就决定了 Animation 能够实现一个什么样的动画效果。

本文主要介绍 timing-function 中的 steps() 函数。Animation 在执行动画时默认以 ease 函数进行过渡，ease 会在每个关键帧之间插入补间动画，所以动画效果是连贯的，
除了 ease 函数之外，linear 和 cubic-bezier（贝塞尔曲线） 等过渡函数也会为其插入补间动画。但有的时候某些效果不需要补间，只需要在关键帧之间进行跳跃，这时就用到了 steps 过渡方式。
1、什么是 steps？
steps() 是 Animation 中的一个 timing-function 函数， 能够实现动画的阶跃式变化，而非两个状态间的线性过渡。steps 接收两个参数：

[CSS] 纯文本查看 复制代码
steps ( n, [start | end] )

2、如何使用 steps？
大家都见过很经典的菊花 loading 效果图，其实现原理很简单，一张静态图片，然后为其添加动画，设定在固定步数内旋转 360 度即可实现 loading 效果，具体实现方式如下：


[CSS] 纯文本查看 复制代码
<div>

  <img class="loading-dot-step" src="./loading.png">

</div>

...



.loading-dot-step {

  animation: loading 1s infinite steps(12,start);

}

@keyframes loading {

  0% {transform: rotate(0deg);}

  100% {transform: rotate(360deg);}

}

静态图片如图所示：

给上面的静态图片添加动画，steps 设定 12 步完成两个关键帧间的动作轨迹，即从当前状态旋转 360 度，实现下面 gif 的动画效果。

除了菊花 loading 效果，很常见的还有线性 loading，其实现方式是利用 timing-function 的 linear 线性过渡函数，实现图片的连续旋转，此时的效果在视觉上就是连续的动画，如下图所示：

对于两种 loading 效果图，第一种为 steps 方式，第二种为线性过渡方式。两者实现原理类似，均在两个关键帧之间将图片从当前状态旋转至 360 度，当 timing-function 设置为 linear 时，从 0% 到 100% 的状态变化为匀速线性变化；当动作设定为 steps 时，将从 0 度旋转至 360 度的整个动画分为 12 步执行完，且每步之间是跳跃的，因此出现了经典的菊花 loading 效果。
3、分清 start 和 end
steps 的执行点 start 和 end 是许多人存在疑惑的地方，误用 start 和 end 可能会出现和理想情况下不一致的动画效果，许多人分不清两者的区别在哪里，下面以几个简单的 demo 来辅助理解这两个属性值的区别。
steps() 可简化出 step-start 和 step-end 这两个关键字。
[CSS] 纯文本查看 复制代码
<p>steps（1， start）</p>

<div class="a box"></div>



<p>steps（1， end）</p>

<div class="b box"></div>



...



.a{

  animation:changeColor 4s infinite steps(1, start);

}

.b{

  animation:changeColor 4s infinite steps(1, end);

}

@keyframes changeColor{

  0%{

    background-color: red;

  }

  100%{

    background-color: blue;

  }

}

上述代码显示效果如下图所示：
<html>
<p>1、steps（1， start）</p>
<div style="width:70px;height:70px;background:blue;"></div>
<p>2、steps（1， end）</p>
<div style="width:70px;height:70px;background:red;"></div>
</html>

代码可见，两者设定的均为 1 步执行完动画，实现将 div 的颜色从红色变为蓝色，但是我们看到的结果却是不同的，这就是由于 start 和 end 两个属性的执行点不同造成的结果差异。

规范文档中给出了关于 steps() 的函数图，如下图所示：


对比 steps 函数中的 start 和 end 两个执行点，由上图中步数为 1 的两图可见：
同样，当步数等于 3 时，肉眼可见的 start 的执行点为第一步执行结束的位置，end 的执行点则为第一步尚未开始的位置 。由于动画执行的步数相同但起点不同，因此动画的结束点也不相同，设置为 start 的情况下，结束点为动画结束的最后一步的状态，而 end 为结束前一步的状态。

为了更加直观的展示两者执行的开始点和结束点的区别，本文以横向坐标图的方式对执行过程进行示意：



属性值设置为 start 时，在动画开始后，动画的第一段会马上完成。以左侧端点为起点，立即跳到第一个 step 的结尾处，并且保持这样的状态直到第一步的持续时间结束（后面的每一帧都将按照此模式来完成动画）。

属性值设置为 end 时，在动画执行的每一帧中，动画都保持当前状态直到这一段的持续时间完成，才会跳到下一步的起点（后面的每一帧都按照这个模式来进行）。

现在可以解释上述 demo 中两个 div 颜色显示不一样的原因了，对于 steps 属性值为 start 的 a-box，进入画面时动画的第一阶段已经完成，因此我们不会看到红色，直接显示蓝色；对于 steps 属性值为 end 的 b-box，动画保持第一帧的状态直到结束，因此始终显示为红色。
4、何时使用 steps？

并非所有的动画都是连续的，对于某些非连续变化的效果就需要用到 steps 来实现。
例如钟表秒针阶跃式的转动，或者在动画中模仿人物或动物的脚印行走效果，再或者利用雪碧图实现人物跑动的效果等等。下面详细介绍一下人物跑动效果的实现方式。

人物奔跑 demo
[CSS] 纯文本查看 复制代码
<div class="person"></div>

...



.person {

  background: url('person.jpg') no-repeat;

  background-size: 700%;

  

  // 动画名称 持续时间 运动曲线（steps()分为几步）循环次数

  animation: personBlast .8s steps(8) infinite; 

}

@keyframes personBlast {

  0% {

    background-position: left;

  }

  100% {

    background-position: right;

  }

}

其中 peoson.jpg 为人物动作分割的雪碧图：

人物动作雪碧图
本文奔跑动作实现方式为将原始雪碧图进行按图形帧数的倍数放大，然后设定steps为雪碧图的帧数，关键帧的动作为从（from）雪碧图左侧阶跃式跳跃到（to）右侧，跳跃步数为雪碧图中人物的个数，最终实现下面的跑动效果：

【注：此奔跑效果的实现方式不尽相同，此处只是其中一种，这样做是为了让大家更好的理解 steps 的应用场景，还有其他更友好的实现方式欢迎大家进行尝试】
5、请注意 ！！！
对于 Animation 的 timing-function 有一个需要引起注意的点，即：
timing-function 的执行位置为两个关键帧之间，而非整个动画
此处的 timing-function 指的是本文所讲的 steps 函数以及 linear、ease、cubic-bezier 等函数，这里还是通过一个简单的 demo 来了解这个点。首先看一下下面的动画效果：

steps作用位置
实现代码为：
[CSS] 纯文本查看 复制代码
<div class="test-a test"></div>

<div class="test-b test"></div>

...

.test-a {

  animation: changeColorOne 1s steps(1) infinite;

}

.test-b {

  animation: changeColorTwo 1s steps(1) infinite;

}

@keyframes changeColorOne {

  0% { background-color: red; }

  100% { background-color: blue; }

}

@keyframes changeColorTwo {

  0% { background-color: red; }

  25%{ background-color: blue; }

  75%{ background-color: red; }

  100% { background-color: blue; }

}



因此：steps 并非作用于整个动画，而是作用于每两个关键帧之间，所以整个动画的执行时间还是 Animation 中设定的 1s。



6、结束语
Animation 时间函数中的 steps() 确实不好理解，但是一旦掌握了它会为我们的开发工作带来很大的效率提升，节省很多调试时间，也能快速定位问题。
希望本文的讲解可以帮助你更好的理解和使用steps()。





欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2