完美运动框架

1. 匀速运动

    /**
     * @param obj  - 待改变的对象
     * @param json - 待改变的属性列表
     * @return func - 链式调用
     */
    function startMove(obj, json, func) {
        //清除之前的定时器
        clearInterval(obj.timer);

        //开启定时器
        obj.timer = setInterval(function() {
            //检测是否所有动画都已完成的标识
            var bStop = true;

            //循环遍历所有要变化的属性
            for (var attr in json) {
                var iCur = 0; //当前值
                var iTarget = json[attr]; //目标值

                if (attr === "opacity") {
                    iCur = parseFloat(getStyle(obj, attr)) * 100;
                } else {
                    iCur = parseInt(getStyle(obj, attr));
                }

                //匀速运动
                var iSpeed = 10;

                if (iCur !== iTarget) {
                    //只要有一个动画未完成，就不停止定时器
                    bStop = false;

                    //临时结果
                    var temp = iTarget;

                    //防止最后越界处理
                    if (iSpeed < Math.abs(iCur - iTarget)) {
                        temp = iCur + iSpeed;
                    }

                    if (attr === "opacity") {
                        obj.style.filter = "alpha(opacity:" + temp + ")"
                        obj.style.opacity = temp / 100;
                    } else {
                        obj.style[attr] = temp + "px";
                    }
                }
            }

            //如果所有动画都已完成，则清楚定时器
            if (bStop) {
                clearInterval(obj.timer);

                //链式调用，执行动画完成之后的动作
                if (func) {
                    func();
                }
            }
        }, 30);
    }

    //兼容，获取对象 style
    function getStyle(obj, attr) {
        if (obj.currentStyle) {
            return obj.currentStyle[attr];
        } else {
            return getComputedStyle(obj, false)[attr];
        }
    }

2. 缓冲（减速）运动

    /**
     * @param obj  - 待改变的对象
     * @param json - 待改变的属性列表
     * @return func - 链式调用
     */
    function startMove(obj, json, func) {
        //清除之前的定时器
        clearInterval(obj.timer);

        //开启定时器
        obj.timer = setInterval(function() {
            //检测是否所有动画都已完成的标识
            var bStop = true;

            //循环遍历所有要变化的属性
            for (var attr in json) {
                var iCur = 0; //当前值
                var iTarget = json[attr]; //目标值

                if (attr === "opacity") {
                    iCur = parseFloat(getStyle(obj, attr)) * 100;
                } else {
                    iCur = parseInt(getStyle(obj, attr));
                }

                //减速（缓冲）运动
                var iSpeed = (iTarget - iCur) / 8;

                //防止出现小数导致误差
                iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);

                if (iCur !== iTarget) {
                    //只要有一个动画未完成，就不停止定时器
                    bStop = false;

                    if (attr === "opacity") {
                        obj.style.filter = "alpha(opacity:" + iCur + iSpeed + ")"
                        obj.style.opacity = (iCur + iSpeed) / 100;
                    } else {
                        obj.style[attr] = iCur + iSpeed + "px";
                    }
                }
            }

            //如果所有动画都已完成，则清楚定时器
            if (bStop) {
                clearInterval(obj.timer);

                //链式调用，执行动画完成之后的动作
                if (func) {
                    func();
                }
            }
        }, 30);
    }

    //兼容，获取对象 style
    function getStyle(obj, attr) {
        if (obj.currentStyle) {
            return obj.currentStyle[attr];
        } else {
            return getComputedStyle(obj, false)[attr];
        }
    }