[TOC] > 本文采取逐步深入的方式講解原生JS封裝運動函式的過程， > 封裝結果適用於元素大部分屬性的運動， > 運動方式將根據需求持續更新，目前主要支援常用的兩種：勻速運動和緩衝運動。 ### 階段一、僅適用單位帶px屬性的勻速運動 **效果圖：**  **封裝思路：** 1. 傳入需要運動的屬性`attr`、運動的目標值`target_value`、運動速度`speed`； 2. 對速度進行簡單處理`speed = speed || 5`，即不傳入速度引數值時，預設速度為5； 3. 使用`getComputedStyle()`獲取元素該屬性的當前值`now_value`，通過`target_value > now_value ? Math.abs(speed) : -Math.abs(speed);`獲取運動的方向； 4. 通過`Math.abs(target_value - now_value) <= Math.abs(speed)`獲取終止條件，需要終止時關閉定時器並將運動元素送至終點`box_ele.style[attr] = target_value + "px";` **完整程式碼：** ``` ```

---

### 階段二、可適用單位不帶px屬性（如opacity）的勻速運動 **效果圖：**  **封裝思路：** 1. 在階段一的基礎上新增對元素運動屬性的判定，若運動屬性為`opacity`，需要對相關值進行處理； 2. 由於預設速度為5，而`opacity`的範圍為0～1，故需要對目標值和當前值進行處理，即`now_value = parseInt(getComputedStyle(box_ele)[attr] * 100);` `target_value *= 100;` 3. 渲染元素運動效果時由`opacity`屬性不帶單位px，故也需要進行處理，即運動時 `box_ele.style[attr] = now_value / 100;`，終止時`box_ele.style[attr] = target_value / 100;` **完整程式碼：** ``` ```

---

### 階段三、適用於多元素單一屬性的勻速運動 **效果圖：**  **封裝思路：** 1. 在階段二的基礎上新增引數`ele`，從而可以控制不同元素的運動； 2. 將定時器放入運動元素物件中，即`ele.timer = setInterval(function(){}`，避免相互之間造成干擾 **完整程式碼：** ``` ```

---

### 階段四、適用於多元素單一屬性的勻速或緩衝運動 **效果圖：**  **封裝思路：** 1. 在階段三的基礎上新增引數`animate_mode`，並設定`animate_mode = "uniform_motion"`，即預設為勻速運動； 2. 根據傳入的運動方式計算速度，若傳入的引數為`"butter_motion"`，速度計算方法為`speed = (target_value - now_value) / 10`，即根據距離目標值的距離不斷調整速度，越靠近目標點速度越慢； 3. 注意速度計算需要放入定時器中，因為只有定時器中的`now_value`在不斷變化。 **完整程式碼：** ``` ```

---

### 階段五、適用於多元素多屬性的勻速或緩衝運動 **效果圖：**  **封裝思路：** 1. 在階段四的基礎上將屬性引數`attr`、目標值引數`target_value`刪除，替換為`attr_obj`； 2. 遍歷傳入的屬性物件，對每個屬性值進行處理，分別設定屬性的目標值`target_value`和當前值`now_value`； 3. 在定時器中遍歷傳入的屬性物件，逐個屬性進行運動； 4. 由於運動目標的不一致會讓運動執行次數不同，有可能提前關閉定時器，故某條屬性運動完成時刪除該條屬性資料，直到物件裡沒有屬性，關閉定時器。 **完整程式碼：** ``` ```

---

### 總結 至此運動函式已封裝完成，該功能適用於大多數情況下元素的運動。 可以實現輪播圖、螢火蟲、放煙花、商品放大鏡等多種