网页逐帧动画的实现方法
网页中的逐帧动画大致可以分为两类实现方式，即使用JS控制和纯粹使用CSS。 两者的优缺点大体总结如下： JS动画可控性更强，但费用高，实现复杂。 CSS动画实现比JS简单。
常用网页动画方法参考：mark？ 网页动画9种常见实现方法总结
PS：有传言说CSS动画性能更好，但是web环境太复杂，哪个性能可能需要根据具体情况进行测试，这里有一篇博客系统阐述了CSS和JS动画的性能对比：mark ？ 清除疑虑：CSS Anime 与 JavaScript
另外，JS控制的动画又可以分为JS控制的canvas动画、SVG动画、直接控制图片和元素位置实现的动画。 总之，JS动画比较复杂。
用CSS实现逐帧动画的原理
CSS逐帧动画是通过在关键帧中不断改变各个阶段的背景来实现的。 例如，分别在0%和100%处使用不同的背景，实现最简单的屏幕切换。 通常的做法是先将动画的不同帧做成精灵图，然后不断改变background-position来达到变换效果，直接使用就会出现这样的问题：css默认的动画过渡形式动画平滑平滑的过渡会对逐帧动画造成类似滑动的效果css帧动画，所以需要动画时间函数的animation-timing-function中的steps属性来设置过渡模式。 先来个demo对比：
使用steps时间函数和传统时间函数的逐帧动画对比
这两个动画的区别仅在于动画中的时间函数参数：
.above:hover {
-webkit-animation: run .6s steps(1,start) infinite;
} /* 使用steps实现逐帧动画*/
.down:hover {
-webkit-animation: run .6s linear infinite;
} /* 常规时间函数linear产生平滑的滑动效果*/了解步骤
对于steps属性的理解，我读过几篇博客，但是越讲越邪恶，这个属性是用来控制动画关键帧的过渡（tween）形式的，而常规的css动画过渡平滑，如前面的demo所示，浏览器会手动将补间动画插入到关键帧区间（学过flash的同学应该熟悉这些概念），这样视觉上就不会出现闪烁，而css控制过渡的形式的属性是animation-timing-function，它的值不仅可以设置Bezier曲线Cubic-bezier（类似ease、线性等也属于曲线函数）还有我们的steps、句型该属性为steps(number, start|end) 接受两个参数，第一个参数是正整数，将动画分为若干段，第二个参数是关键帧的变化位置css帧动画，默认为结束。 还提供了开始和结束的详细解释。 您可以参考这里：
mark?CSS3timing-function:steps() 解读
但上一篇博客中的例子并不直观。 我自己举了一个例子，或许有助于理解。 步骤将动画分为n段（n为第一个参数），即设置补间动画的间隔数。 例如，从红色到紫色的过渡，常规曲线函数会逐渐补间其中的黑色，如果设置为steps(2)，则中间补间只有一个蓝色，rgb均为125，并且开始和end可以理解为关键帧的跳转时机，当设置为start时，关键帧在0秒时跳转，因为0秒时跳转已经完成，所以我们直观看到的是第一个关键帧和然后是一帧，也就是下面的demo也可以解释一下（对比demo中步骤的设置很容易理解）：
了解步骤时间函数
扯太远了，我们还是回到逐帧动画吧。 上面的demo解释了逐帧动画的实现基础，即将其第一个参数设置为steps(1)表示动画不会被分段，即不会插入补间动画，这样frame-实现逐帧播放，由于步骤的特点，相反，如果我们只为动画设置两个关键帧，按步骤(4)分段，这样就省去了自动设置关键帧的比例关键帧。
所以在对比demo中，我们可以添加另一个动画来达到同样的效果：
@keyframes run2 {
0% {
background-position: 0 0;
}
100% {
background-position: -800px 0; /* 直接将后关
键帧设置为图片末尾，在animation属性设置中就可以利
用steps分段的特性来省去手动设置keyframes
*/
}
}附上类似的博客供参考：
mark？CSS3实现跑步动画
明天这篇博客好像很啰嗦，回去喝水吧~
发表评论