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

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

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

jQuery 1.9.1源码分析系列（十五）动画处理之缓动动画核心Tween ：http://www.gimoo.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() {
// dont 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 wont 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