在jQuery內部函數Animation中調用到了createTweens（）來創建緩動動畫組，創建完成后的結果為：
可以看到上面的緩動動畫組有四個原子動畫組成。每一個原子動畫的信息都包含在里面了。
仔細查看createTweens函數，實際上就是遍歷調用了tweeners ["*"]的數組中的函數（實際上就只有一個元素）。
function createTweens( animation, props ) { jQuery.each( props, function( prop, value ) { var collection = ( tweeners[ prop ] || [] ).concat( tweeners[ "*" ] ), index = 0, length = collection.length; for ( ; index < length; index++ ) { if ( collection[ index ].call( animation, prop, value ) ) { // we're done with this property return; } } }); } 再次查看這個tweeners ["*"][0]函數，主要代碼如下
function( prop, value ) { var end, unit, //根據css特征值獲取緩動動畫結構 tween = this.createTween( prop, value ), parts = rfxnum.exec( value ), target = tween.cur(), start = +target || 0, scale = 1, maxIterations = 20; if ( parts ) { end = +parts[2]; unit = parts[3] || ( jQuery.cssNumber[ prop ] ? "" : "px" ); //非像素單位的屬性 if ( unit !== "px" && start ) { // 從一個非零起點開始迭代， //對于當前屬性，如果它使用相同的單位這一過程將是微不足道 // 后備為end，或一個簡單的常量 start = jQuery.css( tween.elem, prop, true ) || end || 1; do { //如果前一次迭代為零，加倍，直到我們得到*東西* //使用字符串倍增因子，所以我們不會偶然看到scale不改變 scale = scale || ".5"; // 調整和運行 start = start / scale; jQuery.style( tween.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[1] ? start + ( parts[1] + 1 ) * end : end; } return tween; }]}; 可以看出除了hide/show兩種動畫外的其他動畫都經過tweeners ["*"][0]這個函數封裝了動畫組。其中有幾個關鍵的數組start/end/unit。特別是對非像素單位的動畫start值獲取費了一番功夫。
還有一個比較關鍵的地方是都用了this.createTween獲取單個css特征的基礎的動畫特征。而animation. createTween中直接調用jQuery.Tween來處理。接下來我們詳解之。
a.jQuery.Tween
--------------------------------------------------------------------------------
jQuery.Tween的結構和jQuery類似
function Tween( elem, options, prop, end, easing ) { return new Tween.prototype.init( elem, options, prop, end, easing );}jQuery.Tween = Tween;Tween.prototype = { constructor: Tween, init: function( elem, options, prop, end, easing, unit ) { this.elem = elem; this.prop = prop; this.easing = easing || "swing"; this.options = options; this.start = this.now = this.cur(); this.end = end; this.unit = unit || ( jQuery.cssNumber[ prop ] ? "" : "px" ); }, cur: function() {...}, run: function( percent ) {...}};Tween.prototype.init.prototype = Tween.prototype; 是不是有一種很熟悉的趕腳。
里面cur函數用來獲取當前的css特征值
cur: function() { var hooks = Tween.propHooks[ this.prop ]; return hooks && hooks.get ? hooks.get( this ) : Tween.propHooks._default.get( this );}, 而run函數則會在每個動畫時間點上對正在進行的動畫的每個特征值進行處理。
主要是兩個步驟：
1.計算動畫當前進度pos和動畫當前位置now
//如果有動畫時長則使用jQuery.easing計算出緩動動畫進度eased，否則進度eased為percent//并根據進度得到當前動畫位置nowif ( this.options.duration ) { this.pos = eased = jQuery.easing[ this.easing ]( percent, this.options.duration * percent, 0, 1, this.options.duration );} else { this.pos = eased = percent;}this.now = ( this.end - this.start ) * eased + this.start; 2.根據當前進度情況設置css特征值
//設置css特征值if ( hooks && hooks.set ) { hooks.set( this );} else { Tween.propHooks._default.set( this );}return this; 可見生成緩動動畫這一步處理才是整個動畫的核心：
創建緩動動畫組，每一個原子動畫都包含了每一個原子css屬性動畫的各種必要參數以及動畫函數
不同的是hide/show直接在defaultPrefilter中創建了這個緩動動畫組（所有的屬性都默認是px單位），其他的動畫在調用createTweens時創建緩動動畫組。
還記不記得在創建動畫的時候有個tick函數，這個tick函數會在每隔一個步長的時間調用一次
tick = function() { ... length = animation.tweens.length; for ( ; index < length ; index++ ) { animation.tweens[ index ].run( percent ); } ... } 看到沒，每一個原子動畫有自己的run函數來執行自己的動畫，這在創建緩動動畫組的時候就建好了的。
好了，整理一下動畫的整個核心流程：
1.先根據參數調用jQuery.speed獲取動畫相關參數，得到一個類似如下的對象；并且生成動畫執行函數doAnimation使用.queue壓入隊列并馬上執行
opt = { complete: fnction(){...},//動畫執行完成的回調 duration: 400,//動畫執行時長 easing: "swing",//動畫效果 queue: "fx",//動畫隊列 old: false/fnction(){...},} 2.doAnimation中調用創建一個延時對象，使用延時對象的promise方法構造一個動畫對象animation（延時對象+動畫特征列表），最后給animation添加動畫執行完成后的回調函數。
3.調用jQuery內部函數proFilter修正css特征名以便能被當前瀏覽器識別，并將某些復合css特征分解（比如padding分解成paddingTop / Right/ Bottom/ Left）.
4.調用jQuery內部函數defaultPrefilter做動畫能夠正常運行前提條件修正：比如對height/width動畫display和overflow需要特定的值。特別需要注意的是
對于show/hide動畫，在之前就調用genFx將需要執行動畫的css特征提取了出來，在defaultPrefilter函數里直接調用動畫對象animation.createTween給每一個CSS動畫屬性添加對應的緩動動畫對象（包括動畫參數和動畫函數如run）壓入緩動動畫組animation.tweens中
5.調用jQuery內部函數createTweens將除開show/hide之外的動畫每一個css動畫特征使用animation.createTween創建緩動動畫對象（包括動畫參數和動畫函數如run），壓入緩動動畫組animation.tweens中
6.啟動動畫計時，在每個時間點上執行tick函數來給相應的css特征值設置運動值。
其中css特征值運動的進度百分比是
remaining = Math.max( 0, animation.startTime + animation.duration - currentTime ),temp = remaining / animation.duration || 0,percent = 1 - temp
得到的percent是符合時間規律的。代入這個percent設置準確的css特征值，以刷新動畫顯示。
8.動畫完成后調用動畫完成回調。
關于小編給大家分享的jQuery 1.9.1源碼分析系列（十五）動畫處理之緩動動畫核心Tween 全部內容就到此結束了，有問題歡迎給我留言我會在第一時間和大家取得聯系的。
新聞熱點
疑難解答
