這篇文章主要介紹了Javascript 完美運動框架,逐行分析代碼，讓你輕松了運動的原理,需要的朋友可以參考下

大家一聽這名字就知道，有了這套框架 網上的效果基本都是可以實現的。實際上之前的運動框架還是有局限性的，就是不能讓好幾個值一塊運動。

那這個問題怎么解決呢? 我們先來看看之前的運動框架

1. function getStyle(obj, name) { 
2. if (obj.currentStyle) { 
3. return obj.currentStyle[name]; 
4. } else { 
5. return getComputedStyle(obj, null)[name]; 
6. } 
7. } 
8.  
9.  
10. function startMove(obj, attr, iTarget) { 
11. clearInterval(obj.time); 
12. obj.time = setInterval(function() { 
13. var cur = 0; 
14.  
15. if (attr == 'opacity') { 
16. cur = Math.round(parseFloat(getStyle(obj, attr)) * 100); 
17. } else { 
18. cur = parseInt(getStyle(obj, attr)); 
19. } 
20.  
21. var speed = (iTarget - cur) / 6; 
22.  
23. speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); 
24.  
25. if (cur == iTarget) { 
26. clearInterval(obj.time); 
27. } else { 
28. if (attr == 'opacity') { 
29. obj.style.filter = 'alpha(opacity=' + cur + speed + ')'; 
30. obj.style.opacity = (cur + speed) / 100; 
31. } else { 
32. obj.style[attr] = cur + speed + 'px'; 
33. } 
34. } 
35. }, 30); 
36. } 

怎么修改呢? 實際上很簡單， 在過去的框架中，你每一次只能傳一個樣式，和一個值。那么現在把這些改成一個json對象。相信大家就明白了。

我們調用的時候就是startMove(oDiv,{width:200,height:200}); 如果需要的話就在加上回調函數。那么我們具體看看代碼是怎么修改的。

1. function startMove(obj, json, fnEnd) 
2. { 
3. var MAX=18; 
4. //每次調用就只有一個定時器在工作(開始運動時關閉已有定時器) 
5. //并且關閉或者開啟都是當前物體的定時器，已防止與頁面上其他定時器的沖突，使每個定時器都互不干擾  
6. clearInterval(obj.timer);  
7. obj.timer=setInterval(function (){ 
8.  
9. var bStop=true; // 假設：所有的值都已經到了 
10.  
11. for(var name in json) 
12. { 
13. var iTarget=json[name]; // 目標點 
14.  
15. //處理透明度，不能使用parseInt否則就為0了  
16.  
17. if(name=='opacity') 
18. { 
19.  
20. // *100 會有誤差 0000007 之類的 所以要用 Math.round() 會四舍五入 
21. var cur=Math.round(parseFloat(getStyle(obj, name))*100);  
22. } 
23. else 
24. { 
25. var cur=parseInt(getStyle(obj, name)); // cur 當前移動的數值 
26. } 
27.  
28. var speed=(iTarget-cur)/5; // 物體運動的速度 數字越小動的越慢 /5 : 自定義的數字 
29.  
30. speed=speed>0?Math.ceil(speed):Math.floor(speed); 
31.  
32. if(Math.abs(speed)>MAX)speed=speed>0?MAX:-MAX; 
33.  
34. if(name=='opacity') 
35. { 
36. obj.style.filter='alpha(opacity:'+(cur+speed)+')'; //IE 
37. obj.style.opacity=(cur+speed)/100; //ff chrome 
38. } 
39. else 
40. { 
41. obj.style[name]=cur+speed+'px'; 
42. } 
43.  
44. // 某個值不等于目標點  
45. if(cur!=iTarget) 
46. { 
47. bStop=false; 
48. } 
49. } 
50.  
51. // 都達到了目標點 
52. if(bStop) 
53. { 
54. clearInterval(obj.timer); 
55.  
56. if(fnEnd) //只有傳了這個函數才去調用 
57. { 
58. fnEnd(); 
59. } 
60. } 
61. }, 20); 
62. } 

為什么會有bstop的假設呢？

其實如果我這樣調用startMove(oDiv,{width:101,height:200}); 寬度變成101 已經完成運動了，高度沒有到， 但是我們可能已經關閉了當前的定時器。運動已經結束了，就會出現一個特殊情況下的bug。解釋一下：

實際上來說，需要所有的運動都到了才關閉定時器，反過來說，如果沒有不到的，那就關閉。在程序上就是定義一個布爾值，一開始為true，假設

所有的值都已經到了，如果說有一個值不等于目標點，bstop為false 。 在整個循環結束后，bstop 為ture 就說明所有運動都完成了，這個時候就關閉定時器。

那么這個運動框架基本已經完成了，適用css2 不適用css3。

總結：

運動框架的演變過程

startMove(iTarget) 運動框架

startMove(obj,iTarget) 多物體

startMove(obj,attr,iTarget) 任意值

startMove(obj,attr,iTarget,fn) 鏈式運動

startMove(obj,json,fn) 完美運動

O(∩_∩)O謝謝 ~