一、目录
1. 入门案例——实现匀速运动
2. 入门案例——实现缓冲运动
3. 实现任意值的运动框架v.1
4. 改进任意值的运动框架v.2
5. 改进任意值的运动框架v.3
6. 实现链式运动框架
7. 实现完美运动框架
二、内容
1. 入门案例——实现匀速运动
①. 要求：只要简单的实现传入的对象和运动的最终目标，便能操作该对象的left属性的大小匀速的变化到目标大小。
②. 具体代码：
1 2 3 4 56 15 44 45 46 47 48 49
2. 入门案例——实现缓冲运动
①. 要求：只要简单的实现传入的对象和运动的最终目标，便能操作该对象的left属性的大小由大到小的变化到目标大小。
②. 具体代码：
1 2 3 4 56 7 25 57 58 59 60 61 62 63
3. 实现任意值的运动框架v.1
①. 要求：只要简单的实现传入的对象、要变化的属性名和运动的最终目标，便能操作该对象的传入要变花属性的值由大到小的变化到目标大小。（基于缓冲运动）
②. 具体代码：
1 2 3 4 5任意值运动框架version 1.0 6 22 104 105 106 107 108 109 110
4. 改进任意值的运动框架v.2
①. 要求：在ie低版本测试下，透明度的值因为是小数，会出现一些特殊的情况，所以对此进行改进。
②. 具体代码：
1 2 3 4 5 6任意值运动框架version 2.0 7 24 109 110 111 112 113 114 115
5. 改进任意值的运动框架v.3
①. 要求：在任意值的运动框架的1/2版本中，都没有实现多物体运动，也就是同时多个物体进行运动，在第三版本中加入了多物体运动的功能。
②. 具体代码：
1 2 3 4 5 6任意值运动框架version 2.0 7 24 111 112 113 114 115 116 117
6. 实现链式运动框架
①. 要求：让其运动可以一个接一个的运行，也就是链式运动。具体效果看测试代码
②. 具体代码：
html代码部分：
1 2 3 4 56 14 15 16 27 28 29 30 31 32 33
链式运动框架.js代码：
1 /** 2 * 获取计算后的样式 3 * @param obj 对象 4 * @param name 样式名称：width/height等 5 * @returns {*} 6 */ 7 function getStyle(obj, name) { 8 if (obj.currentStyle) { 9 return obj.currentStyle[name];10 } else {11 return getComputedStyle(obj, false)[name];12 }13 }14 15 function startMove(obj, attr, iTarget, fun) {16 clearInterval(obj.timer);17 obj.timer = setInterval(function () {18 var cur;19 if (attr == 'opacity') {20 cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);21 } else {22 cur = parseInt(getStyle(obj, attr));23 }24 var speed = (iTarget - cur) / 6;25 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);26 if (cur == iTarget) {27 clearInterval(obj.timer);28 if (fun) {29 fun();30 }31 } else {32 if (attr == 'opacity') {33 obj.style.filter = 'alpha(opacity:' + (cur + speed) + ')';34 obj.style.opacity = (cur + speed) / 100;//把范围重新缩小为0~1之间35 } else {36 obj.style[attr] = cur + speed + 'px';37 }38 }39 }, 30);40 }
7. 实现完美运动框架
①. 要求：改进链式运动框架，链式框架没办法实现多个“属性”同时运动！比如width、height同时变化。链式运动框架是没法实现的，所以对此进行改进，也就是最终的运动框架！
②. 具体代码：
html代码部分：
1 2 3 4 56 13 14 26 27 28 29 30 31
完美运动框架.js代码部分：
1 /** 2 * 获取对象的样式 3 * @param obj 对象 4 * @param name 样式名称 5 */ 6 function getStyle(obj, name) { 7 if (obj.currentStyle) { 8 return obj.currentStyle[name]; 9 } else {10 return getComputedStyle(obj, false)[name];11 }12 }13 /**14 * 完美运动框架实现了链式运动框架无法实现多属性同时运动的情况。如：width/height同时运动15 * @param obj16 * @param json 把要运动的属性通过json方式传入。如：{width:500,height:500}17 * @param fun 执行完动作后，需要调用的方法18 */19 function startMove(obj, json, fun) {20 clearTimeout(obj.timer);21 obj.timer = setInterval(function () {22 var stop = true; //用来判断是否可以关闭定时器23 for (var item in json) {24 var cur;25 if (item == 'opacity') {26 cur = Math.round(parseFloat(getStyle(obj, item)) * 100);27 } else {28 cur = parseInt(getStyle(obj, item));29 }30 var speed = (json[item] - cur) / 6;31 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);32 if (cur != json[item]) { //判断当前对象的值是否已经达到目标值33 stop = false; //未达到目标值时，让stop为false。34 }35 if (item == 'opacity') {36 obj.style.filter = 'alpha(opacity:' + (cur + speed) + ')';37 obj.style.opacity = (cur + speed) / 100;//把范围重新缩小为0~1之间38 } else {39 obj.style[item] = cur + speed + 'px';40 }41 if(stop){42 clearInterval(obj.timer);43 if(fun){fun();} 44 }45 }46 }, 30);47 }
声明：这些知识点都来自智能社的视频所得~~