图片逐帧成动画效果

 

我想要的效果是这样（下面的是gif动画）：

我以为是通过animation实现的，然后自己就尝试了下：

<!DOCTYPE html>
<html>
  <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <style type="text/css">
            * {
                margin: 0px;
                padding: 0px;
            }
             
            body {
                position: relative;
                width: 100%;
                background-color:black;
            }
            #ele{
                background-image:url(seq.png);
                width:40px;height:40px;
                position:absolute; top:50%; left:50%; margin-top:50px;
              -webkit-animation: auto-circle 2s steps(6) infinite;//这里强调下，steps（），动画几帧就几steps，不然效果会变成被拉着的感觉
            }
             @-webkit-keyframes auto-circle{ 
                100%{
                  background-position-x: 240px;
                } 
                }
        </style>
    </head>
 <body>
        <div id="ele" ></div>
 </body>
</html>

当然不是我要的效果，它变成了这样的效果，到最后一帧返回第一帧时钝的很。

现在来分析原因

因为图片8排6列是这样的，我用animation只是简单用了头1排张所以动画显得很蠢

假如我把图片，对，我切片成条了

 

再利用上面animated方法及js,下面js代码通过javascript不断的改变帧图片的background-position

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <style type="text/css">
            #ele{
                background-image:url(js%E5%AE%9E%E7%8E%B0%E5%B8%A7%E5%8A%A8%E7%94%BB/tiao.png);
                position:absolute; top:50%; left:50%; margin-top:50px; width:39px;height:40px;
                }
        </style>
        <script type="text/javascript">
         (function(){ window.frameAnimation = { anims:(function(){ 
         /* obj=>需要执行背景动画的对象； width:图片的总宽度 steps=>需要的帧数； eachtime=>一次完整动画需要的时间； times=>动画执行的次数 0表示无限反复 */ 
            return function(obj,width,steps,eachtime,times, callback){ 
               var runing = false; 
               var handler = null; //obj,width,steps,eachtime,times定时器 
               var step = 0; //当前帧 
               var time = 0; //当前第几轮 
               var speed = eachtime*500/steps; //间隔时间 
               var oneStepWidth = width/steps; 
               function _play(){ 
                  if(step >= steps){ step = 0; time++; } 
                  if(0 == times || time < times){ 
                     obj.css('background-position', -oneStepWidth * step + 'px 0px'); step++; 
                     }else{ 
                     control.stop(); callback && callback(); 
                     } 
               } 
               var control = { 
                   start:function(){ 
                       if(!runing){ runing = true; step = time = 0; handler = setInterval(_play, speed); } 
                       return this;
                   } ,
                   stop:function(restart){
                        if(runing){
                             runing = false; 
                             if(handler){
                                  clearInterval(handler);
                                   handler = null;
                             } 
                             if(restart){
                                  obj.css('background-position', '0 0'); step = 0; time = 0; 
                             }
                      }
                 } ,
                 dispose:function(){ 
                    this.stop(); //
                    console.log('anim dispose'); 
                } 
            };
            return control; 
        } 
    })() 
} 
})(window);
window.onload=function play(){ var anim = frameAnimation.anims($('#ele'),1801,45,3,0); anim.start(); }
 </script>

 

再看下效果

显然已经很接近，但是，有以下几个问题：横条图片尽然比排列图片大1倍，性能不好；

用js加载用时更惨

在背景色为纯黑的时候，明显的像素问题

所以换个思路：用js不断的改变帧图片的background-position，

<script>
    var ele = document.getElementById("ele");
    var heng=0   //横行，图片是8纵6横
    var counts= 0  
    var  zong = 0   //纵行，
    /*原理：让每帧在div(大小40*40也是每帧大小)里走，走一个减去一个heng，当一排6个都走完了，减去一个zong，heng归0又开始计数；再叫第二排一个一个走*/
    setInterval(function(){
        ele.style.backgroundPosition = ((-40*heng)+"px "+(counts)+"px");
        heng++;
        if(heng>=6){
            heng=0
            counts = -40*zong;
            zong++;
            if(zong>=8){ zong=0;}
        }
    },100)
    </script>

现在看看性能图

黑背景的演示效果

完美~~

 

 posted on 2017-10-26 08:42  bahoo  阅读(1247)  评论(0)  编辑  收藏  举报