js簡單動畫：勻速動畫、緩動動畫、多物體動畫以及透明度動畫

 

主要實現以下幾種簡單的動畫效果（其實原理基本相同）：

1.勻速動畫：物體的速度固定

2.緩動動畫：物體速度逐漸變慢

3.多物體動畫

4.透明度動畫

 

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

 

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

 

 

 

效果實現：

1.勻速動畫（以物體左右勻速運動為例）

動畫效果主要是用定時器setInterval()來實現的，每隔幾毫秒讓物體移動一點距離，通過不斷調用定時器來達到讓物體運動的效果。

將定時器放在一個函數內，定義物體的運動速度speed為10，判斷物體的運動方向（向左走或向右走）來規定speed的正負；

然后將 物體的offsetLeft加上速度speed 賦值給物體的left樣式值（要給物體設置定位）；

當物體到達目標位置時清除定時器；

　　var box = document.querySelector('.box'); // 獲取box盒子
　　box.addEventListener("mouseover", function() {
　　    animate(400);  // 當鼠標經過盒子時，讓盒子運動到400的位置
　　});
　　var timer = null;  // 聲明一個變量來存儲定時器
　　function animate(target) {  // target 目標位置
    　　clearInterval(timer);  // 開啟定時器前要先關閉上一個定時器，不然定時器會累加導致速度越來越快
    　　timer = setInterval(function() {
        　　var speed = 10;  // 速度 固定值10
        　　speed = box.offsetLeft < target ? speed : - speed;  // 判斷是向左走（負）還是向右走（正）
        　　if(box.offsetLeft == target) {
            　　clearInterval(timer);  // 盒子到達目標值時清除定時器
        　　} else {
            　　box.style.left = box.offsetLeft + speed + 'px';
        　　}
    　　},25)
　　}

 

2.緩動動畫（和勻速運動相同原理，只不過速度做些改變）

讓速度等於 目標值和當前位置之差/10，二者之差會越來越小，即速度speed也會越來越小；

二者之差除以十並不總是整數，可能會導致物體位置和目標值不能完全相等，所以需要對speed進行取整，大於0向上取整，小於0向下取整；

    var box = document.querySelector('.box');
    box.addEventListener("mouseover", function() {
        animate(400);
    });
    var timer = null;
    function animate(target) {
        clearInterval(timer);
        timer = setInterval(function() {
            var speed = (target - box.offsetLeft) / 10; // 速度為目標值和當前位置之差/10
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); // 判斷speed的正負，大於0向上取整，小於0向下取整
            if(box.offsetLeft == target) {
                clearInterval(timer);
            } else {
                box.style.left = box.offsetLeft + speed + 'px';
            }
        }, 25)
    }

 

3.多物體動畫（相同原理，不過要多開器幾個定時器）

因為有多個物體要做動畫，所以要給每個物體都要開啟一個定時器，向上邊那樣只聲明一個timer是不行的，

所以要循環遍歷每個li（我是用列表寫了幾個小盒子），給每個li聲明一個timer來存儲各自的定時器，

並且要給animate函數多添加一個形參obj來區分是哪個盒子的定時器

    var lis = document.querySelectorAll('li');
    for(var i = 0; i < lis.length; i++) {   // 循環遍歷li
        lis[i].timer = null;   // 給每個li聲明一個timer來存儲定時器
        lis[i].addEventListener("mouseover", function() {
            animate(this, 400);
        });
    }
    function animate(obj, target) {
        clearInterval(obj.timer);
        obj.timer = setInterval(function() {
            var speed = (target - obj.offsetLeft) / 10;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
            if(obj.offsetLeft == target) {
                clearInterval(obj.timer);
            } else {
                obj.style.left = obj.offsetLeft + speed + 'px';
            }
        }, 25)
    }

 

4.透明度動畫（與勻速運動相似）

聲明一個alpha變量來存儲當前的透明度，speed為速度，當前透明度加速度 賦值給盒子的透明度樣式。

（多個物體透明度也是和上邊多物體動畫一樣的，給每個物體都添加一個定時器，並給animate函數多一個形參obj）

<style>
    .box {
        width: 200px;
        height: 200px;
        background-color: #f00;
        opacity: 0.3;
        filter: alpha(opacity = 30); /* 兼容IE8及以下的IE瀏覽器 */
    }
</style>
<script>
    window.addEventListener('load', function() {
        var box = document.querySelector('.box');
        box.addEventListener('mouseover', function() {
            animateAlpha(100);  // 鼠標經過盒子 透明度變為1
        })
        box.addEventListener('mouseout', function() {
            animateAlpha(30);  // 鼠標離開透明度變為0.3
        })
        var alpha = 30;  // 存儲當前透明度 初始值為30
        var timer = null;
        function animateAlpha(target) {
            clearInterval(timer);
            timer = setInterval(function() {
                var speed = 10;
                speed = alpha < target ? speed : - speed; // 判斷速度的正負
                if(alpha == target) {
                    clearInterval(timer);
                } else {
                    alpha += speed;
                    /* 這里有兩個樣式都需要改變 */
                    box.style.filter = 'alpha(opacity = '+ alpha +')';
                    box.style.opacity = alpha / 100; // opacity別忘了除以100
                }
            }, 25);
        }
    })
</script>