動畫函式封裝

1. 動畫實現原理

核心原理：通過定時器 setInterval() 不斷移動盒子位置。

實現步驟：

1. 獲得盒子當前位置

2. 讓盒子在當前位置加上1個移動距離

3. 利用定時器不斷重複這個操作

4. 加一個結束定時器的條件

5. 注意此元素需要新增定位，才能使用element.style.left

2. 動畫函式給不同元素記錄不同定時器

如果多個元素都使用這個動畫函式，每次都要var 宣告定時器。我們可以給不同的元素使用不同的定時器（自己專門用自己的定時器）。f

核心原理：利用 JS 是一門動態語言，可以很方便的給當前物件新增屬性。

 function animate(obj, target) {
      // 當我們不斷的點選按鈕，這個元素的速度會越來越快，因為開啟了太多的定時器
      // 解決方案就是 讓我們元素只有一個定時器執行
      // 先清除以前的定時器，只保留當前的一個定時器執行
      clearInterval(obj.timer);
      obj.timer = setInterval(function() {
        if (obj.offsetLeft >= target) {
          // 停止動畫 本質是停止定時器
          clearInterval(obj.timer);
         }
        obj.style.left = obj.offsetLeft + 1 + 'px';
​
       }, 30);
     }
​
 

f