JS升级版运动框架

1、升级版运动框架

加了到达的时间，和目标地点

animate(obj,myjosn,time);

/*  
初始位置：
    left：100px;
    top：100px;
现在我想用 3000毫秒的时间，让盒子运动到：
    left:700px
    top:250px;
变化量：
    leftL:600px;
    top:150px;
现在定时器间隔时间是20ms，3000/20 = 150步，这个150叫做帧
​
也就是说，步长：
    left:600/150 = 4px;
    top:150/150 = 1px;
*/
​

封装js----加入

/*
*   运动框架封装
*   新增：运动完后变色，透明度
*   call 回调函数
*   主要参数：
*       obj 对象
*       myjson 传入的json样式
*       time 运动的时间
*       callBack 函数
*
*   缺点：调用该框架时有些实参不能省略
*
* */
​
function animate(obj,myjosn,bacolor,time,callBcak){
    var starJosn = {}; //对象原始位置
    var endJosn = {}; //对象最终的位置
    var LastJosn = {} //最终的数据 步数
    var Zhen = Math.floor(time/11); //帧数
    var index = 0;
​
    for(var k in myjosn){
        endJosn[k] = parseFloat(myjosn[k]);
        starJosn[k] = parseFloat(getStyle(obj,k));
        LastJosn[k] = (parseFloat(endJosn[k]) - parseFloat(starJosn[k]))/Zhen;
    }
​
    /* 定时器 */
    var timer = setInterval(function () {
        if(k = 'opacity'){
            obj.style[k] = starJosn[k];
            obj.style.fill = "alpha(opacity ="+starJosn[k]*100+")";//兼容IE8以下
        }
        for (var k in LastJosn) {
            starJosn[k] += LastJosn[k];
            obj.style[k] =  starJosn[k]+'px';
        }
        index++;
        if(index == Zhen){
            if(k = 'opacity'){
                obj.style[k] = starJosn[k];
            }
            for (var k in myjosn) { //拉终停表
                obj.style[k] = myjosn[k]+'px';
            }
            clearInterval(timer);
            // console.log(callBcak);
            callBcak && callBcak.call(obj);
        }
    },13)
​
    /* 获取行外样式函数 */
    function getStyle(obj,Style) {
        return obj.currentStyle? obj.currentStyle[Style]:getComputedStyle(obj)[Style];
    }
}
​
​