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

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

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

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

3.多物體動畫

4.透明度動畫

效果實現：

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

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

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

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

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

 1 　　var box = document.querySelector('.box'); // 獲取box盒子
 2 　　box.addEventListener("mouseover", function() {
 3 　　    animate(400);  // 當鼠標通過盒子時，讓盒子運動到400的位置
 4 　　});
 5 　　var timer = null;  // 聲明一個變量來存儲定時器
 6 　　function animate(target) {  // target 目標位置
 7     　　clearInterval(timer);  // 開啓定時器前要先關閉上一個定時器，否則定時器會累加致使速度愈來愈快
 8     　　timer = setInterval(function() {
 9         　　var speed = 10;  // 速度 固定值10
10         　　speed = box.offsetLeft < target ? speed : - speed;  // 判斷是向左走（負）仍是向右走（正）
11         　　if(box.offsetLeft == target) {
12             　　clearInterval(timer);  // 盒子到達目標值時清除定時器
13         　　} else {
14             　　box.style.left = box.offsetLeft + speed + 'px';
15         　　}
16     　　},25)
17 　　}

 

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

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

兩者之差除以十並不老是整數，可能會致使物體位置和目標值不能徹底相等，因此須要對speed進行取整，大於0向上取整，小於0向下取整；

 1     var box = document.querySelector('.box');
 2     box.addEventListener("mouseover", function() {
 3         animate(400);
 4     });
 5     var timer = null;
 6     function animate(target) {
 7         clearInterval(timer);
 8         timer = setInterval(function() {
 9             var speed = (target - box.offsetLeft) / 10; // 速度爲目標值和當前位置之差/10
10             speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); // 判斷speed的正負，大於0向上取整，小於0向下取整
11             if(box.offsetLeft == target) {
12                 clearInterval(timer);
13             } else {
14                 box.style.left = box.offsetLeft + speed + 'px';
15             }
16         }, 25)
17     }

 

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

由於有多個物體要作動畫，因此要給每一個物體都要開啓一個定時器，向上邊那樣只聲明一個timer是不行的，

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

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

 1     var lis = document.querySelectorAll('li');
 2     for(var i = 0; i < lis.length; i++) {   // 循環遍歷li
 3         lis[i].timer = null;   // 給每一個li聲明一個timer來存儲定時器
 4         lis[i].addEventListener("mouseover", function() {
 5             animate(this, 400);
 6         });
 7     }
 8     function animate(obj, target) {
 9         clearInterval(obj.timer);
10         obj.timer = setInterval(function() {
11             var speed = (target - obj.offsetLeft) / 10;
12             speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
13             if(obj.offsetLeft == target) {
14                 clearInterval(obj.timer);
15             } else {
16                 obj.style.left = obj.offsetLeft + speed + 'px';
17             }
18         }, 25)
19     }

 

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

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

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

 1 <style>
 2     .box {
 3         width: 200px;
 4         height: 200px;
 5         background-color: #f00;
 6         opacity: 0.3;
 7         filter: alpha(opacity = 30); /* 兼容IE8及如下的IE瀏覽器 */
 8     }
 9 </style>
10 <script>
11     window.addEventListener('load', function() {
12         var box = document.querySelector('.box');
13         box.addEventListener('mouseover', function() {
14             animateAlpha(100);  // 鼠標通過盒子 透明度變爲1
15         })
16         box.addEventListener('mouseout', function() {
17             animateAlpha(30);  // 鼠標離開透明度變爲0.3
18         })
19         var alpha = 30;  // 存儲當前透明度 初始值爲30
20         var timer = null;
21         function animateAlpha(target) {
22             clearInterval(timer);
23             timer = setInterval(function() {
24                 var speed = 10;
25                 speed = alpha < target ? speed : - speed; // 判斷速度的正負
26                 if(alpha == target) {
27                     clearInterval(timer);
28                 } else {
29                     alpha += speed;
30                     /* 這裏有兩個樣式都須要改變 */
31                     box.style.filter = 'alpha(opacity = '+ alpha +')';
32                     box.style.opacity = alpha / 100; // opacity別忘了除以100
33                 }
34             }, 25);
35         }
36     })
37 </script>