js运动基础之匀速运动

浏览数：35 / 时间：2015年06月09日

单个属性匀速运动

 1     /**
 2      * 单属性匀速运动
 3      */
 4     function fnSingleUniformMove(oDom, sAttr, iTarget, fn){
 5         var iSpeed, iCur;
 6         clearInterval(oDom.timer); // 开启定时器前先清除定时器，避免动画重复叠加
 7         oDom.timer = setInterval(function(){
 8 
 9             // 计算当前值
10             if(sAttr == ‘opacity‘){
11                 iCur = Math.round(fnGetStyle(oDom, sAttr) * 100);
12             }else{
13                 iCur = parseInt(fnGetStyle(oDom, sAttr));
14             }
15 
16             // 设置速度
17             if(iTarget < iCur){
18                 iSpeed = -10;
19             }else{
20                 iSpeed = 10;
21             }
22 
23             // 当目标点和当前值差值小于速度时速度等于差值
24             if(Math.abs(iTarget - iCur) < Math.abs(iSpeed)){
25                 iSpeed = iTarget - iCur;
26             }
27 
28             // 运动停止判断
29             if(iTarget == iCur){
30                 clearInterval(oDom.timer);
31                 fn&&fn();
32             }else{
33                 if(sAttr == ‘opacity‘){
34                     oDom.style.opacity = ( iCur + iSpeed ) / 100;
35                     oDom.style.filter = ‘alpha(opacity: ‘ + (iCur + iSpeed) + ‘)‘;
36                 }else{
37                     oDom.style[sAttr] = iCur + iSpeed + ‘px‘;
38                 }
39             }
40         }, 30);
41     };

多属性同时改变的匀速运动

 1     /**
 2      * 多属性匀速运动
 3      */
 4     function fnMultiUniformMove(oDom, json, fn){
 5         var iSpeed, iCur, bStop;
 6         clearInterval(oDom.timer); // 开启定时器前先清除定时器，避免动画重复叠加
 7         oDom.timer = setInterval(function(){
 8             bStop = true; // 进行for in 循环前为true，如果有一个没达到目标点下面就会让他变为false，最后判断该值是否为true来决定是否关闭定时器
 9             for(var sAttr in json){
10                 // 计算当前值
11                 if(sAttr == ‘opacity‘){
12                     iCur = Math.round(fnGetStyle(oDom, sAttr) * 100);
13                 }else{
14                     iCur = parseInt(fnGetStyle(oDom, sAttr));
15                 }
16 
17                 // 设置速度
18                 if(json[sAttr] < iCur){
19                     iSpeed = -10;
20                 }else{
21                     iSpeed = 10;
22                 }
23 
24                 // 当目标点和当前值差值小于速度时速度等于差值
25                 if(Math.abs(json[sAttr] - iCur) < Math.abs(iSpeed)){
26                     iSpeed = json[sAttr] - iCur;
27                 }
28 
29                 // 单属性运动停止判断
30                 if(json[sAttr] != iCur){
31                     bStop = false;
32                     if(sAttr == ‘opacity‘){
33                         oDom.style.opacity = ( iCur + iSpeed ) / 100;
34                         oDom.style.filter = ‘alpha(opacity: ‘ + (iCur + iSpeed) + ‘)‘;
35                     }else{
36                         oDom.style[sAttr] = iCur + iSpeed + ‘px‘;
37                     }
38                 }
39             }
40 
41             // 整体运动停止的判断
42             if(bStop){
43                 clearInterval(oDom.timer);
44                 fn&&fn();
45             }
46         }, 30);
47     };

获取元素样式的方法

1     // 获取元素的某个样式的值
2     function fnGetStyle(oDom, sAttr){
3         if(getComputedStyle){
4             return getComputedStyle(oDom, null)[sAttr]; // getComputedStyle获取自定义值时返回undefined
5         }else{
6             return oDom.currentStyle[sAttr]; // currentStyle和getAttribute一样可以读取自定义的值（这样opacity的值才能被获取）
7         };
8     };