JS运动

JS运动对元素样式操作，

运动基础：

如何让div运动起来？

如下：

1.设置元素为决定定位，只有绝对对位后，left,top等值生效

2.定时器的使用(动态改变值)，这里使用setInterval()每隔一段时间执行代码

setInterval(函数,交互时间)；

clearInterval(定时器名)，

3.获取当前位置、大小等等。offsetLeft(当前元素相对父元素偏执)

4.速度--物体运动的快慢

根据上面的代码实现简单的运动

    var box=document.getElementById("box");
    function startMove(curEle){
        timer=setInterval(function(){
            curEle.style.left=curEle.offsetLeft+5+"px";
        },30)
    }
    startMove(box)

上面的这个动画不会停止，ok，我们设置一个停止条件

  var box=document.getElementById("box");
    var timer=null;
    function startMove(curEle,target){
        timer=setInterval(function(){
            if (curEle.offsetLeft===target){
                clearInterval(timer);
                return;
            }
            curEle.style.left=curEle.offsetLeft+5+"px";
        },30)
    }
    startMove(box,800)

我们发现一个BUG，个别值不会触发停止条件

BUG:

1.运动到某些值无法停止

2.重复点击会加快速度

3.速度无法改变

解决：

1.一会搞

2.每次点击清除定时器

3.把速度以变量保存

    var box=document.getElementById("box");
    var timer=null;
    function startMove(curEle,target){
        clearInterval(timer)
        timer=setInterval(function(){
            var speed=5;
            if (curEle.offsetLeft===target){
                clearInterval(timer);
                return;
            }
            curEle.style.left=curEle.offsetLeft+speed+"px";
        },30)
    }
    btnLeft.onclick=function(){startMove(box,800)}

等一下，方向为什么不能变:我现在想向左走了

    var box=document.getElementById("box");
    var timer=null;
    function startMove(curEle,target){
        clearInterval(timer);
        var curPos=curEle.offsetLeft;
        //        判断当前值与目标值谁大谁小
        var speed=curPos>target?-7:7;
        timer=setInterval(function(){
            var curLeft=curEle.offsetLeft;
//            先加速度，计算后的值进行判断
            curLeft+=speed;
            if (speed>0&&curLeft>=target){
                curEle.style.left=target+"px";
                clearInterval(timer);
                return;
            }else if(speed<0&&curLeft<=target){
                curEle.style.left=target+"px";
                clearInterval(timer);
                return;
            }
            curEle.style.left=curLeft+"px";
        },30)
    }
    btnLeft.onclick=function(){startMove(box,document.documentElement.clientWidth-box.offsetWidth)}

如果是透明度，我们怎么办，需要特殊判断

补充的两个方法

getcss获取样式

   function getCss(curEle,attr){
        var val=null;
        if (!/MSIE (6|7|8)/.test(window.navigator.userAgent)){
            val=window.getComputedStyle(curEle,null)[attr]
        }else{
            if (attr==="opacity"){
                val=curEle.currentStyle["filter"];
                var reg=/^alpha(opacity=(d+(?:.d+)?))/
                val=reg.exec(val)?reg.exec(val)[1]/100:1;
            }else{
                val=curEle.currentStyle[attr];
            }
        }
//        去单位
        var reg=/^(-?d+(.d+)?)(px|pt|rem|em)$/;
        return reg.test(val)?parseFloat(val):val;
    }

setcss设置样式

    function setCss(curEle,attr,value){
        if (attr==="opacity"){
            curEle["style"]["opacity"]=value;
            curEle["style"]["filter"]="alpha(opacity="+value*100+")";
            return
        }
        if (attr==="float"){
            curEle["style"]["cssFloat"]=value;
            curEle["style"]["styleFloat"]=value;
            return
        }
        var reg=/^(width|height|left|top|bottom|right|((maring|padding)|(Left|Right|Top|Bottom)?))$/i;
        if (reg.test(attr)){
            if (!isNaN(value)){
                value+="px";
            }
        }
        curEle["style"][attr]=value;
    }

思路一：步长法

   var duration=2000,interval=10,target=600,change=target-getCss(box,"left");
    var step=change/duration*interval;
    var timer=setInterval(function(){
        var curLeft=getCss(box,"left");
        curLeft+=step;
        if (curLeft>target){
            setCss(box,target)
            clearInterval(timer);
            return
        }
        curLeft+=step;
        setCss(box,"left",curLeft)
    },interval)

思路二、

    function Linear(t,d,c,b){
        return t/d*c+b
    }

    var duration=2000,time= 0,begin=getCss(box,"left"),target=1200;
    var change=target-begin;
    var timer=setInterval(function(){
        time+=10;
        var pos=Linear(time,duration,change,begin);
        console.log(pos)
        if (time>duration){
            setCss(box,target)
            clearInterval(timer)
            return
        }
        setCss(box,"left",pos)
    },10)

思路三：使用setTimeout实现定时器

//使用递归思想实现   
 var timer=null;
    function move(){
//        每一次执行，清空定时器
        clearTimeout(timer);
        var duration=2000,interval=10,target=600,change=target-getCss(box,"left");
        var step=change/duration*interval;
        var curLeft=getCss(box,"left");
        curLeft+=step;
//      当前left+step大于target时；直接让left=target
        if (curLeft>target){
            setCss(box,"left",curLeft);
            clearTimeout(timer);
            return
        }
        setCss(box,"left",curLeft);
         timer=setTimeout(move,interval)
    }
    move();

进化：可以用按钮控制方向

    function move(target){
        _move()    //此处为什么+小_move,看定时器
        function _move(){
            clearTimeout(box.timer)
            var duration=2000,interval=10;
            var curLeft=getCss(box,"left");
            if (target>curLeft){
                curLeft+=5;
                if (curLeft>target){
                    curLeft=target;
                    clearTimeout(box.timer)
                }

            }else if(target<curLeft){
                curLeft-=5;
                if (target>curLeft){
                    curLeft=target;
                    clearTimeout(box.timer)
                }
            }
            setCss(box,"left",curLeft);
            box.timer=window.setTimeout(_move,interval)  //定时器之前因为move有参数，所以要先执行个匿名函数，再匿名函数中执行move(target),每次递归都会创建一个多余的作用域，浪费资源
        }
    }
    btL.onclick=function(){
        var target=0;
        move(target);
    }
    btR.onclick=function(){
        var target=(document.documentElement.clientWidth||document.body.clientWidth)-getCss(box,"width");
        move(target)

    }

同元素多样式运动

 function linear(t,d,b,c){
        return t/d*c+b;
    }
   function move(curEle,target,duration,callback){
//先计算出，初始值与距离存在两个变量里
       var begin={},change={};
       duration=duration||2000;
       for(var key in target){
           if (target.hasOwnProperty(key)){
               begin[key]=utils.css(curEle,key);
               change[key]=target[key]-begin[key];
           }
       }

       var time=0;
       curEle.timer=setInterval(function(){
           time+=10;
           for(var key in target){
               if (target.hasOwnProperty(key)){
//当time 时间超过了总时间停止运动
                   if (time>duration){
                       utils.css(curEle,key,target[key]);
                       clearInterval(curEle.timer);
//停止运动时执行回调函数
                       callback&&callback()
                       return;
                   }
                   var curPos=linear(time,duration,begin[key],change[key]);
                   utils.css(curEle,key,curPos)
               }
           }
           },30)

   }
    move(box,{
        left:"100",
        top:"100",
        opacity:"1"
    },200,function(){
        console.log("动画执行完了")
    })

万能动画框架 

//以下是动画的算法
var zhufengEffect = {
    //当前时间*变化量/持续时间+初始值
    zfLinear: function(t,b,c,d){ return c*t/d + b; },
    Quad: {//二次方的缓动（t^2）；
        easeIn: function(t,b,c,d){
            return c*(t/=d)*t + b;
        },
        easeOut: function(t,b,c,d){
            return -c *(t/=d)*(t-2) + b;
        },
        easeInOut: function(t,b,c,d){
            if ((t/=d/2) < 1) return c/2*t*t + b;
            return -c/2 * ((--t)*(t-2) - 1) + b;
        }
    },
    Cubic: {//三次方的缓动（t^3）
        easeIn: function(t,b,c,d){
            return c*(t/=d)*t*t + b;
        },
        easeOut: function(t,b,c,d){
            return c*((t=t/d-1)*t*t + 1) + b;
        },
        easeInOut: function(t,b,c,d){
            if ((t/=d/2) < 1) return c/2*t*t*t + b;
            return c/2*((t-=2)*t*t + 2) + b;
        }
    },
    Quart: {//四次方的缓动（t^4）；
        easeIn: function(t,b,c,d){
            return c*(t/=d)*t*t*t + b;
        },
        easeOut: function(t,b,c,d){
            return -c * ((t=t/d-1)*t*t*t - 1) + b;
        },
        easeInOut: function(t,b,c,d){
            if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
            return -c/2 * ((t-=2)*t*t*t - 2) + b;
        }
    },
    Quint: {//5次方的缓动（t^5）；
        easeIn: function(t,b,c,d){
            return c*(t/=d)*t*t*t*t + b;
        },
        easeOut: function(t,b,c,d){
            return c*((t=t/d-1)*t*t*t*t + 1) + b;
        },
        easeInOut: function(t,b,c,d){
            if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
            return c/2*((t-=2)*t*t*t*t + 2) + b;
        }
    },
    Sine: {//正弦曲线的缓动（sin(t)）
        easeIn: function(t,b,c,d){
            return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
        },
        easeOut: function(t,b,c,d){
            return c * Math.sin(t/d * (Math.PI/2)) + b;
        },
        easeInOut: function(t,b,c,d){
            return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
        }
    },
    Expo: {//指数曲线的缓动（2^t）；
        easeIn: function(t,b,c,d){
            return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
        },
        easeOut: function(t,b,c,d){
            return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
        },
        easeInOut: function(t,b,c,d){
            if (t==0) return b;
            if (t==d) return b+c;
            if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
            return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
        }
    },
    Circ: {//圆形曲线的缓动（sqrt(1-t^2)）；
        easeIn: function(t,b,c,d){
            return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
        },
        easeOut: function(t,b,c,d){
            return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
        },
        easeInOut: function(t,b,c,d){
            if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
            return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
        }
    },
    Elastic: {//指数衰减的正弦曲线缓动；
        easeIn: function(t,b,c,d,a,p){
            if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
            if (!a || a < Math.abs(c)) { a=c; var s=p/4; }
            else var s = p/(2*Math.PI) * Math.asin (c/a);
            return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
        },
        easeOut: function(t,b,c,d,a,p){
            if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
            if (!a || a < Math.abs(c)) { a=c; var s=p/4; }
            else var s = p/(2*Math.PI) * Math.asin (c/a);
            return (a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b);
        },
        easeInOut: function(t,b,c,d,a,p){
            if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);
            if (!a || a < Math.abs(c)) { a=c; var s=p/4; }
            else var s = p/(2*Math.PI) * Math.asin (c/a);
            if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
            return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
        }
    },
    Back: {//超过范围的三次方缓动（(s+1)*t^3 - s*t^2）；
        easeIn: function(t,b,c,d,s){
            if (s == undefined) s = 1.70158;
            return c*(t/=d)*t*((s+1)*t - s) + b;
        },
        easeOut: function(t,b,c,d,s){
            if (s == undefined) s = 1.70158;
            return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
        },
        easeInOut: function(t,b,c,d,s){
            if (s == undefined) s = 1.70158; 
            if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
            return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
        }
    },
    zfBounce: {//指数衰减的反弹缓动。
        easeIn: function(t,b,c,d){
            return c - zhufengEffect.zfBounce.easeOut(d-t, 0, c, d) + b;
        },
        easeOut: function(t,b,c,d){
            if ((t/=d) < (1/2.75)) {
                return c*(7.5625*t*t) + b;
            } else if (t < (2/2.75)) {
                return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
            } else if (t < (2.5/2.75)) {
                return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
            } else {
                return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
            }
        },
        easeInOut: function(t,b,c,d){
            if (t < d/2) return zhufengEffect.zfBounce.easeIn(t*2, 0, c, d) * .5 + b;
            else return zhufengEffect.zfBounce.easeOut(t*2-d, 0, c, d) * .5 + c*.5 + b;
        }
    }
}
////////////////////以上都是算法
/*
    animate的参数：当effect参数是数字的情况
    effect：是指定的动画效果，它可以由一个简单数字来快捷表示某种常用的动画效果，也可以以数组的方式来指定某个不常用的动画效果。还可以不给effect参数传值，则动画使用默认的效果（我们指定减速的效果为默认效果）
    如果用数字来快捷表示某种常用效果效，则
    0：减速效果Expo
    1:匀速效果:linear
    2:弹性:Elastic
    3:返回：Back
    4：反弹：Bounce

*/

/*
    effect参数的第二情况：当它是一个数组的情况
animate(ele,{left:600},1500,['zfBounce','easeInOut'],callback)

zhufengEffect.zfBounce.easeInOut
zhufengEffect["zfBounce"]["easeInOut"];
var a=['zfBounce','easeInOut'];
zhufengEffect[a[0]][a[1]];//要明白这一行和161，162是一样的

*/
/*
animate(ele,{left:600},1500,callback)
当第四个参数是function的时候（按理说第五个参数才应该是回调函数呢，现在由于第四个参数没有传，但是回调函数传进来了，则会出现回调函数成为第四个参数的可能）
    现在则需要把这个方法当成回调方法来执行。在这种情况下，则认为没指定动画效果，而是把第四个参数按成第五个参数：回调方法去执行

*/

/*

方法重载和方法重写，是面向对象的“多态”中的概念。面向对象有三大基本特征：封装、继承、多态（一个方法有多种形态，方法重载）
JS中是不支持方法重载的，但是可以使用判断参数的类型或参数个数来模拟实现方法重载
我们的animate方法就是这样

方法重写是指写义在子类上的方法覆盖了父类上的方法，比如Array.prototype.toString覆盖了Object.prototype.toString，在Array类的实例上再使用toString方法，就访问不到Object类上的toString方法了
*/
function animate(ele,obj,duration,effect,callback){
    var fnEffect=zhufengEffect.Expo.easeOut;
    
    if(typeof effect == "number"){
        switch(effect){
            case 0:
                break;
            case 1:
                fnEffect=zhufengEffect.zfLinear;
                break;
            case 2:
                fnEffect=zhufengEffect.Elastic.easeOut;
                break;
            case 3:
                fnEffect=zhufengEffect.Back.easeOut;
                break;
            case 4:
                fnEffect=zhufengEffect.zfBounce.easeOut;
                break;    
            
            
        }
    }else if(effect instanceof Array){
        if(effect.length==2)
            fnEffect=zhufengEffect[effect[0]][effect[1]];
    }else if(typeof effect =="function"){
        callback=effect;    
    }
    
    
    var oBegin={};//用来保存多个方向begin；
    var oChange={};//用来保存多个方向的change;
    
    var flag=0;//用来记录各个方向的距离是否有效
    for(var attr in obj){
        var target=obj[attr]
        var begin=animate.getCss(ele,attr);
        var change=target-begin;
        
        if(change){//判断一下此方向的运动距离有效，不为0        
            oBegin[attr]=begin;
            oChange[attr]=change;
            flag++;
        }
    }//for in 循环结束
    if(!flag)return;//如果各个方向的运动距离都是0，则结束动画的执行
    var interval=15;
    var times=0;
    
    clearInterval(ele.timer);
    
    function step(){
        
        times+=interval;
        if(times<duration){
            for(var attr in oChange){
                var change=oChange[attr];
                var begin=oBegin[attr];
                //var val=times/duration*change+begin;
                var val=fnEffect(times,begin,change,duration);
                animate.setCss(ele,attr,val);
            }
        }else{
            for(var attr in oChange){
                var target=obj[attr];
                animate.setCss(ele,attr,target);    
            }
            clearInterval(ele.timer);
            ele.timer=null;
            if(typeof callback == "function"){
                callback.call(ele);    
            }
        }
        
    }
    ele.timer=setInterval(step,interval);
};

animate.getCss=function(ele,attr){
    if(window.getComputedStyle){
        return parseFloat(window.getComputedStyle(ele,null)[attr]);    
    }else{
        if(attr=="opacity"){
            var val=ele.currentStyle.filter;
            //"alpha(opacity=50)";//匹配到这样的一个字符串，然后把这个字符串中的数字部分拿到
            var reg=/alpha(opacity=(d+(?:.d+)?))/;
            if(reg.test(val)){
                return RegExp.$1/100;
            }else{
                //如果没有给IE中的不透明度赋值，则上边的正则为false
                return 1;//如果没有给不透明度赋值，则应该把默认值1返回
            }
            //方法没有返回值，则此方法执行结束后留下一个undefined。即：没有返回值的方法返回的是undefined
        }else{
            return parseFloat(ele.currentStyle[attr]);
        }        
    }
}

animate.setCss=function(ele,attr,val){
        if(attr=="opacity"){
            ele.style.opacity=val;
            ele.style.filter="alpha(opacity="+val*100+")";
        }else{
            ele.style[attr]=val+"px";
        }
}