封裝一個簡單的原生勻速動畫函數

/*** 勻速動畫函數* @param {位移的元素} elm * @param {位移的目標位置} target */ function moveAnimation(elm, target) {clearInterval(elm.timeID);let position = elm.offsetLeft;let step = (target - position) > 0 ? 10 : -10;elm.timeID = setInterval(function () {position += step;if (Math.abs(target - position) > Math.abs(step)) {elm.style.left = position + 'px';} else {elm.style.left = target + 'px';clearInterval(elm.timeID);}}, 10) }

緩動動畫函數

/*** 緩動動畫函數* @param {位移元素} elm * @param {位移目標} target */ function slowAnimation(elm, target) {clearInterval(elm.timeID);let position = elm.offsetLeft;elm.timeID = setInterval(function () {let step = position > target ? Math.floor((target - position) / 10) : Math.ceil((target - position) / 10);position += step;elm.style.left = position + 'px';if (target == position) {clearInterval(elm.timeID);}}, 20) }

總結

以上是生活随笔為你收集整理的JS原生封装动画函数的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。