谈谈网页中实现逐帧动画

前言

[本文写于2016年]我们在网页中经常需要一些动画效果，假如你的动画效果需要人为控制停止或者播放，我们一般就不会用gif来实现了！这里，就引出了我们今天讲到的逐帧动画！今天主要讲解几种方式来实现逐帧动画！大家可以根据项目情况来自己选择。功能最强大的要数jquery的spritely插件了，具体可以看：resource.haorooms.com/uploads/dem... ，文章后面也会讲到！

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 复制代码

<div id="divParent" style=" position:relative;">
	<div id="haorooms1" ></div>
	<div id="haorooms2" ></div>
	</div>

   #divParent div {
      width:75px;height:90px;background:url(http://sandbox.runjs.cn/uploads/rs/216/0y89gzo2/1-slow.png) no-repeat scroll 0px 0px transparent; position:absolute; top:0px; left:0px; z-index:1;
    }

js代码如下：

ini 复制代码

var i = 0;
        var nowShow = 2;
        var divParent = document.getElementById("divParent");
        window.setInterval(frameAnmi, 26);
        function frameAnmi() {
            if (i > 80) { i = 0; }
            nowShow = (nowShow == 2) ? 1 : 2;
            var logo = document.getElementById("haorooms" + nowShow);
            logo.style.backgroundPosition = "-" + i * 75 + "px 0px";
            divParent.appendChild(logo);
            i++; 
        }

这样也可以实现逐帧动画。

关于网页中实现逐帧动画，还有其他方法，我今天就主要介绍主流的这三种！希望大家根据自己实际情况，选择自己适合的场景来使用！