a.動(dòng)畫(huà)兼容Tween.propHooks

　　Tween.propHooks提供特殊情況下設(shè)置、獲取css特征值的方法，結(jié)構(gòu)如下

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

　　Tween.propHooks.scrollTop 和Tween.propHooks.scrollLeft兩個(gè)主要是在ie8離線狀態(tài)下會(huì)出現(xiàn)混亂而把css特征值保存到節(jié)點(diǎn)上

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

　　Tween.propHooks._default的get方法會(huì)嘗試直接從節(jié)點(diǎn)上取得css的tween.prop特征值，如果取不到則使用jQuery.css()方式來(lái)獲取。該方法處理中，簡(jiǎn)單的值如“10px”會(huì)被解析為浮點(diǎn)數(shù)；復(fù)雜的值，如“旋轉(zhuǎn)（1rad）”返回原樣。并對(duì)返回結(jié)果再做處理：空字符串, null, undefined 和 "auto"都轉(zhuǎn)化為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 ];
  }
  //傳遞一個(gè)空字符串作為第三個(gè)參數(shù)的.css會(huì)自動(dòng)嘗試parseFloat，
  //并返回到一個(gè)字符串，如果解析失敗的話。
  //所以，簡(jiǎn)單的值，如“10px”會(huì)被被解析為浮點(diǎn)數(shù)。復(fù)雜的值，如“旋轉(zhuǎn)（1rad）”返回原樣。
  result = jQuery.css( tween.elem, tween.prop, "" );
  // 空字符串, null, undefined 和 "auto"都轉(zhuǎn)化為0
  return !result || result === "auto" ? 0 : result;
} 

　　Tween.propHooks._default的set方法先會(huì)嘗試jQuery.fx.step[ tween.prop ]來(lái)設(shè)置向下兼容；否則會(huì)使用jQuery.style來(lái)設(shè)置css特征值；最極端情況則會(huì)將特征值直接保存在節(jié)點(diǎn)上

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. 動(dòng)畫(huà)專(zhuān)用對(duì)象jQuery.fx

　　jQuery.fx封裝了一些用來(lái)執(zhí)行動(dòng)畫(huà)動(dòng)作的函數(shù)，結(jié)構(gòu)如下

jQuery.fx = {
  tick = function () {...},//每個(gè)時(shí)間點(diǎn)都會(huì)執(zhí)行的函數(shù)外殼，會(huì)取出jQuery.timers中的函數(shù)執(zhí)行
  timer = function ( timer ) {...},//執(zhí)行參數(shù)中的函數(shù)并啟動(dòng)計(jì)時(shí)
  interval = 13, //計(jì)時(shí)步長(zhǎng)
  start = function () {...},//啟動(dòng)計(jì)時(shí)
  stop = function () {...},//停止計(jì)時(shí)
  speeds = {slow: 600,fast: 200,_default: 400},//動(dòng)畫(huà)速度（完整動(dòng)畫(huà)執(zhí)行時(shí)間）
  step = {}//向下兼容<1.8擴(kuò)展點(diǎn)
} 

　　詳細(xì)的源碼分析如下

jQuery.fx = Tween.prototype.init;
//每個(gè)時(shí)間點(diǎn)都會(huì)執(zhí)行的函數(shù)外殼，會(huì)取出jQuery.timers中的函數(shù)執(zhí)行
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;
};
//執(zhí)行參數(shù)中的函數(shù)并啟動(dòng)計(jì)時(shí)
jQuery.fx.timer = function( timer ) {
  if ( timer() && jQuery.timers.push( timer ) ) {
    jQuery.fx.start();
  }
};
//計(jì)時(shí)步長(zhǎng)
jQuery.fx.interval = 13;
//啟動(dòng)計(jì)時(shí)
jQuery.fx.start = function() {
  if ( !timerId ) {
    timerId = setInterval( jQuery.fx.tick, jQuery.fx.interval );
  }
};
//停止計(jì)時(shí)
jQuery.fx.stop = function() {
  clearInterval( timerId );
  timerId = null;
};
//動(dòng)畫(huà)速度（完整動(dòng)畫(huà)執(zhí)行時(shí)間）
jQuery.fx.speeds = {
  slow: 600,
  fast: 200,
  // Default speed
  _default: 400
};
//向下兼容<1.8擴(kuò)展點(diǎn)
jQuery.fx.step = {}; 
　　這里其中執(zhí)行動(dòng)畫(huà)的關(guān)鍵源碼是
//動(dòng)畫(huà)入口函數(shù)function Animation( elem, properties, options ){
　　...
　　jQuery.fx.timer(
　　　　jQuery.extend( tick, {
　　　　　　elem: elem,
　　　　　　anim: animation,
　　　　　　queue: animation.opts.queue
　　　　})
　　);
　　...
}
//執(zhí)行參數(shù)中的函數(shù)并啟動(dòng)計(jì)時(shí)
jQuery.fx.timer = function( timer ) {
  if ( timer() && jQuery.timers.push( timer ) ) {
    jQuery.fx.start();
  }
};
//計(jì)時(shí)步長(zhǎng)
jQuery.fx.interval = 13;
//啟動(dòng)計(jì)時(shí)
jQuery.fx.start = function() {
  if ( !timerId ) {
    timerId = setInterval( jQuery.fx.tick, jQuery.fx.interval );
  }
}; 

　　變量jQuery.timers = [];用來(lái)保存每次tick需要執(zhí)行的函數(shù)列表。一般來(lái)說(shuō)就只有一個(gè)函數(shù)，就是Animation函數(shù)中定義的tick函數(shù)。jQuery.fx.interval可以用來(lái)設(shè)置動(dòng)畫(huà)每?jī)蓭g的時(shí)間間隔，默認(rèn)為13毫秒。

　　動(dòng)畫(huà)的分析就到這里。下面把動(dòng)畫(huà)相關(guān)的api列一下

jQuery.fn.show([ duration ] [, easing ] [, complete ] | options )（顯示所有匹配的元素。此外，你還可以指定元素顯示的過(guò)渡動(dòng)畫(huà)效果。如果元素本身是可見(jiàn)的，則不對(duì)其作任何改變。如果元素是隱藏的，則使其可見(jiàn)。與該函數(shù)相對(duì)的是hide()函數(shù)，用于隱藏所有匹配的元素）

jQuery.fn.hide([ duration ] [, easing ] [, complete ] | options)（隱藏所有匹配的元素。此外，你還可以指定元素隱藏的過(guò)渡動(dòng)畫(huà)效果。如果元素本身是不可見(jiàn)的，則不對(duì)其作任何改變。如果元素是可見(jiàn)的，則將其隱藏。）

jQuery.fn.toggle([ duration ] [, easing ] [, complete ] | options)（切換所有匹配的元素。此外，你還可以指定元素切換的過(guò)渡動(dòng)畫(huà)效果。所謂"切換"，也就是如果元素當(dāng)前是可見(jiàn)的，則將其隱藏；如果元素當(dāng)前是隱藏的，則使其顯示(可見(jiàn))。）

這里介紹的toggle()函數(shù)用于切換元素的顯示/隱藏。jQuery還有一個(gè)同名的事件函數(shù)toggle()，用于綁定click事件并在觸發(fā)時(shí)輪流切換執(zhí)行不同的事件處理函數(shù)。

jQuery.fn.slideDown([ duration ] [, easing ] [, complete ] | options)（顯示所有匹配的元素，并帶有向下滑動(dòng)的過(guò)渡動(dòng)畫(huà)效果。向下滑動(dòng)的動(dòng)畫(huà)效果，即元素可見(jiàn)區(qū)域的高度從0逐漸增大到其原有高度(向下逐漸展開(kāi))。如果元素本身是可見(jiàn)的，則不對(duì)其作任何改變。如果元素是隱藏的，則使其可見(jiàn)。

與該函數(shù)相對(duì)的是slideUp()函數(shù)，用于隱藏所有匹配的元素，并帶有向上滑動(dòng)的過(guò)渡動(dòng)畫(huà)效果）

jQuery.fn.slideUp([ duration ] [, easing ] [, complete ] | options)（隱藏所有匹配的元素，并帶有向上滑動(dòng)的過(guò)渡動(dòng)畫(huà)效果。向上滑動(dòng)的動(dòng)畫(huà)效果，即元素可見(jiàn)區(qū)域的高度從原有高度逐漸減小到0(向上逐漸收起)。如果元素本身是隱藏的，則不對(duì)其作任何改變。如果元素是可見(jiàn)的，則將其隱藏）

jQuery.fn.slideToggle([ duration ] [, easing ] [, complete ] | options)（切換所有匹配的元素，并帶有滑動(dòng)的過(guò)渡動(dòng)畫(huà)效果。所謂"切換"，也就是如果元素當(dāng)前是可見(jiàn)的，則將其隱藏(向上滑動(dòng))；如果元素當(dāng)前是隱藏的，則使其顯示(向下滑動(dòng))）

jQuery.fn.fadeIn([ duration ] [, easing ] [, complete ] | options)（顯示所有匹配的元素，并帶有淡入的過(guò)渡動(dòng)畫(huà)效果。淡入的動(dòng)畫(huà)效果，即元素的不透明度的比例從0%逐漸增加到100%。如果元素本身是可見(jiàn)的，則不對(duì)其作任何改變。如果元素是隱藏的，則使其可見(jiàn)。與該函數(shù)相對(duì)的是fadeOut()函數(shù)，用于隱藏所有匹配的元素，并帶有淡出的過(guò)渡動(dòng)畫(huà)效果）

jQuery.fn.fadeOut([ duration ] [, easing ] [, complete ] | options)（隱藏所有匹配的元素，并帶有淡出的過(guò)渡動(dòng)畫(huà)效果。所謂"淡出"的動(dòng)畫(huà)效果，即元素的不透明度的比例從100%逐漸減小到0%。如果元素本身是隱藏的，則不對(duì)其作任何改變。如果元素是可見(jiàn)的，則將其隱藏）

jQuery.fn.fadeToggle([ duration ] [, easing ] [, complete ] | options)（切換所有匹配的元素，并帶有淡入/淡出的過(guò)渡動(dòng)畫(huà)效果。所謂"切換"，即如果元素當(dāng)前是可見(jiàn)的，則將其隱藏(淡出)；如果元素當(dāng)前是隱藏的，則使其顯示(淡入)）

jQuery.fn.animate(cssProperties [, duration ] [, easing ] [, complete ] | cssProperties, options)（執(zhí)行一個(gè)基于css屬性的自定義動(dòng)畫(huà)。你可以為匹配的元素設(shè)置css樣式，animate()函數(shù)將會(huì)執(zhí)行一個(gè)從當(dāng)前樣式到指定的css樣式的一個(gè)過(guò)渡動(dòng)畫(huà)。例如：某個(gè)div元素的當(dāng)前高度為100px，將其CSS height屬性設(shè)為200px，animate()將會(huì)執(zhí)行一個(gè)將div元素的高度從100px逐漸增加到200px的過(guò)渡動(dòng)畫(huà)）

jQuery.fn.delay(duration [, queueName ])（延遲隊(duì)列中下一項(xiàng)的執(zhí)行。delay()可以將隊(duì)列中等待執(zhí)行的下一個(gè)動(dòng)畫(huà)延遲指定的時(shí)間后才執(zhí)行。它常用在隊(duì)列中的兩個(gè)jQuery效果函數(shù)之間，從而在上一個(gè)動(dòng)畫(huà)效果執(zhí)行后延遲下一個(gè)動(dòng)畫(huà)效果的執(zhí)行時(shí)間。如果下一項(xiàng)不是效果動(dòng)畫(huà)，則它不會(huì)被加入效果隊(duì)列中，因此該函數(shù)不會(huì)對(duì)它進(jìn)行延遲調(diào)用）

jQuery.fn.stop([ queueName ] [, clearQueue [, jumpToEnd ] ])（停止當(dāng)前匹配元素上正在運(yùn)行的動(dòng)畫(huà)。默認(rèn)情況下，stop()函數(shù)只會(huì)停止當(dāng)前正在運(yùn)行的動(dòng)畫(huà)。如果你使用animate()函數(shù)為當(dāng)前元素設(shè)置了A、B、C這3段動(dòng)畫(huà)，如果當(dāng)前正在執(zhí)行的動(dòng)畫(huà)是A，則只會(huì)停止動(dòng)畫(huà)A的執(zhí)行，不會(huì)阻止動(dòng)畫(huà)B和C的執(zhí)行。當(dāng)然，你也可以通過(guò)指定可選的選項(xiàng)參數(shù)來(lái)停止所有的動(dòng)畫(huà)。停止動(dòng)畫(huà)并不是恢復(fù)到該動(dòng)畫(huà)執(zhí)行前的狀況，而是直接停止，當(dāng)前動(dòng)畫(huà)執(zhí)行到什么狀態(tài)，就停留在什么狀態(tài)。例如：執(zhí)行一個(gè)元素高度從100px到200px的過(guò)渡動(dòng)畫(huà)，當(dāng)高度為150px時(shí)停止了該動(dòng)畫(huà)，則當(dāng)前高度仍然保持150px的現(xiàn)狀。如果該動(dòng)畫(huà)設(shè)置了執(zhí)行完畢后的回調(diào)函數(shù)，則不會(huì)執(zhí)行該回調(diào)函數(shù)。）

jQuery.fn.finish([ queueName ])（立即完成隊(duì)列中的所有動(dòng)畫(huà)。finish()會(huì)停止當(dāng)前正在運(yùn)行的動(dòng)畫(huà)，刪除所有隊(duì)列中的動(dòng)畫(huà)，并完成匹配元素的所有動(dòng)畫(huà)）

jQuery.fn. fadeTo([speed,]opacity[,callback])（將被選元素的不透明度逐漸地改變?yōu)橹付ǖ闹担?br />

jQuery.fx.off（該屬性用于設(shè)置或返回是否全局性地禁用所有動(dòng)畫(huà)。如果不對(duì)該屬性設(shè)置值，則返回表示是否全局性地禁用了動(dòng)畫(huà)效果的布爾值。如果將該屬性設(shè)為true，將全局性地禁用所有動(dòng)畫(huà)。所有正在執(zhí)行的動(dòng)畫(huà)隊(duì)列不會(huì)受到影響。尚未執(zhí)行的任何動(dòng)畫(huà)隊(duì)列都會(huì)在執(zhí)行時(shí)立即完成，而不再帶有動(dòng)畫(huà)效果。如果將該屬性設(shè)為false，將全局性地啟用動(dòng)畫(huà)效果。

你可以在遇到以下情況時(shí)，需要禁用動(dòng)畫(huà)效果：你在配置比較低的電腦上使用jQuery；某些用戶可能由于動(dòng)畫(huà)效果而遇到了可訪問(wèn)性問(wèn)題。）

jQuery.fx.interval（該屬性用于設(shè)置或返回動(dòng)畫(huà)的幀速(毫秒值)。jQuery.fx.interval屬性用于設(shè)置jQuery動(dòng)畫(huà)每隔多少毫秒繪制一幀圖像(觸發(fā)一次樣式更改，瀏覽器可能會(huì)重新繪制當(dāng)前頁(yè)面)。該值越小，則動(dòng)畫(huà)的觸發(fā)次數(shù)越多，動(dòng)畫(huà)效果也更明顯、更平滑，當(dāng)然也就越耗費(fèi)性能。更改該屬性值時(shí)，正在執(zhí)行的動(dòng)畫(huà)隊(duì)列將不受影響。尚未執(zhí)行的任何動(dòng)畫(huà)隊(duì)列都將按照更改后的幀速來(lái)繪制動(dòng)畫(huà)效果）

以上內(nèi)容是腳本之家小編給大家介紹的Jquery1.9.1源碼分析系列（十五）動(dòng)畫(huà)處理之外篇 ，jQuery 1.9.1源碼分析系列（十五)之動(dòng)畫(huà)處理，點(diǎn)擊了解詳情。

最新評(píng)論