勻速運動與緩速運動

2021-10-04 22:20:19 字數 1181 閱讀 3091

1.勻速運動

勻速運動的步驟:

1.開啟定時器之前,清楚原本的定時器

clearinterval(ele.timeid);

2.獲取當前位置

var currentleft = ele.offsetleft;;

3.開啟定時器

ele.timeid = setinterval(function(),50);

4.移動盒子

currentleft += 50;

5.把盒子現在的位置賦值給left屬性

ele.style.left = currentleft + 「px」;

6.邊界檢測

if(currentleft >= move)

},50);

}else

},50);

}}2.緩動動畫

勻速運動 : 速度都一樣

緩動 :速度逐漸變慢

//緩速運動公式 : 每次移動的位置 = (目標位置 - 當前位置)/10

緩動的過程

運動次數 初始位置 目標位置 每次移動的距離

1 0 400 40 (目標位置 - 初始位置)/10

2 40 400 36

3 76 400 33

4 109 400 30

沒有誤差 : 準確的到達目標位置

緩動動畫普通版

ele 移動物件

attrs 移動的屬性 可以是多個屬性 是乙個物件 如:{height : 100,width : 200}

callback 緩動完成後進行的動作 可以巢狀緩動函式

function showmove(ele,attrs,callback)

}//2.驗證假設

if(isall)

},50);

}function getelestyle(ele,attr)else

}

緩動動畫高階版

function showmove(ele,attrs,callback)else if(attr == "opacity")

}else}}

//2.驗證假設

if(isall)

},50);

}function getelestyle(ele,attr)else

}

JS勻速運動

所謂的勻速運動就是速度不變的,比如無縫滑動展示就是勻速運動.這種運動的特點就是簡單,呆板,不炫麗.例子 div勻速運動.效果如圖 要注意的地方 1.有些時候不能精確的停在某個位置,所以當距離目標位置很近的時候直接強行把它移到到目標位置就可以了.2.開啟定時器的時候一定要先清除原來的定時器,不然速度會...

js勻速運動

勻速運動 封裝勻速運動原理 設定定時器,將傳入的ele,設定乙個速度,使用定時器獲取當前時間的乙個位置,加上速度值,給回節點,當節點到達目標位置,判斷給他清除定時器。github 下面封裝好的勻速運動的 勻速運動 function getstyle obj,attr function dogo ob...

Lerp 實現勻速運動

lerp函式在mathf,vector3,等類中都有,用法都類似,作用都是按照百分比取得從乙個值過度到另外乙個值的中間值。下面說的內容針對各中類的lerp函式都是通用的。update 說是 誤用 其實也不完全正確,這種用法是可以工作的,但是常常不是大家的真正需求,很多時候大家使用lerp都是想達到勻...