本文實(shí)例分析了JS彈性運(yùn)動(dòng)實(shí)現(xiàn)方法。分享給大家供大家參考，具體如下：
描述：像彈簧一樣左右彈動(dòng)，最后緩慢停下來(lái)
一、加減速運(yùn)動(dòng)
1.加速運(yùn)動(dòng)
var iSpeed=0;iSpeed++;
速度越來(lái)越快，最后沖出去
2.減速運(yùn)動(dòng)
var iSpeed=20;iSpeed--;
速度越來(lái)越慢，降到0后開始變負(fù)值往反方向運(yùn)動(dòng)
二、彈性運(yùn)動(dòng)
1.在目標(biāo)點(diǎn)左邊，加速；目標(biāo)點(diǎn)右邊，減速,如
if(div1.offsetLeft<300){ iSpeed=iSpeed+1; //等同iSpeed++;}else{ iSpeed=iSpeed-1;}這是最簡(jiǎn)單的彈性運(yùn)動(dòng)，缺陷：加速度恒定（應(yīng)該根據(jù)松緊帶而變）
if(div1.offsetLeft<300){ iSpeed=iSpeed+(300-div1.offsetLeft)/50; }else{ iSpeed=iSpeed-(div1.offsetLeft-300)/50;}iSpeed=iSpeed+(300-div1.offsetLeft)/50; ==>iSpeed=iSpeed+300/50-div1.offsetLeft/50;iSpeed=iSpeed-(div1.offsetLeft-300)/50; ==>iSpeed=iSpeed-div1.offsetLeft/50+300/50;這兩個(gè)完全一樣 所以不需要if/else
iSpeed+=(300-div1.offsetLeft)/50; div1.style.left=div1.offsetLeft+iSpeed+'px';
缺陷2：不會(huì)停下來(lái)（缺少摩擦力）
iSpeed+=(300-div1.offsetLeft)/50; iSpeed*=0.95; //乘一個(gè)小數(shù)，越來(lái)越小div1.style.left=div1.offsetLeft+iSpeed+'px';
三、帶摩擦力的彈性運(yùn)動(dòng)
比較好的組合
iSpeed+=(300-div1.offsetLeft)/5; iSpeed*=0.7;
注：var iSpeed=0;要放在定時(shí)器外面，不然每次都從0開始，加啊乘啊就沒用了
四、整合好的彈性運(yùn)動(dòng)框架
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; //計(jì)算出來(lái)的速度是一個(gè)小數(shù)，如果給它取整，會(huì)一直左右移動(dòng) left+=iSpeed; //把速度存在變量里，變量是可以有小數(shù)的 if(Math.abs(iSpeed)<1 && Math.abs(left-iTarget)<1){ //因?yàn)閕Speed和left都是小數(shù)，所以永遠(yuǎn)達(dá)不到0和目標(biāo)點(diǎn)，只能無(wú)限接近 clearInterval(obj.timer); //雖然速度最后接近于0，看似運(yùn)動(dòng)停止了，但定時(shí)器還一直開著，所以當(dāng)速度=0并且到達(dá)目標(biāo)點(diǎn)，關(guān)掉（只是速度=0關(guān)掉，運(yùn)動(dòng)到最右邊準(zhǔn)備回來(lái)那一剎那，速度=0，同理只是到達(dá)目標(biāo)點(diǎn)關(guān)掉，一開始往右運(yùn)動(dòng)經(jīng)過(guò)中間時(shí)會(huì)達(dá)到目標(biāo)點(diǎn)，所以必須兩者同時(shí)滿足） obj.style.left=iTarget+'px'; //小數(shù)無(wú)法完全貼合，所以最后直接讓他等于目標(biāo)點(diǎn)，一般人肉眼看不出來(lái) } else{ obj.style.left=left+'px'; //style.left只能是一個(gè)整數(shù)，所以每次會(huì)把小數(shù)抹掉，誤差是累計(jì)的，最終累加起來(lái)就會(huì)有1-2像素，用obj.offsetLeft+iSpeed就會(huì)無(wú)法完全貼合 } },30);};五、彈性運(yùn)動(dòng)不適用的地方
樣式會(huì)過(guò)界的
比如高度，先變大后變小，如果物體本身高度很小，可能會(huì)變成負(fù)值，就不對(duì)了
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
新聞熱點(diǎn)
疑難解答
