關於緩動動畫函式的封裝

Lzxgg發表於2019-01-11
動畫函式封裝

♥緩動動畫函式

 

· 之前我在部落格上寫過勻速的動畫函式 ：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)

}

 

　　　　　　　　　

相關文章