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.2
28 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 } //!!!!!!!!这里的fn&&fn.call(obj) 不懂,返回的是false的fn或fn.call(obj)还是布尔值false?
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 }
相关分类