前言
本文写于2016年\]我们在网页中经常需要一些动画效果，假如你的动画效果需要人为控制停止或者播放，我们一般就不会用gif来实现了！这里，就引出了我们今天讲到的逐帧动画！今天主要讲解几种方式来实现逐帧动画！大家可以根据项目情况来自己选择。功能最强大的要数jquery的[spritely](https://link.juejin.cn?target=http%3A%2F%2Fresource.haorooms.com%2Fsoftshow-29-253-1.html "http://resource.haorooms.com/softshow-29-253-1.html")插件了，具体可以看：[resource.haorooms.com/uploads/dem...](https://link.juejin.cn?target=http%3A%2F%2Fresource.haorooms.com%2Fuploads%2Fdemo%2Fmedia%2Fanimate%2Fspritely%2Findex.html "http://resource.haorooms.com/uploads/demo/media/animate/spritely/index.html") ，文章后面也会讲到！ ## css3实现逐帧动画 看如下两个例子: 具体代码如下： ```css #foxtail { background: url(http://sandbox.runjs.cn/uploads/rs/216/0y89gzo2/foxtail.png) 0 0 no-repeat; width: 156px; height: 156px; } @keyframes animate-tail { 0% {background-position: -6864px 0; } 100% {background-position: 0 0;} } #foxtail { animation: animate-tail 3.75s steps(44) infinite; } /** 小孩动画**/ @keyframes run { 0% { background-position: 0 0; } 100% { background-position: -6000px 0; } } @-webkit-keyframes run { 0% { background-position: 0 0; } 100% { background-position: -6000px 0; } } #sprite { width: 75px; height: 90px; background: url("http://sandbox.runjs.cn/uploads/rs/216/0y89gzo2/1-slow.png") 0 0 no-repeat; -webkit-animation: run 1s steps(80) infinite;/*80帧*/ animation: run 1s steps(80) infinite; } ``` 上面的2个动画实现方式是一致的。假如图片几个关键帧（之前用过flash的肯定知道关键帧）,位置不一样，用上面的方法可能会跳动。那么我们可以分别来指定位置。只要最后我们用如下： ```css -webkit-animation:动画名字 1s steps(1) infinite; ``` 就可以了。 **注意：steps的使用** ```scss steps 函数指定了一个阶跃函数，第一个参数指定了时间函数中的间隔数量（必须是正整数）；第二个参数可选，接受 start 和 end 两个值，指定在每个间隔的起点或是终点发生阶跃变化，默认为 end 比如：steps(1,start)、steps(1,end)或者steps(1) ``` ## jquery插件来实现逐帧动画 我在这里推荐的是jquery的spritely这个插件！ 用插件兼容性相对较好，而且功能强大，可以让动画跟随鼠标，可以翻转，可以调整速度等等。 上面的代码我们用jquery插件可以这么写： ```php $("#foxtail").sprite({ fps: 12, no_of_frames: 44 }); $("#sprite").sprite({ fps: 12, no_of_frames: 80 }); ``` 假如要跟随鼠标点击： ```scss $('#sprite').sprite({fps: 12, no_of_frames: 80}).activeOnClick().active(); $('body').flyToTap(); ``` 具体大家可以下载插件看一下！ ## js实现 为了防止空白不自然，可以用2个div重叠进行！ ```css