關於動畫緩動函式的封裝
動畫緩動函式(左右移動)的總結:
1.函式的引數
此函式有兩個引數 : 其中之一是要移動的元素,第二個引數是要到達的目標位置。
如果要對緩動的速度有很精確的要求 封裝的時候可以封裝三個函式 第三個引數可以設定每一次緩動的距離以方便改動移動的整體幅度
2.動畫函式的函式體裡的變數
首先是 要確定移動的元素的初始位置:
var current = element.offsetLeft;
寫到這裡 順便總結一下 offset系列 和 style 系列的區別把
如果你的style屬性是內嵌到標籤中 那麼你在使用 style.xxx的時候是沒有問題的
但是你要注意他返回的呢 並不是數字型別的資料 而是一個字元型 而字元型是不方便進行運算的
即: 如果width 是100px 它返回的是 “100px” 的字元型結果
//剛開始寫部落格 不會往裡面貼圖 啊啊啊啊啊
但是如果你的style屬性是寫在head 中 或者說寫在另一個獨立的css檔案中
你再使用style.xxx的時候 返回的就是空白
而offset系列就比較好用,無論是寫在哪裡的width left等屬性值
他都能直接訪問並返回給你一個數字型別的值 這樣就能更方便的進行計算
即: 如果width 是100px offsetWidth 返回的是 100 的數字型結果
//簡單總結結束 我們接著繼續寫下邊的東西 哈哈哈
然後到核心的地方 就是一個定時器
在使用定時器前要先判斷這個元素具體往左邊移動還是右邊移動
step = target - current > 0 ? step : -step;
//這句的意思就是 如果是向右移動 那麼step 保持正數 如果是向左移動 那麼step 保持負數 即可
setInterval(function () { current += step; //在之前已經進行判斷了 step 在這裡直接加就可以了 if (Math.abs(target - current) > Math.abs(step)) { element.style.left = current + "px";
//如果終點到目前元素的距離 大於每一次移動的距離 那麼就把目前元素的距離 加step 即current
//雖然獲取的時候不能用style.left 但是賦值的時候還是可以用style.left的
} else { clearInterval(element.timeID);
//如果終點到目前元素的距離 小於每次移動的距離 那麼就把目前元素的位置直接等於終點的位置 element.style.left = target + "px"; } }, 20)
但是這樣並沒有寫完這個函式
此函式還有個bug 就是如果這樣的話 點選滑鼠一次 會多一個定時器出來 而最終只能清理掉一個定時器
所以要在函式還沒有進入 定時器的時候就要進行清理定時器的操作
最終貼上上我的最終程式碼
1 function animation(element, target) { 2 var current = element.offsetLeft; 3 var step = 10; 4 clearInterval(element.timeID); 5 step = target - current > 0 ? step : -step; 6 7 element.timeID = setInterval(function () { 8 current += step; 9 if (Math.abs(target - current) > Math.abs(step)) { 10 11 element.style.left = current + "px"; 12 } else { 13 clearInterval(element.timeID); 14 element.style.left = target + "px"; 15 } 16 }, 20) 17 }
寫的不好 請大家多批評指正
---恢復內容結束---