[练习]利用CSS steps 实现逐帧动画

摘要：网页逐帧动画的实现方式网页中的逐帧动画，大致可分为两大类的实现方式，分别是使用控制，和单纯使用实现，两者的优劣总体概括来说就是动画可控性更强，但开销大，实现复杂。

网页中的逐帧动画，大致可分为两大类的实现方式， 分别是使用JS控制，和单纯使用CSS实现，两者的优劣总体概括来说就是： JS动画可控性更强，但开销大，实现复杂。 CSS动画实现相对JS更简单。
常见的网页动画形式参考：mark? 9种网页动画常用实现方式总结
PS：江湖传言CSS动画性能更佳，可web环境过于复杂，哪个性能好可能需要参照具体情况测试， 这里有篇博客较为系统地阐述了css与JS动画在性能上的比较： mark? 消除疑问：CSS动画 VS JavaScript

另外在JS控制的动画中，又可分为JS控制的canvas动画， SVG动画，以及直接控制图片，元素的位置来实现的动画。一句话，JS动画更复杂。

css逐帧动画是通过不断变换keyframes中每个阶段的背景来实现，比如0%处和100%处分别使用不同的background就实现了最简单的画面切换。 一般的做法是先将动画的不同帧做成一张雪碧图，然后不断变换background-position来达到变换效果， 但是直接使用会有这样的问题： css动画默认的动画过渡方式的平滑的，平滑的过渡对逐帧动画会造成类似滑动的效果，所以需要动画时间函数animation-timing-function中的steps属性来设置过渡方式，这里先上demo对比：

使用steps时间函数与常规时间函数实现逐帧动画的对比

这两个动画的区别仅在animation中时间函数参数：

.above:hover {
  -webkit-animation: run .6s steps(1,start) infinite;
}  /* 使用steps实现逐帧动画*/

.down:hover {
  -webkit-animation: run .6s linear infinite;
} /* 常规时间函数linear产生平滑的滑动效果*/

对于steps属性的理解，我翻过好几篇博客，但有点越讲越邪乎，我的理解，该属性用于控制动画关键帧的过渡(补间)方式， 常规的css动画过渡，都是平滑的， 正如上面demo中所展示， 浏览器会自动为关键帧的间隔中插入补间动画(学过flash的朋友对这几个概念应该很熟悉) ，以便视觉上不会出现闪烁， css控制过渡方式的属性是animation-timing-function ，它的值除了可以设置贝塞尔曲线Cubic-bezier(类似的ease，linear等也属于曲线函数) 还有就是我们的steps，该属性的语法为steps(number， start|end) 接受两个参数，第一个参数为正整数，将一段动画分成number段，第二个参数为为关键帧的变化位置， 默认为end，关于start和end的详细讲解也可以参考这里：
mark?CSS3 timing-function: steps() 详解

但上面这篇博客中的例子并不直观，我自己做了个例子，可能有助理解，steps将动画分成n段（n为第一个参数） 也就是设置补间动画的间隔数，比如从白色到黑色的过渡，常规曲线函数会渐进地补间其中的灰色， 而如果将设置为steps(2)，则中间的补间只有一个rgb都为125的灰色，而start与end可以理解为关键帧的跳跃时机， 设置为start的时候，关键帧在0秒完成跳跃，由于在0秒已经完成了跳跃，所以我们视觉上所见的也就是第一个关键帧之后的一帧，这也可以解释下面的demo(对比demo中steps的设置便于理解)：
理解steps时间函数

扯得太远，让我们回到逐帧动画， 以上demo解释了逐帧动画的实现基础，也就是将其第一个参数设为steps(1) ，意味着将不对动画分段，也就是不插入补间动画，这样也就实现了逐帧播放，由于steps这个特性，反之，如果我们将动画只设置两个关键帧，由steps(4)来分段，那么就省去了手动设置keyframes中的百分比关键帧。
于是在对比demo中，我们可以加入另一个实现同样效果的动画：

@keyframes run2 {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -800px 0; /* 直接将后关
    键帧设置为图片末尾，在animation属性设置中就可以利
    用steps分段的特性来省去手动设置keyframes
    */
  }
 
}

附一篇类似博客作参考：
mark? CSS3 实现奔跑动画
这博客今天写得貌似很啰嗦，回家吃饭了~