不同的是hide/show直接在defaultPrefilter中创建了这个缓动动画组（所有的属性都默认是px单位），其他的动画在调用createTweens时创建缓动动画组。
还记不记得在创建动画的时候有个tick函数，这个tick函数会在每隔一个步长的时间调用一次
tick = function() { ... length = animation.tweens.length; for ( ; index < length ; index++ ) { animation.tweens[ index ].run( percent ); } ... }
看到没，每一个原子动画有自己的run函数来执行自己的动画，这在创建缓动动画组的时候就建好了的。
好了，整理一下动画的整个核心流程：
1.先根据参数调用jQuery.speed获取动画相关参数，得到一个类似如下的对象；并且生成动画执行函数doAnimation使用.queue压入队列并马上执行
opt = { complete: fnction(){...},//动画执行完成的回调 duration: 400,//动画执行时长 easing: "swing",//动画效果 queue: "fx",//动画队列 old: false/fnction(){...}, }
2.doAnimation中调用创建一个延时对象，使用延时对象的promise方法构造一个动画对象animation（延时对象+动画特征列表），最后给animation添加动画执行完成后的回调函数。
3.调用jQuery内部函数proFilter修正css特征名以便能被当前浏览器识别，并将某些复合css特征分解（比如padding分解成paddingTop / Right/ Bottom/ Left）.
4.调用jQuery内部函数defaultPrefilter做动画能够正常运行前提条件修正：比如对height/width动画display和overflow需要特定的值。特别需要注意的是
对于show/hide动画，在之前就调用genFx将需要执行动画的css特征提取了出来，在defaultPrefilter函数里直接调用动画对象animation.createTween给每一个CSS动画属性添加对应的缓动动画对象（包括动画参数和动画函数如run）压入缓动动画组animation.tweens中
5.调用jQuery内部函数createTweens将除开show/hide之外的动画每一个css动画特征使用animation.createTween创建缓动动画对象（包括动画参数和动画函数如run），压入缓动动画组animation.tweens中
6.启动动画计时，在每个时间点上执行tick函数来给相应的css特征值设置运动值。
其中css特征值运动的进度百分比是
remaining = Math.max( 0, animation.startTime + animation.duration - currentTime ), temp = remaining / animation.duration || 0, percent = 1 - temp
得到的percent是符合时间规律的。代入这个percent设置准确的css特征值，以刷新动画显示。
8.动画完成后调用动画完成回调。
关于小编给大家分享的jQuery 1.9.1源码分析系列（十五）动画处理之缓动动画核心Tween 全部内容就到此结束了，有问题欢迎给我留言我会在第一时间和大家取得联系的。
您可能感兴趣的文章: