JS完整版运动框架、函数重载

1、完整版运动框架

函数重载：

函数名一样，参数列表不一样

加入Tween算法

/*
*   运动框架封装
*   新增：运动完后变色，透明度
*   call 回调函数
*   总共参数(5)：
*       obj 对象
*       myjson 传入的json样式
*       time 运动的时间
*       tween  缓冲（Tween算法）
*       callBack 函数
*
*    必填参数(3)：
*       obj、myjson、time
*
*   新增缓冲：Tween算法
*       第一个参数 t 表示当前帧编号
*       第二个参数 b 表示起始位置
*       第三个参数 c 表示变化量
*       第四个参数 d 表示总帧数
*
*       Tween算法最终会返回帧数编号的位置
*
*   新增函数重载：arguments（存放所有的实参）
*                  调用该框架的时候，后两个参数可填，可不填
*   缺点：暂时没有找出BAug;
* */
​
function animate(obj,myjosn,time,tween,callBcak){
    var starJosn = {}; //对象原始位置
    var endJosn = {}; //对象最终的位置
    var LastJosn = {} //变化量
    var Zhen = Math.floor(time/20); //总帧数
    var index = 0;//当前帧编号
​
    /* 实现方法重载 */
    if(arguments.length === 3){//判断只有三个参数的时候，也就是就是没有tween实参的时候
        tween = 'Linear'; //没有tween实参的时候，默认赋值为 'Linear'
    }else if(arguments.length == 4){ //第4个参数为函数的时候，进行参数对换
        switch (true) {
            case typeof arguments[3] == "string":
                break;
            case typeof arguments[3] == "function":
                callBcak = arguments[3];
                tween = 'Linear';
                ;break;
        }
    }
​
    /* 获取实参，初始化变量 */
    for(var k in myjosn){
        endJosn[k] = parseFloat(myjosn[k]);
        starJosn[k] = parseFloat(getStyle(obj,k));
        LastJosn[k] = (parseFloat(endJosn[k]) - parseFloat(starJosn[k]));
    }
​
    /* 定时器--实现运动 */
    var timer = setInterval(function () {
        if(k = 'opacity'){
            obj.style[k] = starJosn[k];
        }
        for (var k in LastJosn) {
            obj.style[k] =  Tween[tween](index,starJosn[k],LastJosn[k],Zhen)+'px';
        }
        index++;
        if(index == Zhen){
            if(k = 'opacity'){
                obj.style[k] = starJosn[k];
                obj.style.fill = "alpha(opacity ="+starJosn[k]*100+")";//兼容IE8以下
            }
            for (var k in myjosn) { //拉终停表
                obj.style[k] = Tween[tween](index,starJosn[k],LastJosn[k],Zhen)+'px';
            }
            clearInterval(timer);
            // console.log(callBcak);
            // callBcak? callBcak.call(obj):callBcak;
            callBcak && callBcak.call(obj);
        }
    },20)
​
    /* 获取行外样式函数（获取实际参数） */
    function getStyle(obj,Style) {
        return obj.currentStyle? obj.currentStyle[Style]:getComputedStyle(obj)[Style];
    }
​
    /* Tween 算法*/
    var Tween = {
        /* Linear */
        Linear: function(t,b,c,d){ return c*t/d + b; },
​
        /* Quad */
        QuadeaseIn: function(t,b,c,d){
            return c*(t/=d)*t + b;
        },
        QuadeaseOut: function(t,b,c,d){
            return -c *(t/=d)*(t-2) + b;
        },
        QuadeaseInOut: 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 */
        CubiceaseIn: function(t,b,c,d){
            return c*(t/=d)*t*t + b;
        },
        CubiceaseOut: function(t,b,c,d){
            return c*((t=t/d-1)*t*t + 1) + b;
        },
        CubiceaseInOut: 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 */
        QuarteaseIn: function(t,b,c,d){
            return c*(t/=d)*t*t*t + b;
        },
        QuarteaseOut: function(t,b,c,d){
            return -c * ((t=t/d-1)*t*t*t - 1) + b;
        },
        QuarteaseInOut: 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 */
        QuinteaseIn: function(t,b,c,d){
            return c*(t/=d)*t*t*t*t + b;
        },
        QuinteaseOut: function(t,b,c,d){
            return c*((t=t/d-1)*t*t*t*t + 1) + b;
        },
        QuinteaseInOut: 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 */
        SineeaseIn: function(t,b,c,d){
            return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
        },
        SineeaseOut: function(t,b,c,d){
            return c * Math.sin(t/d * (Math.PI/2)) + b;
        },
        SineeaseInOut: function(t,b,c,d){
            return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
        },
​
        /* Expo */
        ExpoeaseIn: function(t,b,c,d){
            return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
        },
        ExpoeaseOut: function(t,b,c,d){
            return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
        },
        ExpoeaseInOut: 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 */
        CirceaseIn: function(t,b,c,d){
            return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
        },
        CirceaseOut: function(t,b,c,d){
            return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
        },
        CirceaseInOut: 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;
        },
​
        /* Elasti */
        ElasticeaseIn: 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;
        },
        ElasticeaseOut: 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);
        },
        ElasticeaseInOut: 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 */
        BackeaseIn: function(t,b,c,d,s){
            if (s == undefined) s = 1.70158;
            return c*(t/=d)*t*((s+1)*t - s) + b;
        },
        BackeaseOut: 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;
        },
        BackeaseInOut: 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;
        },
​
        /* Bounce */
        BounceeaseIn: function(t,b,c,d){
            return c - Tween.Bounce.easeOut(d-t, 0, c, d) + b;
        },
        BounceeaseOut: 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;
        }},
​
        BounceeaseInOut: function(t,b,c,d){
            if (t < d/2) return Tween.Bounce.easeIn(t*2, 0, c, d) * .5 + b;
            else return Tween.Bounce.easeOut(t*2-d, 0, c, d) * .5 + c*.5 + b;
        }
        }
    }
​
​