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

来源：互联网发布：centos 7 xfce4 中文编辑：程序博客网时间：2024/06/12 00:57

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

缓冲运动

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]        }

0 1