jQuery 1.9.1源码分析系列（十五)之动画处理

首先需要有队列（queue）的基本知识。见上一章。

相关教程：jQuery下的动画处理总结： http://www.jb51.net/article/42000.htm

jQuery 1.9.1源码分析系列（十五）动画处理之缓动动画核心Tween  ：http://www.jb51.net/article/75821.htm

a.动画入口jQuery.fn.animate函数执行流程详解

--------------------------------------------------------------------------------

　　先根据参数调用jQuery.speed获取动画相关参数，得到一个类似如下的对象；并且生成动画执行函数doAnimation

optall = {
  complete: fnction(){...},//动画执行完成的回调
  duration: 400,//动画执行时长
  easing: "swing",//动画效果
  queue: "fx",//动画队列
  old: false/fnction(){...},
} 
var empty = jQuery.isEmptyObject( prop ),
  optall = jQuery.speed( speed, easing, callback ),
  doAnimation = function() {
    //在特征的副本上操作，保证每个特征效果不会被丢失
    var anim = Animation( this, jQuery.extend( {}, prop ), optall );
    doAnimation.finish = function() {
      anim.stop( true );
    };
    //空动画或完成需要立马解决
    if ( empty || jQuery._data( this, "finish" ) ) {
      anim.stop( true );
    }
  };
doAnimation.finish = doAnimation; 

　　没有动画正在执行则马上执行动画，否则将动画压入动画队列等待执行

//没有动画在执行则马上执行动画，否则将动画压入动画队列等待执行
return empty || optall.queue === false ?
  this.each( doAnimation ) :
  this.queue( optall.queue, doAnimation ); 

　　可以看出，真正执行动画的地方是Animation( this, jQuery.extend( {}, prop ), optall )函数

b. jQuery内部函数Animation详解

--------------------------------------------------------------------------------

　　Animation ( elem, properties, options ). properties是要进行动画的css特征，options是动画相关选项{complete: function () {…},duration: 400,easing: undefined,old: false,queue: "fx"}。

　　首先,初始化一个延时对象，这个延时对象用来处理动画队列。

deferred = jQuery.Deferred().always( function() {
  // don't match elem in the :animated selector
  delete tick.elem;
}), 

　　然后，生成一个每一个时间点（相邻两个时间点的事件间隔默认为13毫秒）上都会执行的函数tick，这个tick函数会保存在jQuery.timers中，然后每次执行jQuery.fx.tick的时候会取出来执行。

tick = function() {
  if ( stopped ) {
    return false;
  }
  var currentTime = fxNow || createFxNow(),
    remaining = Math.max( 0, animation.startTime + animation.duration - currentTime ),
    // archaic crash bug won't allow us to use 1 - ( 0.5 || 0 ) (#12497)
    temp = remaining / animation.duration || 0,
    percent = 1 - temp,
    index = 0,
    length = animation.tweens.length;
  //执行动画效果
  for ( ; index < length ; index++ ) {
    animation.tweens[ index ].run( percent );
  }
  //生成进度报告
  deferred.notifyWith( elem, [ animation, percent, remaining ]);
  if ( percent < 1 && length ) {
    return remaining;
  } else {
    //动画执行完毕，执行所有延时队列中的函数（包括清除动画相关的数据）
    deferred.resolveWith( elem, [ animation ] );
    return false;
  }
} 

　　我们看到jQuery对动画进度的处理：

remaining = Math.max( 0, animation.startTime + animation.duration - currentTime )temp = remaining / animation.duration || 0,percent = 1 - temp, 

　　进度百分比 = 1 - 剩余时间百分比。

　　平常我们是这么处理:假设时间13毫秒执行一次动画，当前是第n此执行，总的动画时长为T。那么 

　　进度百分比 = (n*13)/T

　　实际上这种算法得到的时间n*13是不准确的，因为cpu不只是你一个程序在执行，时间片分给你的时候往往都比n*13大。而且是一个很不准确的值，导致动画感觉时快时慢，不连贯。而jQuery这种方式保证当前的事件点上动画执行结果的准确性，毕竟事件是最新计算结果。

　　第三，生成动画用的所有特征组成的对象animation（这个对象结构如源码所示），animation.props中保存的是用户传入的特征（动画最终目标）。

animation = deferred.promise({
  elem: elem,
  props: jQuery.extend( {}, properties ),
  opts: jQuery.extend( true, { specialEasing: {} }, options ),
  originalProperties: properties,
  originalOptions: options,
  startTime: fxNow || createFxNow(),
  duration: options.duration,
  tweens: [],
  createTween: function( prop, end ) {
    var tween = jQuery.Tween( elem, animation.opts, prop, end,
      animation.opts.specialEasing[ prop ] || animation.opts.easing );
    animation.tweens.push( tween );
    return tween;
  },
  stop: function( gotoEnd ) {
    var index = 0,
    // if we are going to the end, we want to run all the tweens
    // otherwise we skip this part
    length = gotoEnd ? animation.tweens.length : 0;
    if ( stopped ) {
      return this;
    }
    stopped = true;
    for ( ; index < length ; index++ ) {
      animation.tweens[ index ].run( 1 );
    }
    // resolve when we played the last frame
    // otherwise, reject
    if ( gotoEnd ) {
      deferred.resolveWith( elem, [ animation, gotoEnd ] );
    } else {
      deferred.rejectWith( elem, [ animation, gotoEnd ] );
    }
    return this;
  }
}) 

　　第四，调用propFilter修正css特征名称以便能被浏览器识别，其中需要注意的是borderWidth/padding/margin指的不是一个css特征，而是四个（上下左右）

//经过propFilter，animation.opts.specialEasing添加了相应的特征
propFilter( props, animation.opts.specialEasing ); 

　　举例说明propFilter修正成果。

　　例1，css特征{ height: 200 }的修正后结果为：

props = { height: 200 }
animation.opts.specialEasing = {height: undefined} 

　　例2:，css特征{margin:200}的修正结果为：

props = { marginBottom: 200,marginLeft: 200,marginRight: 200,marginTop: 200 }
animation.opts.specialEasing = { marginBottom: undefined,marginLeft: undefined,marginRight: undefined,marginTop: undefined } 

　　第五，调用defaultPrefilter做适配处理:比如对height/width的动画要求display和overflow为特定的值才能有效果；比如对show/hide动画需要对一大堆css特征值进行动画，并且在函数里就调用createTweens生成缓动动画。

// animationPrefilters[0] = defaultPrefilter
for ( ; index < length ; index++ ) {
  result = animationPrefilters[ index ].call( animation, elem, props, animation.opts );
  if ( result ) {
    return result;
  }
} 

　　其中animationPrefilters[ index ]值得函数就是defaultPrefilter，defaultPrefilter函数处理有几个比较重要的地方

　　defaultPrefilter重点1：内联元素中height/width相关动画需要设置display特征值为inline-block

// height/width overflow pass
if ( elem.nodeType === 1 && ( "height" in props || "width" in props ) ) {
  //确保没有什么偷偷出来
  //记录3个overflow相关特征，因为IE不能改变overflow特征值，
  //当overflowX和overflowY设置了相同的值
  opts.overflow = [ style.overflow, style.overflowX, style.overflowY ];
  // 内联元素中height/width相关动画需要设置display特征值为inline-block
  if ( jQuery.css( elem, "display" ) === "inline" &&
    jQuery.css( elem, "float" ) === "none" ) {
    // 内联元素接受inline-block;
    // 块级元素必须内嵌在布局上
    if ( !jQuery.support.inlineBlockNeedsLayout || css_defaultDisplay( elem.nodeName ) === "inline" ) {
      style.display = "inline-block";
    } else {
      style.zoom = 1;
    }
  }
} 

　　defaultPrefilter重点2：对于height/width动画overflow都要设置为"hidden"，动画完成后恢复。这个有利于提高渲染速度。

//对于height/width动画overflow都要设置为"hidden"，动画完成后恢复
if ( opts.over