jquery191源碼分析系列（十五）動(dòng)畫(huà)處理之緩動(dòng)動(dòng)畫(huà)核心tween_jquery

《jquery191源碼分析系列（十五）動(dòng)畫(huà)處理之緩動(dòng)動(dòng)畫(huà)核心tween_jquery》由會(huì)員上傳分享，免費(fèi)在線(xiàn)閱讀，更多相關(guān)內(nèi)容在工程資料-天天文庫(kù)。

1、jQuery1.9.1源碼分析系列(十五)動(dòng)ffll處理之緩動(dòng)動(dòng)畫(huà)核心Tween在jQuery內(nèi)部函數(shù)Animation中調(diào)用到了createTweens()來(lái)創(chuàng)建緩動(dòng)動(dòng)畫(huà)組,創(chuàng)建完成后的結(jié)果為：▼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.可以看到上面的緩動(dòng)動(dòng)畫(huà)組有四個(gè)原子動(dòng)畫(huà)組成。每一個(gè)原子動(dòng)畫(huà)的信息都包含在里面了。仔細(xì)查看createTweens函數(shù)，實(shí)際上就是遍丿力調(diào)用了tweeners[〃*"]的數(shù)組中的函數(shù)(實(shí)際上就只有一個(gè)元素)。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]函數(shù)，主要代碼如下function(prop,value){varend,unit,〃根據(jù)css特征值獲取緩動(dòng)動(dòng)畫(huà)結(jié)構(gòu)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){//從一個(gè)非零起點(diǎn)開(kāi)始迭代，〃對(duì)于當(dāng)前屬性，如果它使用相同的單位這一過(guò)程將是微不足道//后備為end,或一個(gè)簡(jiǎn)單的常量start=jQuery.css(tween,elem,prop,true)

12、

13、end

14、

15、1;do{〃如果前一次迭代為零，加倍，直到我們得到*東西*〃使用字符串倍壇因子，所以我們不會(huì)偶然看到scale不改變scale二scale

16、

17、〃?5";//調(diào)整和運(yùn)行start=start/scale;jQuery.style(tween,

18、elem,prop,start+unit);//更新scale,默認(rèn)0或NaN從tween,cur()獲取//跳出循環(huán)，如果scale不變或完成時(shí)，或者我們已經(jīng)覺(jué)得已經(jīng)足夠了}while(scale!二二(scale二tween,cur()/target)&&scale!==1&&--maxiterations);}tween,unit二unit;tween,start=start;〃如果提供了+二/-二記號(hào)，表示我們止在做一個(gè)相對(duì)的動(dòng)畫(huà)tween.end=parts[l]?start+(parts[l

19、]+1)*end:end;}returntween;}]}；可以看岀除了hide/show兩種動(dòng)畫(huà)外的其他動(dòng)畫(huà)都經(jīng)過(guò)tweeners[〃*"][0]這個(gè)函數(shù)封裝了動(dòng)畫(huà)組。其中有兒個(gè)關(guān)鍵的數(shù)組start/end/unito特別是對(duì)非像素單位的動(dòng)畫(huà)start值獲取費(fèi)了一番功夫。還有一個(gè)比較關(guān)鍵的地方是都用了this.createTween獲取單個(gè)css特征的基礎(chǔ)的動(dòng)畫(huà)特征。而animation.createTween中直接調(diào)用jQuery.Tw