你的位置:首页 > Java教程

[Java教程]JS里面的两种运动函数


最新学了一个新的运动函数,与最初学习的有所不同,第一个运动是根据运动速度完成运动 ,第二个则是根据运动的时间来完成运动,而且把之前的函数都进行了一些兼容处理,在这里列出了看一下:

第一种animate1

 1 function animate1(obj,data,rate,fn){//运动对象,运动数据,[运动速度],[回调函数] 2   //遍历获取样式属性 3   for(var key in data){  4     //通过闭包将key私有化 5     (function(k){ 6       /*  7         获得样式宽高等会带有单位px需要处理掉, 8         如果使用parseInt,当传入opacity为小数时会变为0,所以使用parseFloat 9       */10       var cur = parseFloat( (obj.currentStyle || getComputedStyle(obj,null) )[k]);11       12       //对特殊值进行处理13       if(k == "opacity"){14         //透明度当前值和目标值放大100倍,防止小数被舍去15         cur *= 100;16         data[k] *= 100;17       }18       19       //当前值和目标值相等,直接返回20       if(cur == data[k]){ return; }21       22       //通过自身名字定义定时器,解决每个运动共用一个定时器,造成清除其他运动定时器的问题23       clearInterval(obj[k +'timer']);24       25       obj[k+'timer'] = setInterval(function(){26         27         //当前 += (目标-当前)*比率 比率不传则默认0.228         cur += (data[k] - cur) * (rate || 0.2);29         30         if(Math.round(cur) == data[k]){ 31           //如果到达目标值清除定时器,同步数据32           clearInterval(obj[k+'timer']);33           cur=data[k];34           35           //回调,将定时器赋值为0,遍历每个定时器的值相加,如果所有定时器相加都为0,说明运动已经全部完成,执行回调函数36           obj[k + "timer"] = 0;37           var bl = 0;38           for(var key in data){39             bl += obj[key + "timer"];40           }41           if(bl == 0){42             //判断是否传入回调函数43             fn && fn.call(obj);44           }45         }46         47         //使用数据时判断特殊值48         if(k == "opacity"){49           //opacity具有兼容问题,ie8以下使用filter:alpha(opacity:100)50           obj.style.opacity = cur / 100;51           obj.style.filter = "alpha(opacity="+ cur +")";52         }else{ 53           obj.style[k] = cur + "px";54         }55       },30)56     })(key);57   }58 }

 

第二种animate2

function animate2(obj,data,time,fn){//运动对象,运动数据,[运动时间],[回调函数]  //保存初始值和变化值  var start = {};  var dis = {};    for(var name in data){    //获取样式,根据属性名保存在json中,{width:200,height:200}    start[name] = parseFloat( (obj.currentStyle || getComputedStyle(obj,null) )[name]);    //变化值 = 目标值 - 初始值 ----> {width:500,height:300}    dis[name] = json[name] - start[name];  }     //根据完成的时间获得运动次数,30为定时器频率  var count = Math.round((time || 700)/30);    //记录已经运动次数  var n = 0;  //将定时器绑定在对象身上,如果不同对象调用不会清除之前的运动  clearInterval(obj.timer);  obj.timer = setInterval(function(){        n++;        for(var name in data){      //位置:起点 + 距离/次数*n          var cur = start[name] + dis[name] / count * n;            //对特殊属性进行判断      if(name == "opacity"){        obj.style.opacity = cur;        obj.style.filter = "alpha(opacity:"+cur*100+")";      } else {        obj.style[name] = cur + "px";      }    }          //如果已经运动次数和总次数相等,则完成运动,清除定时器,执行回调函数    if(n == count){      clearInterval(obj.timer);      fn && fn.call(obj);    }      },30); }

总结:

  animate1中各种运动完成的时间是不一致的,而animate2都是在同一时间内完成,

  因此,在调用回调函数的时候animate1需要判断对象中的所有的运动都已经完成,而animate2只要到达运动次数就可以了。

  两个运动函数都能解决正常的动画效果,并不能说哪个就一定比较好,而且都还有改善的地方,以后学到再继续完善吧