[CSS]一文了解Animation步骤中的时间函数

时间：2023-03-31 13:55:46 CSS

使用CSS3Animation可以制作动画，可以在很多页面中替代Flash、JS等，提高页面加载速度。众所周知，Animation有8个属性，如下：属性名称介绍animation-name指定需要绑定选择器的关键帧名称animation-duration完成动画所花费的时间，单位为秒或毫秒animation-timing-function指定动画animation-delay动画开始前的延迟animation-iteration-count动画播放的次数animation-direction指定动画是否依次播放animation-play-state指定动画是否正runningorpausedanimation-fill-modewhenanimation不播放时（动画完成或动画延迟），以上8个属性要应用到元素的样式上，决定了Animation可以实现什么样的动画效果。本文主要介绍timing-function中的steps()函数。执行动画时默认使用ease函数进行动画过渡，ease会在每个关键帧之间插入tween动画，所以动画效果是连贯的。除了ease函数，linear和cubic-bezier（贝塞尔曲线）等过渡函数也会为其插入补间动画。但有时有些效果不需要补间，只需要在关键帧之间跳转即可。这时候就用到了steps()过渡方法。1.步骤是什么？steps()是Animation中的一个时序函数，可以实现动画的步长变化，而不是两个状态之间的线性过渡。steps()接收两个参数：steps(n,[start|end])第一个参数为正值，指定动画分割的段数，第二个参数定义动画执行的起始点，可以设置开始或结束，这个值是可选的。当不传入任何参数时，默认以结束方式执行。2.如何使用步骤？经典的菊花加载效果图大家都看过，它的实现原理很简单：一张静态图片，然后给它加上动画：设置旋转（rotate）在固定步数（rotate）360度内实现加载效果，具体实现如下：

....loading-dot-step{动画:loading1sinfinitesteps(12,start);}@keyframesloading{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}静态图如图图片：给上面的静态图片添加动画，steps设置12个steps完成两个关键帧之间的运动轨迹，即从当前状态旋转360度，实现下面gif的动画效果。除了菊花加载效果外，还有线性加载，利用timing-function的线性过渡函数来实现图片的连续旋转。此时的效果在视觉上是一个连续的动画，如下图：两种加载效果图，第一种是steps方式，第二种是线性过渡方式。两者的实现原理类似：都是在两个关键帧之间将图片从当前状态旋转360度。当timing-function设置为linear时，状态从0%到100%的变化是均匀的线性变化；当动作设置为steps时，整个动画从0度旋转到360度分为12步，每一步之间都有跳跃，于是就出现了经典的菊花加载效果。3.区分start和endsteps的执行点。开始和结束是很多人疑惑的地方。误用start和end可能会产生与理想条件不一致的动画效果。很多人分不清两者的区别。下面通过几个简单的demo来帮助理解这两个属性值的区别。steps()可以简化step-start和step-end这两个关键字。step-start相当于steps(1,start)，动画分为1个step，动画从左端点开始执行。step-end相当于steps(1,end)，动画分为1个step，动画从结束端点开始执行

1,steps(1,start)

2,steps(1,end)

....a{animation:changeColor4s无限步(1,开始);}.b{animation:changeColor4sinfinitesteps(1,end);}@keyframeschangeColor{0%{background-color:red;}100%{背景颜色：蓝色；}}以上代码的显示效果如下图所示：1.steps(1,start)2,steps(1,end)代码是可见的，都设置为在一个动画执行完之后步骤，div的颜色由红色变为蓝色，但是我们看到的结果不一样，这是start和end属性的执行点不同造成的。steps()函数图在规范文档中给出，如下图所示：比较steps函数中start和end两个执行点，从两图可以看出随着steps中的步数上图步数为1：整个动作只有一步，时间为0，位置设置为start时，动画第一步已经执行完毕可见s??tart的执行点为第一步执行结束，end的执行点是第一步还没有开始的位置。由于动画执行的步数相同但起点不同，所以动画的终点也不同。设置为start时，end点为动画结束时最后一步的状态，end为上一步的状态。为了更直观的展示两次执行的起点和终点的区别，本文以横坐标图的形式展示了执行过程：当属性值设置为start时，动画的第一段将在动画开始后立即完成。从左边的端点开始，立即跳转到第一步的结尾，并保持这个状态，直到第一步的持续时间结束（后面的每一帧都会按照这个模式完成动画）。当该属性值设置为end时，在动画执行的每一帧中，动画会保持当前状态，直到这段时间的持续时间结束，然后跳转到下一步的起点（后面的每一帧都遵循这种模式)。现在我们可以解释为什么上面demo中两个div的颜色显示不同了。对于steps属性值为start的a-box，进入画面时第一阶段动画已经完成，所以我们不会看到红色，直接显示蓝色；对于steps属性值为end的b-box，动画一直保持第一帧的状态直到结束，所以一直显示为红色。4.什么时候用台阶？并不是所有的动画都是连续的，有些不连续的变化需要步骤。比如时钟的秒针步进旋转，或者模仿动画中人物或动物的脚印，或者使用Sprite实现人物奔跑的效果等。下面详细介绍人物奔跑的实现影响。角色运行演示

....person{background:url('person.jpg')no-repeat;背景大小：800%；//动画名称时长运动曲线（steps()分为若干步）animation:personBlast.8ssteps(7)infinite;}@keyframespersonBlast{0%{背景位置：左；}100%{背景位置：右；其中person.jpg为精灵图除以人物动作：本文中的奔跑动作是通过将原始精灵图放大图形帧数的倍数，然后设置steps为精灵图帧数减去来实现的1（8帧分7步完成执行），关键帧的动作是从（from）精灵图的左边逐步跳到右边（to），最终实现如下跑步效果：【注意：这个跑步效果的实现方式各不相同，这里只是其中一种，为了让大家更好的了解steps的应用场景，还有其他更友好的实现方式。欢迎与我们交流]5.请注意！！！对于Animation的timing-function，有一点需要注意，就是timing-function的执行位置是在两个关键帧之间，而不是整个动画。这里的timing-function是指本文提到的steps函数和Linear、ease、cubic-bezier等函数。这是一个简单的演示来理解这一点。先看下面的动画效果：实现代码为：