Javascript之封装运动函数

[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. 由于运动目标的不一致会让运动执行次数不同，有可能提前关闭定时器，故某条属性运动完成时删除该条属性数据，直到对象里没有属性，关闭定时器。 **完整代码：** ``` ```

---

### 总结 至此运动函数已封装完成，该功能适用于大多数情况下元素的运动。 可以实现轮播图、萤火虫、放烟花、商品放大镜等多种效果。