javascript运动框架

下面这个一个运动框架可以控制元素在一个属性上的运动，同时，可以调用回调函数。

/*
获取元素某个属性的值
@obj: 对象
@attr: 属性值
*/
function getStyle(obj, attr){
    if(obj.currentStyle){
        return obj.currentStyle[attr];
    }
    else{
        return getComputedStyle(obj, false)[attr];
    }
}

/*
获取元素某个属性的值
@obj: 对象
@attr: 属性值
@iTarget: 目标值(int)
@fn: 回调函数
*/
function startMove(obj, attr, iTarget, fn){
    clearInterval(obj.timer);
    obj.timer = setInterval(function(){

        if(attr =="opacity"){
            var iCur = parseInt(parseFloat(getStyle(obj, attr))*100);
        }else{
            var iCur = parseInt(getStyle(obj, attr));
        }
        
        var iSpeed = (iTarget-iCur)/8;
        iSpeed = iSpeed>0? Math.ceil(iSpeed): Math.floor(iSpeed);

        if(iCur == iTarget){
            clearInterval(obj.timer);

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

 

 

上面这个运动框架存在不足：它只能给一个属性设置动画，下面这个运动框架通过json来实现给多个属性同时设置动画：

/*
获取元素某个属性的值
@obj: 对象
@attr: 属性值
*/
function getStyle(obj, attr){
    if(obj.currentStyle){
        return obj.currentStyle[attr];
    }
    else{
        return getComputedStyle(obj, false)[attr];
    }
}


/*
获取元素某个属性的值
@obj: 对象
@json: {属性值1:目标值1,属性值2:目标值2,...}
@fn: 回调函数
*/
function startMove(obj, json, fn){
    clearInterval(obj.timer);
    obj.timer = setInterval(function(){
        var bStop = true;    //运动结束标致
        for(var attr in json){

            //1.取当前值
            iCur = 0;
            if(attr =="opacity"){
                var iCur = parseInt(parseFloat(getStyle(obj, attr))*100);
            }else{
                var iCur = parseInt(getStyle(obj, attr));
            }
            
            //2.算速度
            var iSpeed = (json[attr]-iCur)/8;
            iSpeed = iSpeed>0? Math.ceil(iSpeed): Math.floor(iSpeed);


            //3.检查停止
            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);
}

 

 

弹性运动：

var iSpeed = 0;
    var left = 0;

    function startMove(obj, iTarget){
        
        clearInterval(obj.timer)

        obj.timer = setInterval(function(){
            iSpeed+=(iTarget - obj.offsetLeft)/5;
            iSpeed*=0.7;

            left +=iSpeed;

            if(Math.abs(iSpeed)<1 && Math.abs(left - iTarget)<1){
                clearInterval(obj.timer);
                obj.style.left = iTarget + 'px';
            }else{
                obj.style.left = left + 'px';
            }
            
        }, 30);
    }

View Code

 弹性运动运用的范围有限，一般用于菜单的选择特效：带有滑块的导航条