jquery191源码分析系列（十五）动画处理之缓动动画核心tween_jquery

《jquery191源码分析系列（十五）动画处理之缓动动画核心tween_jquery》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、jQuery1.9.1源码分析系列(十五)动ffll处理之缓动动画核心Tween在jQuery内部函数Animation中调用到了createTweens()来创建缓动动画组,创建完成后的结果为：▼tweens:Array[4]▼0：Tween•initeasing:"swing"►elem:div#myDivend:200now:0▼options:Object►complete:function(){duration:400old:falsequeue:"fx"►specialEasing:Obje

2、ct►_proto_:Tween▼1：Tween.initeasing:11swing"►elem:div#myDivend:200now:0unit:Mpxfi►options:ObjectmarninKighV►_proto_:Tween▼2:Tween.initeasing:r,sw►elem:div#myDivend:200now:0Aoptions:Ob址ctCprop:f,marginBottomunit:"px"►_proto_:Tween▼3:Tween•initeasing:11swi

3、ng"►elem:div#myDivend:200now:0►options:ObjectZprop:^ma厂ginLeft11start:0"unit:Mpxfi►_proto_:Tween1^nai"h•A.可以看到上面的缓动动画组有四个原子动画组成。每一个原子动画的信息都包含在里面了。仔细查看createTweens函数，实际上就是遍丿力调用了tweeners[〃*"]的数组中的函数(实际上就只有一个元素)。functioncreateTweens(animation,props){jQuery.

4、each(props,function(prop,value){varcollection=(tweeners[prop]

5、[]).concat(tweeners[〃*〃]),index二0,length=collection,length;for(;index

6、〃][0]函数，主要代码如下function(prop,value){varend,unit,〃根据css特征值获取缓动动画结构tween=this.createTween(prop,value),parts二rfxnum.exec(value),target二tween,cur(),start二+target

7、

8、0,scale=1,maxiterations=20;if(parts){end=+parts⑵;unit二parts[3]

9、

10、(jQuery.cssNumbc讥prop]?:〃px〃);〃非

11、像素单位的属性if(unit!=="px"&&start){//从一个非零起点开始迭代，〃对于当前属性，如果它使用相同的单位这一过程将是微不足道//后备为end,或一个简单的常量start=jQuery.css(tween,elem,prop,true)

12、

13、end

14、

15、1;do{〃如果前一次迭代为零，加倍，直到我们得到*东西*〃使用字符串倍壇因子，所以我们不会偶然看到scale不改变scale二scale

16、

17、〃•5";//调整和运行start=start/scale;jQuery.style(tween,

18、elem,prop,start+unit);//更新scale,默认0或NaN从tween,cur()获取//跳出循环，如果scale不变或完成时，或者我们已经觉得已经足够了}while(scale!二二(scale二tween,cur()/target)&&scale!==1&&--maxiterations);}tween,unit二unit;tween,start=start;〃如果提供了+二/-二记号，表示我们止在做一个相对的动画tween.end=parts[l]?start+(parts[l

19、]+1)*end:end;}returntween;}]}；可以看岀除了hide/show两种动画外的其他动画都经过tweeners[〃*"][0]这个函数封装了动画组。其中有儿个关键的数组start/end/unito特别是对非像素单位的动画start值获取费了一番功夫。还有一个比较关键的地方是都用了this.createTween获取单个css特征的基础的动画特征。而animation.createTween中直接调用jQuery.Tw