JS.封装好的运动函数

运动函数animate

animate函数是动画封装函数
参数：
elem参数是运动的对象
targetJSON参数是运动的终点状态
time参数是运动总时间，单位为毫秒
tweenString缓冲描述词，例如“linear”，可选
callback是回调函数，可选

function animate(elem , targetJSON , time , tweenString , callback){
    //函数重载，用户传进来的参数数量、类型可能不一样
    //检查数量和类型
    if(arguments.length < 3 || typeof arguments[0] != "object" || typeof arguments[1] != "object" || typeof arguments[2] != "number"){
        throw new Error("对不起，你传进来的参数数量不对或者参数类型不对，请仔细检查哦！");
        return;
    }else if(arguments.length == 3){
        //用户只传进来3个参数，表示tweenString、callback被省略了，那么我们默认使用Linear当做缓冲词
        tweenString = "Linear";
        //默认回调函数是null
        callback = null;
    }else if(arguments.length == 4){
        //用户只传进来4个参数，第4个参数可能传进来的是tweenString，也可能是callback
        switch(typeof arguments[3]){
            case "string" : 
                //用户传进来的是缓冲描述词儿，所以就把callback补为null
                callback = null;
                break;
            case "function" : 
                callback = arguments[3];
                tweenString = "Linear";
                break;
            default : 
                throw new Error("抱歉，第4个参数要么是缓冲描述词，要么是回调函数，请检查！");
        }
    }

    //动画间隔要根据不同浏览器来设置：
    if(window.navigator.userAgent.indexOf("MSIE") != -1){
        var interval = 50;  
    }else{
        var interval = 20;
    }

    //强行给我们的动画元素增加一个isanimated的属性，是否正在运动
    elem.isanimated = true;

    //初始状态，放在origninalJSON里面
    var originalJSON = {};
    //变化的多少，放在deltaJSON里面
    var deltaJSON = {};
    //给信号量对象添加属性，添加什么属性，目标对象中有什么属性，这里就添加什么属性
    //值就是当前的计算样式
    for(var k in targetJSON){
        //初试JSON
        originalJSON[k] = parseFloat(fetchComputedStyle(elem , k));
        //把每个targetJSON中的值都去掉px
        targetJSON[k] = parseFloat(targetJSON[k]);
        //变化量JSON
        deltaJSON[k] = targetJSON[k] - originalJSON[k];
    }

    // 至此我们得到了三个JSON：
    // originalJSON 初始状态集合，这个JSON永远不变
    // targetJSON 目标状态集合，这个JSON永远不变
    // deltaJSON  差值集合，这个JSON永远不变
    // console.log(originalJSON);
    // console.log(targetJSON);
    // console.log(deltaJSON);

    //总执行函数次数：
    var maxFrameNumber = time / interval;
    //当前帧编号
    var frameNumber = 0;
    //这是一个临时变量一会儿用  
    var n;
    //定时器
    var timer = setInterval(function(){
        //要让所有的属性发生变化
        for(var k in originalJSON){
            //动：
            // n就表示这一帧应该在的位置：
            n = Tween[tweenString](frameNumber , originalJSON[k] , deltaJSON[k] , maxFrameNumber);
            //根据是不是opacity来设置单位
            if(k != "opacity"){
                elem.style[k] = n + "px";
            }else{
                elem.style[k] = n;
                elem.style.filter = "alpha(opacity=" + n * 100 + ")";
            }
        }

        //计数器
        frameNumber++;
        if(frameNumber == maxFrameNumber){
            //次数够了，所以停表。
            //这里抖一个小机灵，我们强行让elem跑到targetJSON那个位置
            for(var k in targetJSON){
                if(k != "opacity"){
                    elem.style[k] = targetJSON[k] + "px";
                }else{
                    elem.style[k] = targetJSON[k];
                    elem.style.filter = "alpha(opacity=" + (targetJSON[k] * 100) + ")";
                }
            }
            //停表
            clearInterval(timer);
            //拿掉是否在动属性，设为false
            elem.isanimated = false;
            //调用回调函数，并且让回调函数中的this表示运动的对象
            //我们加上了判断，如果callback存在，再执行函数
            callback && callback.apply(elem);
        }
    },interval);

    //之前的轮子，计算后样式
    function fetchComputedStyle(obj , property){
        //能力检测
        if(window.getComputedStyle){
            //现在要把用户输入的property中检测一下是不是驼峰，转为连字符写法
            //强制把用户输入的词儿里面的大写字母，变为小写字母加-
            //paddingLeft  →  padding-left
            property = property.replace(/([A-Z])/g , function(match,$1){
                return "-" + $1.toLowerCase();
            });

            return window.getComputedStyle(obj)[property];
        }else{
            //IE只认识驼峰，我们要防止用户输入短横，要把短横改为大写字母
            //padding-left  → paddingLeft 
            property = property.replace(/\-([a-z])/g , function(match,$1){
                return $1.toUpperCase();
            });

            return obj.currentStyle[property];
        }
    }