原生JS實現動畫函數的封裝

支持元素的基本動畫：寬、高、透明度...等，也支持鏈式動畫和同時運動。

獲取元素的屬性的函數並進行了兼容性處理：

    function getStyle(obj, attr) {
        if(obj.currentStyle){   //IE瀏覽器
            return obj.currentStyle[attr];
        }else{    //chrome、firefox等瀏覽器
            return getComputedStyle(obj,null)[attr];
        }
    }

動畫函數：

    var timer = null;  // 聲明一個timer來存儲定時器
    function animate(obj, json, callback) {
        clearInterval(obj.timer);
        obj.timer = setInterval(function() {
            /* 
                * 當我們改變多個屬性時，如果其中一個屬性已經達到目標值，就會清除定時器，就會導致其他沒有達到目標值的屬性也會停止
                * 為了解決這個問題，我們聲明一個節流閥flag，讓它為true
                * 判斷是否還有沒達到目標值的屬性，如果還有，就讓flag為false（關閉節流閥），讓定時器繼續執行
                * 當所有屬性都達到了目標值時，才執行清除定時器那一步
                */
            var flag = true;
            for(var attr in json) {  // for...in...遍歷對象
                var icur = 0;  // 存儲獲取過來的屬性值
                if(attr == 'opacity') {  // 判斷獲取過來的屬性是否為opacity
                    icur = Math.round(parseFloat(getStyle(obj, attr)) * 100); // float會有小誤差，所以需要四舍五入一下
                } else {
                    icur = parseInt(getStyle(obj, attr));  // 獲取過來的值可能帶單位，所以需要用到parseInt()
                }
                var speed = (json[attr] - icur) / 10;  // 速度 逐漸變慢（也可以設為固定值實現勻速運動）
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); // speed並不總是整數，會導致和目標值不相等，所以需要對speed進行取整，大於0向上取整，小於0向下取整
                if(icur != json[attr]) {  // 判斷是否還有屬性沒有達到目標值
                    flag = false;
                }
                if(attr == 'opacity') {  // opacity是沒有單位的，所以在這里需要判斷一下
                    obj.style.filter = 'alpha(opacity = '+ (icur + speed) +')';
                    obj.style.opacity = (icur + speed) / 100;  // opacity別忘了除以100
                } else {
                    obj.style[attr] = icur + speed + 'px';  // 原來的值加上速度賦值給屬性
                }
            }
            if(flag) { // 當所有屬性都達到目標值，即flag為true時，再停止定時器
                clearInterval(obj.timer);
                callback && callback();  // 判斷是否有回調函數，有的話就執行
            }
        }, 25)
    }

 

接下來我們來測試一下：

    var box = document.querySelector('.box');
    box.addEventListener("mouseover", function() {
        animate(this, {width: 300, height: 200, opacity: 100}, function() {
            animate(box, {width: 200, height: 100, opacity: 30});
        });
    });

結果如下：

 

具體代碼點擊→https://github.com/sunyan1998/Some-demos （覺得不錯右上角順手點個☆star哦~感謝O(∩_∩)O~）

里面有很多CSS3/JS/jQuery小例子哦，包括各種輪播圖、電梯導航、封裝的動畫函數、todolist、登錄模態框（可拖動）、購物車、點擊換膚、密碼顯示隱藏、各種布局（bootstrap-flex-rem）等等......