资源描述:
《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(;index6、〃][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