css3 animation 中的 steps

steps

 

Specifies a stepping function, described above, taking two parameters. The first parameter specifies the number of intervals in the function. It must be a positive integer (greater than 0). The second parameter, which is optional, is either the value ‘start’ or ‘end’, and specifies the point at which the change of values occur within the interval. If the second parameter is omitted, it is given the value ‘end’.

粗略翻译如下： steps 函数指定了一个阶跃函数，第一个参数指定了时间函数中的间隔数量（必须是正整数）；第二个参数可选，接受 start 和 end 两个值，指定在每个间隔的起点或是终点发生阶跃变化，默认为 end。

这样理解起来可能还是有点抽象，我们来个实例：

#demo {
  animation-iteration-count: 2;
  animation-duration: 3s;
}

这是一个 3s * 2 的动画，我们分别对它应用 steps(3, start) 和 steps(3, end) ，做出阶跃函数曲线如下：

1. steps(3, start)

 

steps() 第一个参数将动画分割成三段。当指定跃点为 start 时，动画在每个计时周期的起点发生阶跃（即图中 空心圆 → 实心圆 ）。 由于第一次阶跃发生在第一个计时周期的起点处（0s），所以我们看到的第一步动画（初态）就为 1/3 的状态，因此在视觉上动画的过程为 1/3 → 2/3 → 1 。如果翻译成 JavaScript，大致如下：

var animateAtStart = function (steps, duration) {
  var current = 0;
  var interval = duration / steps;
  var timer = function () {
    current++;
    applyStylesAtStep(current);
    if (current < steps) {
      setTimeout(timer, interval);
    }
  };
  timer();
};

2. steps(3， end)

 

当指定跃点为 end，动画则在每个计时周期的终点发生阶跃（即图中 空心圆 → 实心圆 ）。 由于第一次阶跃发生在第一个计时周期结束时（1s），所以我们看到的初态为 0% 的状态；而在整个动画周期完成处（3s），虽然发生阶跃跳到了 100% 的状态，但同时动画结束，所以 100% 的状态不可视。因此在视觉上动画的过程为 0 → 1/3 → 2/3 （回忆一下数电里的异步清零，当所有输出端都为高电平的时候触发清零，所以全为高电平是暂态）。同样翻译成 JavaScript 如下：

var animateAtEnd = function (steps, duration) {
  var current = 0;
  var interval = duration / steps;
  var timer = function () {
    applyStylesAtStep(current);
    current++;
    if (current < steps) {
      setTimeout(timer, interval);
    }
  };
  timer();
};