完美运动框架

1. 匀速运动

 1     /**
 2      * @param obj  - 待改变的对象
 3      * @param json - 待改变的属性列表
 4      * @return func - 链式调用
 5      */
 6     function startMove(obj, json, func) {
 7         //清除之前的定时器
 8         clearInterval(obj.timer);
 9 
10         //开启定时器
11         obj.timer = setInterval(function() {
12             //检测是否所有动画都已完成的标识
13             var bStop = true;
14 
15             //循环遍历所有要变化的属性
16             for (var attr in json) {
17                 var iCur = 0; //当前值
18                 var iTarget = json[attr]; //目标值
19 
20                 if (attr === "opacity") {
21                     iCur = parseFloat(getStyle(obj, attr)) * 100;
22                 } else {
23                     iCur = parseInt(getStyle(obj, attr));
24                 }
25 
26                 //匀速运动
27                 var iSpeed = 10;
28 
29                 if (iCur !== iTarget) {
30                     //只要有一个动画未完成，就不停止定时器
31                     bStop = false;
32 
33                     //临时结果
34                     var temp = iTarget;
35 
36                     //防止最后越界处理
37                     if (iSpeed < Math.abs(iCur - iTarget)) {
38                         temp = iCur + iSpeed;
39                     }
40 
41                     if (attr === "opacity") {
42                         obj.style.filter = "alpha(opacity:" + temp + ")"
43                         obj.style.opacity = temp / 100;
44                     } else {
45                         obj.style[attr] = temp + "px";
46                     }
47                 }
48             }
49 
50             //如果所有动画都已完成，则清楚定时器
51             if (bStop) {
52                 clearInterval(obj.timer);
53 
54                 //链式调用，执行动画完成之后的动作
55                 if (func) {
56                     func();
57                 }
58             }
59         }, 30);
60     }
61 
62     //兼容，获取对象 style
63     function getStyle(obj, attr) {
64         if (obj.currentStyle) {
65             return obj.currentStyle[attr];
66         } else {
67             return getComputedStyle(obj, false)[attr];
68         }
69     }

2. 缓冲（减速）运动

 1     /**
 2      * @param obj  - 待改变的对象
 3      * @param json - 待改变的属性列表
 4      * @return func - 链式调用
 5      */
 6     function startMove(obj, json, func) {
 7         //清除之前的定时器
 8         clearInterval(obj.timer);
 9 
10         //开启定时器
11         obj.timer = setInterval(function() {
12             //检测是否所有动画都已完成的标识
13             var bStop = true;
14 
15             //循环遍历所有要变化的属性
16             for (var attr in json) {
17                 var iCur = 0; //当前值
18                 var iTarget = json[attr]; //目标值
19 
20                 if (attr === "opacity") {
21                     iCur = parseFloat(getStyle(obj, attr)) * 100;
22                 } else {
23                     iCur = parseInt(getStyle(obj, attr));
24                 }
25 
26                 //减速（缓冲）运动
27                 var iSpeed = (iTarget - iCur) / 8;
28 
29                 //防止出现小数导致误差
30                 iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
31 
32                 if (iCur !== iTarget) {
33                     //只要有一个动画未完成，就不停止定时器
34                     bStop = false;
35 
36                     if (attr === "opacity") {
37                         obj.style.filter = "alpha(opacity:" + iCur + iSpeed + ")"
38                         obj.style.opacity = (iCur + iSpeed) / 100;
39                     } else {
40                         obj.style[attr] = iCur + iSpeed + "px";
41                     }
42                 }
43             }
44 
45             //如果所有动画都已完成，则清楚定时器
46             if (bStop) {
47                 clearInterval(obj.timer);
48 
49                 //链式调用，执行动画完成之后的动作
50                 if (func) {
51                     func();
52                 }
53             }
54         }, 30);
55     }
56 
57     //兼容，获取对象 style
58     function getStyle(obj, attr) {
59         if (obj.currentStyle) {
60             return obj.currentStyle[attr];
61         } else {
62             return getComputedStyle(obj, false)[attr];
63         }
64     }