Jquery1.9.1源碼分析系列動畫處理之外篇

這篇文章主要介紹了Jquery1.9.1源碼分析系列（十五）動畫處理之外篇的相關資料,需要的朋友可以參考下

a.動畫相容Tween.propHooks

　　Tween.propHooks提供特殊情況下設定、取得css特徵值的方法，結構如下

#

Tween.propHooks = {
  _default: {
    get: function(){...},
    set: function(){...}
  },
  scrollTop: {
    set: function(){...}
  }
  scrollLeft: {
    set: function(){...}
  }
}

　　Tween.propHooks.scrollTop 和Tween.propHooks.scrollLeft兩個主要是在ie8離線狀態下會出現混亂而把css特徵值保存到節點上

##

set: function( tween ) {
  if ( tween.elem.nodeType && tween.elem.parentNode ) {
    tween.elem[ tween.prop ] = tween.now;
  }
}

　　Tween.propHooks._default的get方法會嘗試直接從節點上取得css的tween.prop特徵值，如果取不到則使用jQuery.css()方式來取得。在此方法處理中，簡單的值如「10px」會被解析為浮點數；複雜的值，如「旋轉（1rad）」返回原樣。並對回傳結果再做處理：空字串, null, undefined 和 "auto"都轉換為0；其他情況不變。

get: function( tween ) {
  var result;
  if ( tween.elem[ tween.prop ] != null &&
    (!tween.elem.style || tween.elem.style[ tween.prop ] == null) ) {
    return tween.elem[ tween.prop ];
  }
  //传递一个空字符串作为第三个参数的.css会自动尝试parseFloat，
  //并返回到一个字符串，如果解析失败的话。
  //所以，简单的值，如“10px”会被被解析为浮点数。复杂的值，如“旋转（1rad）”返回原样。
  result = jQuery.css( tween.elem, tween.prop, "" );
  // 空字符串, null, undefined 和 "auto"都转化为0
  return !result || result === "auto" ? 0 : result;
}

　　Tween.propHooks._default的set方法先會嘗試jQuery.fx.step[ tween.prop ]來設定向下相容；否則會使用jQuery.style來設定css特徵值；最極端情況則會將特徵值直接儲存在節點上

set: function( tween ) {
  //使用step hook向下兼容 - 使用cssHook如果他存在 - 使用.style如果可用的话
  //使用直接的特征值如果可用可用的话
  if ( jQuery.fx.step[ tween.prop ] ) {
    jQuery.fx.step[ tween.prop ]( tween );
  } else if ( tween.elem.style && ( tween.elem.style[ jQuery.cssProps[ tween.prop ] ] != null || jQuery.cssHooks[ tween.prop ] ) ) {
    jQuery.style( tween.elem, tween.prop, tween.now + tween.unit );
  } else {
    tween.elem[ tween.prop ] = tween.now;
  }
}

b.動畫專用物件jQuery.fx

　　jQuery.fx封裝了一些用來執行動畫動作的函數，結構如下

jQuery.fx = {
  tick = function () {...},//每个时间点都会执行的函数外壳，会取出jQuery.timers中的函数执行
  timer = function ( timer ) {...},//执行参数中的函数并启动计时
  interval = 13, //计时步长
  start = function () {...},//启动计时
  stop = function () {...},//停止计时
  speeds = {slow: 600,fast: 200,_default: 400},//动画速度（完整动画执行时间）
  step = {}//向下兼容<1.8扩展点
}

　　詳細的原始碼分析如下

jQuery.fx = Tween.prototype.init;
//每个时间点都会执行的函数外壳，会取出jQuery.timers中的函数执行
jQuery.fx.tick = function() {
  var timer,
  timers = jQuery.timers,
  i = 0;
  fxNow = jQuery.now();
  for ( ; i < timers.length; i++ ) {
    timer = timers[ i ];
    // Checks the timer has not already been removed
    if ( !timer() && timers[ i ] === timer ) {
      timers.splice( i--, 1 );
    }
  }
  if ( !timers.length ) {
    jQuery.fx.stop();
  }
  fxNow = undefined;
};
//执行参数中的函数并启动计时
jQuery.fx.timer = function( timer ) {
  if ( timer() && jQuery.timers.push( timer ) ) {
    jQuery.fx.start();
  }
};
//计时步长
jQuery.fx.interval = 13;
//启动计时
jQuery.fx.start = function() {
  if ( !timerId ) {
    timerId = setInterval( jQuery.fx.tick, jQuery.fx.interval );
  }
};
//停止计时
jQuery.fx.stop = function() {
  clearInterval( timerId );
  timerId = null;
};
//动画速度（完整动画执行时间）
jQuery.fx.speeds = {
  slow: 600,
  fast: 200,
  // Default speed
  _default: 400
};
//向下兼容<1.8扩展点
jQuery.fx.step = {}; 
　　这里其中执行动画的关键源码是
//动画入口函数function Animation( elem, properties, options ){
　　...
　　jQuery.fx.timer(
　　　　jQuery.extend( tick, {
　　　　　　elem: elem,
　　　　　　anim: animation,
　　　　　　queue: animation.opts.queue
　　　　})
　　);
　　...
}
//执行参数中的函数并启动计时
jQuery.fx.timer = function( timer ) {
  if ( timer() && jQuery.timers.push( timer ) ) {
    jQuery.fx.start();
  }
};
//计时步长
jQuery.fx.interval = 13;
//启动计时
jQuery.fx.start = function() {
  if ( !timerId ) {
    timerId = setInterval( jQuery.fx.tick, jQuery.fx.interval );
  }
};

　　變數jQuery.timers = [];用來儲存每次tick需要執行的函數清單。一般來說就只有一個函數，就是Animation函數中定義的tick函數。 jQuery.fx.interval可以用來設定動畫每兩個畫面之間的時間間隔，預設為13毫秒。

　　動畫的分析就到這裡。下面把動畫相關的api列一下

jQuery.fn.show([ duration ] [, easing ] [, complete ] | options )（顯示所有符合的元素。此外，你還可以指定元素顯示的過渡動畫效果。 )

jQuery.fn.hide([ duration ] [, easing ] [, complete ] | options)（隱藏所有符合的元素。此外，你也可以指定元素隱藏的過渡動畫效果。如果元素本身是不可見的，則不對其作任何改變。 , complete ] | options)（切換所有匹配的元素。此外，你還可以指定元素切換的過渡動畫效果。所謂"切換"，也就是如果元素當前是可見的，則將其隱藏；如果元素當前是隱藏的，則使其顯示(可見)。 jQuery還有一個同名的事件函數toggle()，用於綁定click事件並在觸發時輪流切換執行不同的
事件處理

函數。

jQuery.fn.slideDown([ duration ] [, easing ] [, complete ] | options)（顯示所有匹配的元素，並帶有向下滑動的過渡動畫效果。向下滑動的動畫效果，即元素可見區域的高度從0逐漸增大到其原有高度(向下逐漸展開)。

##與該函數相對的是slideUp()函數，用於隱藏所有匹配的元素，並帶有向上滑動的過渡動畫效果）

jQuery.fn. slideUp([ duration ] [, easing ] [, complete ] | options)（隱藏所有匹配的元素，並帶有向上滑動的過渡動畫效果。向上滑動的動畫效果，即元素可見區域的高度從原有高度逐漸減小到0(向上逐漸收起)。 ([ duration ] [, easing ] [, complete ] | options)（切換所有匹配的元素，並帶有滑動的過渡動畫效果。所謂"切換"，也就是如果元素當前是可見的，則將其隱藏(向上滑動)；如果元素目前是隱藏的，則使其顯示(向下滑動)）

jQuery.fn.fadeIn([ duration ] [, easing ] [, complete ] | options) （顯示所有匹配的元素，並帶有淡入的過渡動畫效果。淡入的動畫效果，即元素的不透明度的比例從0%逐漸增加到100%。如果元素本身是可見的，則不對其作任何改變。

jQuery.fn.fadeOut([ duration ] [, easing ] [, complete ] | options)（隱藏所有匹配的元素，並帶有淡出的過渡動畫效果。所謂"淡出"的動畫效果，即元素的不透明度的比例從100%逐漸減小到0%。 fn.fadeToggle([ duration ] [, easing ] [, complete ] | options)（切換所有匹配的元素，並帶有淡入/淡出的過渡動畫效果。所謂"切換"，即如果元素當前是可見的，則將其隱藏(淡出)；如果元素目前是隱藏的，則使其顯示(淡入)）

#jQuery.fn.animate(cssProperties [, duration ] [, easing ] [, complete ] | cssProperties, options)（執行一個基於css
屬性

的自訂動畫。你可以為符合的元素設定css樣式，animate()函數將會執行一個從目前樣式到指定的css樣式的一個過渡動畫。

##jQuery.fn.delay(duration [, queueName ])（延遲佇列中下一項的執行。delay()可以將佇列中等待執行的下一個動畫延遲指定的時間後才執行。它常用在佇列中的兩個jQuery效果函數之間，從而在上一個動畫效果執行後延遲下一個動畫效果的執行時間。不會對它進行延遲呼叫）
jQuery.fn.stop([ queueName ] [, clearQueue [, jumpToEnd ] ])（停止目前符合元素上正在運行的動畫。預設情況下， stop()函數只會停止目前正在執行的動畫。的執行，不會阻止動畫B和C的執行。停止動畫並不是恢復到該動畫執行前的狀況，而是直接停止，目前動畫執行到什麼狀態，就停留在什麼狀態。例如：執行一個元素高度從100px到200px的過渡動畫，當高度為150px時停止了該動畫，則當前高度仍然保持150px的現狀。如果該動畫設定了執行完畢後的

回呼函數

，則不會執行該回呼函數。 )

jQuery.fn.finish([ queueName ])（立即完成佇列中的所有動畫。finish()會停止目前正在運行的動畫，刪除所有佇列中的動畫，並完成匹配元素的所有動畫）
jQuery.fn. fadeTo([speed,]opacity[,callback])（將被選元素的不透明度逐漸地改變為指定的值）

jQuery.fx.off（該屬性用於設定或傳回是否全域性地停用所有動畫。如果不對該屬性設定值，則傳回表示是否全域性地停用了動畫效果的布林值。如果將此屬性設為true，將全域性停用所有動畫。設為false，將全域啟用動畫效果。由於動畫效果而遇到了可訪問性問題。於設定jQuery動畫每隔多少毫秒繪製一幀圖像(觸發一次樣式更改，瀏覽器可能會重新繪製當前頁面)。當然也就越耗費效能。 #以上內容是腳本之家小編給大家介紹的Jquery1.9.1源碼分析系列（十五）動畫處理之外篇，jQuery 1.9.1源碼分析系列（十五)之動畫處理，點擊了解詳情。

以上是Jquery1.9.1源碼分析系列動畫處理之外篇的詳細內容。更多資訊請關注PHP中文網其他相關文章！