js缓冲运动、弹性运动、碰撞运动

适用于图片轮播，物体运动等。

缓冲运动

function startMove(obj, json, fnEnd)   //json ：{width:300,height:400}
{
    clearInterval(obj.timer);
    obj.timer=setInterval(function (){
        var bStop=true;     //假设：所有值都已经到了

        for(var attr in json)
        {
            var cur=0;  //取得当前值

            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)+')';
                obj.style.opacity=(cur+speed)/100;
            }
            else
            {
                obj.style[attr]=cur+speed+'px';
            }
        }

        if(bStop) //停止条件
        {
            clearInterval(obj.timer);

            fnEnd && fnEnd();
        }
    }, 30);
}

弹性运动

与缓冲运动的小区别：

1、公式 ：
速度 += （目标点 - 当前值）/系数 （如6,7,8）
速度 *= 摩擦力 （如0.7,0.75）
2、停止条件 ：
速度绝对小 && 距离绝对小

function startMove(obj,json,fn){
        clearInterval(obj.timer);

        var iSpeed = {};
        for(var attr in json){
                iSpeed[attr] = 0;
        }

        obj.timer = setInterval(function(){

                var bBtn = true;

                for(var attr in json){

                        var iCur = 0;
                        if(attr == 'opacity'){
                                iCur = Math.round(getStyle(obj,attr)*100);
                        }
                        else{
                                iCur = parseInt(getStyle(obj,attr));
                        }

                        iSpeed[attr] += (json[attr] - iCur)/6;
                        iSpeed[attr] *= 0.75;

                        if( Math.abs(iSpeed[attr])>1 || Math.abs(json[attr] - iCur)>1 ){

                                bBtn = false;
                        }

                        var value = iCur + iSpeed[attr];

                        if(value < 0 && (attr == 'width'||attr == 'height')){
                                value = 0;
                        }

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


                }

                if(bBtn){
                        clearInterval(obj.timer);
                        for(var attr in json){
                                iSpeed[attr] = 0;
                                if(attr == 'opacity'){
                                        obj.style.filter = 'alpha(opacity='+ json[attr] +')';
                                        obj.style.opacity = json[attr]/100; 
                                }
                                else{
                                        obj.style[attr] = json[attr] + 'px';
                                }
                        }

                        if(fn){
                                fn.call(obj);
                        }

                }

        },30);
}

碰撞运动

function startMove(obj,iTarget) {
            clearInterval(obj.timer);
            var iSpeed = 0;
            obj.timer = setInterval(function() {
                iSpeed+=3;
                var iCur = parseInt(getStyle(obj,'height'));
                var val = iCur + iSpeed;
                if (val >= iTarget) {
                    obj.style.height = iTarget + 'px';
                    iSpeed*=-1;
                    iSpeed*=0.65;
                }else {

                    obj.style.height = val + 'px';
                }
                // console.log(val+'/'+iTarget)
                if (Math.floor(Math.abs(iSpeed)) <= 1 && Math.floor(Math.abs(val-iTarget)) <= 1 ) {
                    clearInterval(obj.timer);


                };
                console.log(1)
            },30)
        }

获取样式函数

function getStyle(obj,attr) {
            return obj.currentStyle ? obj.currentStyle(attr) : getComputedStyle(obj,false)[attr]
        }