Jquery1.9.1源碼分析系列（十五）動畫處理之外篇_jquery

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

The variable jQuery.timers = []; is used to save the list of functions that need to be executed for each tick. Generally speaking, there is only one function, which is the tick function defined in the Animation function. jQuery.fx.interval can be used to set the time interval between every two frames of the animation. The default is 13 milliseconds.

That’s it for the animation analysis. Below is a list of animation-related APIs

jQuery.fn.show([ duration ] [, easing ] [, complete ] | options ) (Displays all matching elements. In addition, you can also specify the transition animation effect of the element display. If the element itself is visible, If the element is hidden, make it visible. The opposite of this function is the hide() function, which is used to hide all matching elements)

jQuery.fn.hide([ duration ] [, easing ] [, complete ] | options) (Hide all matching elements. In addition, you can also specify the transition animation effect for element hiding. If the element itself is invisible , no changes are made to the element if it is visible )
.

jQuery.fn.toggle([ duration ] [, easing ] [, complete ] | options) (toggle all matching elements. In addition, you can also specify the transition animation effect of element switching. The so-called "toggle", that is, If the element is currently visible, hide it; if the element is currently hidden, make it visible (visible) )
.

The toggle() function introduced here is used to switch the display/hide of elements. jQuery also has an event function of the same name, toggle(), which is used to bind the click event and switch to execute different event processing functions in turn when triggered.

jQuery.fn.slideDown([ duration ] [, easing ] [, complete ] | options) (displays all matching elements with a sliding downward transition animation effect. The sliding downward animation effect, that is, the element The height of the visible area is gradually increased from 0 to its original height (gradually expanding downwards). If the element itself is visible, no changes are made to it. If the element is hidden, it is made visible.

The opposite of this function is the slideUp() function, which is used to hide all matching elements with an upward sliding transition animation effect)

jQuery.fn.slideUp([ duration ] [, easing ] [, complete ] | options) (hide all matching elements with an upward sliding transition animation effect. The upward sliding animation effect is the visible area of ​​the element The height gradually decreases from the original height to 0 (gradually shrinking upward). If the element itself is hidden, no changes will be made to it. If the element is visible, it will be hidden)

.

jQuery.fn.slideToggle([ duration ] [, easing ] [, complete ] | options) (switches all matching elements with a sliding transition animation effect. The so-called "switch" means that if the element is currently If the element is visible, hide it (slide up); if the element is currently hidden, make it visible (slide down))

jQuery.fn.fadeIn([ duration ] [, easing ] [, complete ] | options) (displays all matching elements with a fade-in transition animation effect. The fade-in animation effect is the opacity of the element The scale gradually increases from 0% to 100%. If the element itself is visible, no changes are made to it. If the element is hidden, it is made visible. The opposite of this function is the fadeOut() function, which is used to hide everything. Matching elements with fade-out transition animation effect)

jQuery.fn.fadeOut([ duration ] [, easing ] [, complete ] | options) (hide all matching elements with a fade-out transition animation effect. The so-called "fade out" animation effect is the element's The opacity scale is gradually reduced from 100% to 0%. If the element itself is hidden, no changes are made to it. If the element is visible, it is hidden)

jQuery.fn.fadeToggle([ duration ] [, easing ] [, complete ] | options) (toggle all matching elements with fade-in/fade-out transition animation effect. The so-called "switch" means that if the element is currently is visible, hide it (fade out); if the element is currently hidden, make it appear (fade in))

jQuery.fn.animate(cssProperties [, duration ] [, easing ] [, complete ] | cssProperties, options) (performs a custom animation based on css properties. You can set css styles for matching elements, animate( ) function will execute a transition animation from the current style to the specified css style. For example: if the current height of a div element is 100px, set its CSS height property to 200px, animate() will execute a div element. Transition animation where the height gradually increases from 100px to 200px)

jQuery.fn.delay(duration [, queueName]) (Delay the execution of the next item in the queue. delay() can delay the next animation waiting to be executed in the queue for a specified time before executing it. It is commonly used in queues between two jQuery effect functions, thereby delaying the execution time of the next animation effect after the previous animation effect is executed. If the next item is not an effect animation, it will not be added to the effect queue, so this function will not. Make a delayed call to it)

jQuery.fn.stop([ queueName ] [, clearQueue [, jumpToEnd ] ]) (Stop the currently running animation on the matching element. By default, the stop() function will only stop the currently running animation. If You use the animate() function to set three animations A, B, and C for the current element. If the currently executing animation is A, it will only stop the execution of animation A and will not prevent the execution of animations B and C. Of course. , you can also stop all animations by specifying optional option parameters. Stopping the animation does not restore the state before the animation is executed, but stops it directly. The current animation execution state will stay in that state. For example: Execute a transition animation from 100px to 200px for an element's height. If the animation is stopped when the height is 150px, the current height will still remain at 150px. If the animation sets a callback function after execution, the callback function will not be executed. . )

jQuery.fn.finish([ queueName ]) (immediately completes all animations in the queue. finish() stops the currently running animation, deletes all animations in the queue, and completes all animations of matching elements)

jQuery.fn. fadeTo([speed,]opacity[,callback]) (gradually changes the opacity of the selected element to the specified value)

jQuery.fx.off (This property is used to set or return whether all animations are globally disabled. If this property is not set, a Boolean value indicating whether animation effects are globally disabled is returned. If this property is Set to true to disable all animations globally. Any animation queues that are not yet executed will be completed immediately without animation effects. false, will enable the animation effect globally
.

You can disable animation effects when you encounter the following situations: you are using jQuery on a computer with low configuration; some users may encounter accessibility issues due to animation effects. )

jQuery.fx.interval (This property is used to set or return the frame rate of the animation (millisecond value). The jQuery.fx.interval property is used to set how many milliseconds the jQuery animation draws a frame of image (triggering a style change, The browser may redraw the current page). The smaller the value, the more times the animation is triggered and the animation effect is more obvious and smoother. Of course, the animation queue being executed when changing the value of this property will consume more performance. will not be affected. Any animation queue that has not yet been executed will draw animation effects at the changed frame rate)

The above content is excluding animation processing of Jquery 1.9.1 source code analysis series (fifteenth) introduced by the editor of Script House. Animation processing of jQuery 1.9.1 source code analysis series (fifteen), click to learn more.