?緩動動畫函數

· 之前我在博客上寫過勻速的動畫函數 ：https://www.cnblogs.com/Lzxgg-xl/p/10227127.html

· 與勻速的相比 有相同的地方 也有不同的地方 我在這裏就簡單的寫一遍

　　一. 首先還是一樣，因為它是個函數體我們要傳參 即 ：

　　　　1.移動的元素

　　　　2.移動的目的地

　　 二. 和勻速的一樣 要先清理定時器 不然會發生點擊多次移動的速度越來越快的狀況

　　　　　1.因為每點擊一次按鈕 就會多生成一個定時器 生成的多了之後 速度就會加快 因為如果兩個定時器一起進行 原本40的速度就會變成80

　　　　　2.因為我們寫的是緩動的動畫效果 所以可能視覺上看的並不是很明顯 但是我們要註意誤差 要做到盡量嚴謹

　　三. 和勻速不同的地方

　　　　　　 每次移動的距離是變化的 這個的具體實現是這樣的：

　　　　　　　　　每次令step = （target-current）/10

　　　　　　　　　這樣會出現有小數存在的情況 然而如果一直有小數 我們一直無法到達重點 就會是一個死循環

　　　　　　　　　如果step是正數 我們向下取整 那麽也是永遠到不了的 因為到了0.x的小數的時候你向下取整 永遠是0 也止步不前

　　　　　　　　　所以說 正數的話要向上取整 負數的話向下取整就可以解決這個問題

　　　　　　下面給出代碼：

function animate(element, target) {
    
 
//先清理定時器
    clearInterval(element.timeID);


//緩動動畫函數的封裝
    element.timeID= setInterval(
        function () {
            var current = element.offsetLeft;
            var step = (target - current) / 10;
            //如果step 是正數 那麽取的時候要向上取整  不然永遠無法到達目的地
            //  如果step 是負數 那麽取得時候要向下取整  不然永遠無法到達目的地
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            current 
 
+= step;
            element.style.left = current + "px";
            if (current == target){
                clearInterval(element.timeID);
            }
            console.log("當前距離是"+ current +",每一步移動"+Math.abs(step));
　　　　　　　//這個寫入操作臺的呢  是為了防止有錯誤  就是說用來檢查自己寫的對不對  如果你寫熟練了那麽可以去掉

        }
        , 20)

}

關於緩動動畫函數的封裝