Jquery1.9.1 source code analysis series (15) beyond animation processing

a. Animation compatible with Tween.propHooks

Tween.propHooks provides methods for setting and obtaining css feature values under special circumstances. The structure is as follows

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

Copy after login

Tween.propHooks.scrollTop and Tween.propHooks.scrollLeft are mainly caused by confusion when IE8 is offline and the css feature value is saved to the node

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

Copy after login

The get method of Tween.propHooks._default will try to obtain the tween.prop feature value of css directly from the node. If it cannot be obtained, use jQuery.css() method to obtain it. During this method processing, simple values such as "10px" will be parsed as floating point numbers; complex values such as "rotation (1rad)" will be returned as they are. And then process the returned results: empty strings, null, undefined and "auto" are converted to 0; other conditions remain unchanged.

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" &#63; 0 : result;
}

Copy after login

The set method of Tween.propHooks._default will first try jQuery.fx.step[ tween.prop ] to set the backward compatibility; otherwise, jQuery.style will be used to set the css feature value; in the most extreme case, the feature value will be set Save directly on the node

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;
  }
}

Copy after login

b. Animation-specific object jQuery.fx

jQuery.fx encapsulates some functions used to perform animation actions. The structure is as follows

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扩展点
}

Copy after login

Detailed source code analysis is as follows

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 );
  }
};

Copy after login

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

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

jQuery.fn.show([ duration ] [, easing ] [, complete ] | options )（顯示所有符合的元素。此外，你也可以指定元素顯示的過渡動畫效果。如果元素本身是可見的，則不對其作任何變更。

jQuery.fn.hide([ duration ] [, easing ] [, complete ] | options)（隱藏所有符合的元素。此外，你也可以指定元素隱藏的過渡動畫效果。如果元素本身是不可見的，則不對其作任何更改。

jQuery.fn.toggle([ duration ] [, easing ] [, complete ] | options)（切換所有符合的元素。此外，你還可以指定元素切換的過渡動畫效果。所謂"切換"，也就是如果元素目前是可見的，則將其隱藏；如果元素目前是隱藏的，則使其顯示(可見)。

這裡介紹的toggle()函數用來切換元素的顯示/隱藏。 jQuery還有一個同名的事件函數toggle()，用於綁定click事件並在觸發時輪流切換執行不同的事件處理函數。

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

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

jQuery.fn.slideUp([ duration ] [, easing ] [, complete ] | options)（隱藏所有匹配的元素，並帶有向上滑動的過渡動畫效果。向上滑動的動畫效果，即元素可見區域的高度從原有高度逐漸減小到0(向上逐漸收起)。

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

jQuery.fn.fadeIn([ duration ] [, easing ] [, complete ] | options)（顯示所有匹配的元素，並帶有淡入的過渡動畫效果。淡入的動畫效果，即元素的不透明度的比例從0%逐漸增加到100%。匹配的元素，並帶有淡出的過渡動畫效果）

jQuery.fn.fadeOut([ duration ] [, easing ] [, complete ] | options)（隱藏所有匹配的元素，並帶有淡出的過渡動畫效果。所謂"淡出"的動畫效果，即元素的不透明度的比例從100%逐漸減小到0%。

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

jQuery.fn.animate(cssProperties [, duration ] [, easing ] [, complete ] | cssProperties, options)（執行一個基於css屬性的自訂動畫。你可以為匹配的元素設定css樣式，animate( )函數將會執行一個從目前樣式到指定的css樣式的一個過渡動畫。的高度從100px逐漸增加到200px的過渡動畫）

jQuery.fn.delay(duration [, queueName ])（延遲佇列中下一項的執行。delay()可以將佇列中等待執行的下一個動畫延遲指定的時間後才執行。它常用在佇列中的兩個jQuery效果函數之間，從而在上一個動畫效果執行後延遲下一個動畫效果的執行時間。對它進行延遲呼叫）

jQuery.fn.stop([ queueName ] [, clearQueue [, jumpToEnd ] ])（停止目前在匹配元素上正在運行的動畫。預設情況下，stop()函數只會停止目前正在運行的動畫。如果你使用animate()函數為目前元素設定了A、B、C這3段動畫，如果目前正在執行的動畫是A，則只會停止動畫A的執行，不會阻止動畫B和C的執行。，你也可以透過指定可選的選項參數來停止所有的動畫。停止動畫並不是恢復到該動畫執行前的狀況，而是直接停止，當前動畫執行到什麼狀態，就停留在什麼狀態。執行一個元素高度從100px到200px的過渡動畫，當高度為150px時停止了該動畫，則當前高度仍然保持150px的現狀。。

jQuery.fn.finish([ queueName ])（立即完成佇列中的所有動畫。finish()會停止目前正在執行的動畫，刪除所有佇列中的動畫，並完成所有符合元素的動畫）

jQuery.fn. fadeTo([speed,]opacity[,callback])（將被選元素的不透明度逐漸地改變為指定的值）

jQuery.fx.off（該屬性用於設定或傳回是否全域性地停用所有動畫。如果不對該屬性設定值，則傳回表示是否全域性停用了動畫效果的布林值。如果將該屬性設為true，將全域性停用所有動畫。 false，將全域性地啟用動畫效果。

你可以在遇到以下情況時，需要停用動畫效果：你在配置比較低的電腦上使用jQuery；某些使用者可能因為動畫效果而遇到了可訪問性問題。）

jQuery.fx.interval（此屬性用於設定或返回動畫的幀速(毫秒值)。jQuery.fx.interval屬性用於設定jQuery動畫每隔多少毫秒繪製一幀圖像(觸發一次樣式更改，瀏覽器可能會重新繪製目前頁面)。將不受影響。

以上內容是腳本之家小編給大家介紹的Jquery1.9.1源碼分析系列（十五）動畫處理之外篇，
jQuery 1.9.1源碼分析系列（十五)之動畫處理

，點選了解詳情。