JS 运动框架

Posted by Gemicat on February 17, 2016

运动框架,进入另存为

Coding

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

// 运动框架
function startMove(obj, json, fn){
    clearInterval(obj.timer);
    obj.timer = setInterval(function(){
        
        // 检测是否所有运动都完成
        var bStop = true;
        
        for(var attr in json){

            // 检测对象当前属性
            var iCur = 0;
            if(attr == "opacity"){
                iCur = parseInt(parseFloat(getStyle(obj, attr))*100);
            }else{
                iCur = parseInt(getStyle(obj, attr));
            }

            // 缓冲运动速度计算
            var iSpeed = (json[attr] - iCur) / 8;
            iSpeed = iSpeed>0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);

            // 检测是否所有运动都完成
            if(iCur != json[attr]){
                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(fn){
                fn();
            }
        }
    },30);
}