JavaScript “完美运动框架”

/* “完美运动框架”,所谓“完美”,就是能够实现多个参数,多个物体运动互不影响的一个运动函数move()。
 * 大体结构以下:运动框架 EXP: move(obj,{width:200,height:200},fnEnd)
 *         obj: 运动物体
 *         json: 运动属性和运动目标值的json集合,{'width':200,'height':200}
 *         sv: 运动的速度,speed-value,值越小速度越大
 *         fnEnd: 运动结束后的回调函数
 */

function move(obj, json, sv, fnEnd) {
    //取CSS样式值
    function getStyle(obj, attr) {
            if (obj.currentStyle) {
                return obj.currentStyle[attr];
            } else {
                return getComputedStyle(obj, false)[attr];
            }
        }
        //运动开始          
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        var isAllCompleted = true; //假设所有运动都完成了
        for (attr in json) {
            var attrValue = 0;
            switch (attr) {
                case 'opacity':
                    attrValue = Math.round(parseFloat(getStyle(obj, attr)) * 100);
                    break;
                default:
                    attrValue = parseInt(getStyle(obj, attr));
            }
            //若是没有传入sv,则为4
            var speed = (json[attr] - attrValue) / (sv || 4);
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
            //若是循环过程当中存在还没有结束的运动,isAllCompleted为假
            if (attrValue != json[attr]) isAllCompleted = false;
            switch (attr) {
                case 'opacity':
                    {
                        obj.style.filter = "alpha(opacity=" + (attrValue + speed) + ")";
                        obj.style.opacity = (attrValue + speed) / 100;
                    };
                    break;
                default:
                    obj.style[attr] = attrValue + speed + 'px';
            }
        } //for in end!
        //全部循环结束后,只有当所有运动结束后(isAllCompleted=true)时才关闭定时器
        if (isAllCompleted) {
            clearInterval(obj.timer);
            if (fnEnd) fnEnd();
        }
    }, 30);
} //move() end !

来自 <http://www.tangbc.com/blog/#frontends/104json

相关文章
相关标签/搜索