關於緩動動畫函數的封裝

♥緩動動畫函數

---

 

· 以前我在博客上寫過勻速的動畫函數 ：http://www.javashuo.com/article/p-mrnjvbhf-bv.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)

}