完美运动框架

Posted 2021-03-09 bedfly

function getStyle(obj, name) {
    if (obj.currentStyle) {
        return obj.currentStyle[name];
    }
    else {
        return getComputedStyle(obj, false)[name];
    }
}

//startMove(oDiv, {width:400, height:400})

function startMove(obj, json, fnEnd) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        var bStop = true;//假设所有的值都已经到了

        //根据运动框架改动，不同的地方
        for (var attr in json) {
            var cur = 0; //parseInt(getStyle(obj, attr));
            if (attr == ‘opacity‘) {
                cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
            }
            else {
                cur = parseInt(getStyle(obj, attr));
            }

            var speed = (json[attr] - cur) / 6;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

            if (cur != json[attr])
                bStop = false;

            if (attr == ‘opacity‘) {
                obj.style.filter = ‘alpha(opacity:‘ + (cur + speed) + ‘)‘;//IE使用
                obj.style.opacity = (cur + speed) / 100;//chrome和FF使用
            }
            else {
                obj.style[attr] = cur + speed + ‘px‘;
            }
       }
        //最后判断是否都到了，如果都到了，停止计数器
        if (bStop) {
            clearInterval(obj.timer);
            //alert(‘ok‘);
            if (fnEnd) fnEnd();
        }

    }, 30);
}