我的java全栈开发之路-2-运动框架1.0

/*
* 1.起点
* 2.终点
* 3.变化量 = 终点-起点
* 4.帧数 = 总时长/定时器时间间隔
* 5.步长 = 变化量/帧数
* 参数
*ojb 运动对象
* myJson 运动属性目标值
* time   运动时间
* callBack 回调函数
*
* */
function animate(obj,myJson,time,callBack) {
    var startJson = {};   //开始点
    var targetJson = {};  //结束点
    var stepJson = {};    //变化量
    var maxCount = Math.floor(time/11); //帧数
    var timer = null;
    var count = 0;

    for(var k in myJson){
        startJson[k] = parseFloat(getStyle(obj,k));       //获取所有属性初始值
        targetJson[k] = parseFloat(myJson[k]);            //获取所有属性目标值
        stepJson[k] = (myJson[k]-startJson[k])/maxCount;  //步长
    }
    console.log(startJson);
    console.log(targetJson);
    console.log(stepJson);

    timer = setInterval(
        function () {
            for (var k in myJson){
                startJson[k] += stepJson[k];
                if(k === "opacity"){
                    obj.style[k] = startJson[k];
                    obj.style.filter = "alpha(opacity = "+startJson[k]*100+")";
                }else {
                    obj.style[k] = startJson[k] + "px";
                }
            }
            count++;
            if(count === maxCount){
                for(var k in myJson){
                    if(k === "opacity"){
                        obj.style[k] = targetJson[k];
                        obj.style.filter = "alpha(opacity = "+targetJson[k]+")"
                    }else{
                        obj.style[k] = targetJson[k] + "px";
                    }
                }
                clearInterval(timer);
                callBack && callBack.call(obj);
            }
        }
    ,11)

    //获取元素实际样式的方法
    function getStyle(obj , property){
        return obj.currentStyle ? obj.currentStyle[property] : getComputedStyle(obj)[property];
    }
}