js运动基础之缓冲运动

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

单属性缓冲运动

 1     /**
 2      * 单属性缓冲运动
 3      */
 4     function fnSingleBufferMove(oDom, sAttr, iTarget, fn){
 5         var iSpeed, iCur;
 6         clearInterval(oDom.timer);
 7         oDom.timer = setInterval(function(){
 8             // 计算当前值
 9             if(sAttr == ‘opacity‘){
10                 iCur = Math.round(fnGetStyle(oDom, sAttr) * 100);
11             }else{
12                 iCur = parseInt(fnGetStyle(oDom, sAttr));
13             }
14 
15             // 计算速度
16             iSpeed = (iTarget - iCur) / 8;
17             iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); // 速度取整(浏览器会对样式的小数部分进行四舍五入，导致不能达到终点)
18 
19             // 运动停止
20             if(iCur == iTarget){
21                 clearInterval(oDom.timer);
22                 fn && fn();
23             }else{
24                 if(sAttr == ‘opacity‘){
25                     oDom.style.opacity = (iCur + iSpeed) / 100;
26                     oDom.style.filter = ‘alpha(opacity: ‘ + (iCur + iSpeed) + ‘)‘;
27                 }else{
28                     oDom.style[sAttr] = iCur + iSpeed + ‘px‘;
29                 }
30             }
31         }, 30);
32     }

多属性缓冲运动

 1     /**
 2      * 多属性缓冲运动
 3      */
 4     function fnMultiBufferMove(oDom, json, fn){
 5         var iSpeed, iCur, bStop;
 6         clearInterval(oDom.timer);
 7         oDom.timer = setInterval(function(){
 8             bStop = 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                 iSpeed = (json[sAttr] - iCur) / 8;
19                 iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); // 速度取整(浏览器会对样式的小数部分进行四舍五入，导致不能达到终点)
20 
21                 // 运动
22                 if(iCur != json[sAttr]){
23                     bStop = false;
24                     if(sAttr == ‘opacity‘){
25                         oDom.style.opacity = (iCur + iSpeed) / 100;
26                         oDom.style.filter = ‘alpha(opacity: ‘ + (iCur + iSpeed) + ‘)‘;
27                     }else{
28                         oDom.style[sAttr] = iCur + iSpeed + ‘px‘;
29                     }
30                 }
31             }
32 
33             // 运动停止
34             if(bStop){
35                 clearInterval(oDom.timer);
36                 fn && fn();
37             }
38         }, 30);
39     }