摘要：今天這篇文章主要簡述如何通過改變屬性來實現動畫效果，比如通過定時器快速改變等屬性，實現圖形在的頁面上做勻速的運動。

今天這篇文章主要簡述js如何通過改變屬性來實現動畫效果，比如通過定時器快速改變width, height, left, top等屬性，實現圖形在html的頁面上做勻速的運動。

現在就有這樣的一個需求，定義2個不同背景顏色的物體，當點擊按鈕的時候，實現向左，向下勻速
運動。

關鍵語法：
1,獲取當前dom的指定屬性值

function computedStyle(dom,attr) {        
        if(getComputedStyle) {
            return getComputedStyle(dom,"")[attr]
        } else {
            return dom.currentStyle()[attr] //兼容IE
        }
  }

這個方法定義的目的是為了獲取dom 屬性的值，例如：
dom: "

2，定時器，返回這個定時器的唯一id標識

  timerId = setInterval(function(){
  },1000);

這個定時器的主要目的是為了勻速改變dom的屬性的值

示例：

   #box{                
        width: 100px; 
        height: 100px; 
        background: red; 
        position:absolute; 
        /*getComputedStyle 方法取屬性左邊的值"left" 為800*/
        left: 800px;  
        top: 50px;
    }


    #box1{                
        width: 100px; 
        height: 100px; 
        background: blue; 
        position:absolute; 
        left: 900px; 
        top: 50px;
    }

    
    
box
    
box1

    //封裝獲取id的方法
    function $(id) {
        return document.getElementById(id);
    }
                
            
    //獲取計算后的屬性  attr="width"
    function computedStyle(dom,attr) {
        
        if(getComputedStyle) {
            return getComputedStyle(dom,"")[attr]
        } else {
            return dom.currentStyle()[attr]
        }
    }
            
    window.onload=function(){
                
        var btn=$("button");
        
        var box=$("box");
        
        var box1=$("box1");
        
        btn.onclick=function(){
                                
            animate(box,"left",100);
            
            animate(box1,"top",400);
        }
            
        function animate(dom,attr,target){                
                    
                    //多個元素一起運動  每個元素綁定一個屬性放當前運動的定時器
                    dom.timer=setInterval(function() {                    
                        var current=parseInt(computedStyle(dom,attr));  
                        var step=(target>current)?1:-1;   
                        /*目標大于當前值 +1  目標小于當前值-1*/                

                        if(target==current) { 
                        // 如果等于100的時候退出，也是定時器退出的條件        
                            dom.style[attr]=target+"px";
                            
                            clearInterval(dom.timer);
                            
                            return false;
                        }
                        //改變位置
                        
                        dom.style[attr]=(current+step)+"px";
                        //改變style的屬性，實現動畫
                        
                    },10)
                    //每10毫秒改變一次
                }
            }