利用CSS steps 实现逐帧动画

【前言】

本文总结下利用CSS steps 实现逐帧动画。

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

PS：江湖传言CSS动画性能更佳，可web环境过于复杂，哪个性能好可能需要参照具体情况测试。常见的网页动画形式参考：9种网页动画常用实现方式总结

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

【主体】

通过CSS直接实现动画效果标准化、资源占用少。

缺点：旧IE不支持，现代浏览器支持情况有所差异，交互功能弱。所以仅适用于现代浏览器

【CSS实现逐帧动画的原理】

css逐帧动画是通过不断变换keyframes中每个阶段的背景来实现。

比如0%处和100%处分别使用不同的background就实现了最简单的画面切换。

一般的做法是先将动画的不同帧做成一张雪碧图，然后不断变换background-position来达到变换效果，但是直接使用会有这样的问题： css动画默认的动画过渡方式的平滑的，平滑的过渡对逐帧动画会造成类似滑动的效果，所以需要动画时间函数animation-timing-function中的steps属性来设置过渡方式，

这里先上demo对比：

               .avatar {
		  height: 200px;
		  width: 200px;
		  background: url(http://ww1.sinaimg.cn/large/67c839fajw1f2staqebnxj20nk05wjru.jpg) no-repeat 0 0;
		  /*visibility: hidden; */
		}
		.above:hover {
		  -webkit-animation: run .6s steps(1) infinite;
		  /*-webkit-animation: run .6s steps(1) infinite; */ 
		}
		.down:hover {-webkit-animation: run .6s linear infinite;}
		@keyframes run {
		  0% {background-position: 0 0;}
		  25% {background-position: -200px 0;}
		  50% {background-position: -400px 0;}
		  75% {background-position: -600px 0;}
		  100% {background-position: 0 0;}
		}
		@keyframes run2 {
		  0% {background-position: 0 0;}
		  100% {background-position: -800px 0;}
		}

        <h3>tips:鼠标悬停图片上方预览效果</h3>
	<p> 使用steps属性控制时间函数</p>
	<div class = 'avatar above'></div>
	<p> 使用linear控制时间函数</p>
	<div class = 'avatar down'></div>

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

.above:hover {
  -webkit-animation: run .6s steps(1,start) infinite;
}  /* 使用steps实现逐帧动画*/
.down:hover {
  -webkit-animation: run .6s linear infinite;
} /* 常规时间函数linear产生平滑的滑动效果*/

【理解steps】

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

steps将动画分成n段（n为第一个参数）也就是设置补间动画的间隔数，比如从白色到黑色的过渡，常规曲线函数会渐进地补间其中的灰色，而如果将设置为steps(2)，则中间的补间只有一个rgb都为125的灰色，而start与end可以理解为关键帧的跳跃时机，设置为start的时候，关键帧在0秒完成跳跃，由于在0秒已经完成了跳跃，所以我们视觉上所见的也就是第一个关键帧之后的一帧

将其第一个参数设为steps(1) ，意味着将不对动画分段，也就是不插入补间动画，这样也就实现了逐帧播放，由于steps这个特性，反之，如果我们将动画只设置两个关键帧，由steps(4)来分段，那么就省去了手动设置keyframes中的百分比关键帧。

于是在对比demo中，我们可以加入另一个实现同样效果的动画：

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

等效转换：

.above:hover {
		  -webkit-animation: run .6s steps(4) infinite;
		  /*-webkit-animation: run .6s steps(1) infinite; */ 
		}
@keyframes run {
		  from{background-position:0px 0px;}
		  to{background-position: -800px 0px;}
		}

等价于

.above:hover {
		  -webkit-animation: run .6s steps(1) infinite;
		  /*-webkit-animation: run .6s steps(1) infinite; */ 
		}
@keyframes run {
		  0% {
		    background-position: 0 0;
		  }
		  25% {
		    background-position: -200px 0;
		  }
		  50% {
		    background-position: -400px 0;
		  }
		  75% {
		    background-position: -600px 0;
		  }
		  100% {
		    background-position: 0 0;
		  }
		}

利用CSS steps 实现逐帧动画

猜你喜欢