谈谈网页中实现逐帧动画

39468次浏览

前言

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

css3实现逐帧动画

看如下两个例子:

具体代码如下:

#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的肯定知道关键帧),位置不一样,用上面的方法可能会跳动。那么我们可以分别来指定位置。只要最后我们用如下:

-webkit-animation:动画名字 1s steps(1) infinite;

就可以了。

注意:steps的使用

steps 函数指定了一个阶跃函数,第一个参数指定了时间函数中的间隔数量(必须是正整数);第二个参数可选,接受 start 和 end 两个值,指定在每个间隔的起点或是终点发生阶跃变化,默认为 end 
比如:steps(1,start)、steps(1,end)或者steps(1)

jquery插件来实现逐帧动画

我在这里推荐的是jquery的spritely这个插件!

用插件兼容性相对较好,而且功能强大,可以让动画跟随鼠标,可以翻转,可以调整速度等等。

上面的代码我们用jquery插件可以这么写:

$("#foxtail").sprite({ fps: 12, no_of_frames: 44 });
 $("#sprite").sprite({ fps: 12, no_of_frames: 80 });

假如要跟随鼠标点击:

$('#sprite').sprite({fps: 12, no_of_frames: 80}).activeOnClick().active();
$('body').flyToTap();

具体大家可以下载插件看一下!

js实现

为了防止空白不自然,可以用2个div重叠进行!

<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代码如下:

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++; 
        }

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

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

Tags: 动画css3

相关文章: