jQuery 1.9.1源代码分析系列(XV) Tween 动画处理中慢速动画的核心

在jQuery内部函数Animation中，调用createTweens()创建慢速动画组，创建后的结果如下：

可以看到上面的慢速动画组由四个原子动画组成。每个原子动画的信息都包含在其中。

仔细观察createTweens函数，您实际上是在遍历数组中调用tweeners[' *]*(实际上只有一个元素)的函数。

函数createTweens(动画，道具){ jQuery.each(道具，函数(道具，值){ var collection=(tweeners[prop]| |[])。concat(tweeners[' *])，index=0，length=collection.lengthfor(；索引长度；index ) { if(集合[ index ]。call(动画、道具、值)){ //我们完成了这个属性返回；} } });}再次检查此tweeters[' *][0]功能，主要代码如下。

函数(prop，value) {var end，unit，//获得tween=this的慢速动画结构。创建补间(道具，值)，零件=rfxnum。根据css特征值执行(值)。target=tween.cur()，start=target || 0，scale=1，maxIterations=20if(parts){ end=parts[2]；unit=parts[3]| |(jquery . CSS number[prop]？' : ' px ')；//非像素单位属性if(单位！=='px' start) {//从非零起点迭代。//对于当前属性，如果使用相同的单位，这个过程就无关紧要了。//备份是end，或者简单常量start=jquery.css (tween.elem，prop，true)| | end | | 1；Do {//如果上一次迭代为零，则加倍直到得到*某物*//使用字符串乘法因子，这样我们就不会意外地看到scale不变scale=scale | | ' .5//调整并运行开始=开始/缩放；jQuery.style(tween.elem，prop，start unit)；//更新比例，默认为0或NaN。从tween.cur()获取它。//跳出循环，如果scale不变或者完成了，或者我们已经觉得够了} while (scale！==(scale=tween . cur()/target)scale！==1-maxIterations)；} tween.unit=unittween.start=start//如果提供了=/-=标记，表示我们正在制作相对动画tween.end=parts[1]？开始(零件[1] 1 ) *结束：结束；}返回补间；}]};可以看到，除了隐藏/显示之外的所有动画都通过函数tweeters[' * '[0]封装动画组。有几个键数组开始/结束/单位。特别是，要获得非像素单位的动画开始值需要很大的努力。

另一个关键点是，它们都使用这个. createTween来获得单个css特性的基本动画特性。而jQuery。动画中直接调用补间。创建用于处理的补间。接下来，我们将详细解释一下。

a.jQuery.Tween

-

jQuery的结构。补间类似于jQuery的补间。

函数Tween(elem，options，prop，end，easing ) {返回新的Tween.prototype.init(elem，options，prop，end，easing)；}jQuery。Tween=TweenTween . prototype={ constructor : Tween，init: function(elem，options，prop，end，easing，unit){ this . elem=elem；this.prop=propthis . easing=easing | |“swing”；this.options=optionsthis . start=this . now=this . cur()；this.end=endthis . unit=unit | |(jquery . CSS number[prop]？' : ' px ')；}，cur:函数(){ 0.}，run:函数(百分比){ 0.}};tween . prototype . init . prototype=tween . prototype；有熟悉的追赶吗？

Cur函数用于获取当前css特征值。

cur : function(){ var hooks=tween . propooks[this . prop]；回钩钩。明白吗？hooks . get(this): tween . propooks . _ default . get(this)；}，run函数将在每个动画时间点处理正在进行的动画的每个特征值。

主要有两个步骤：

1.计算动画的当前进度位置和动画的当前位置。

//如果有动画时长，使用jQuery.easing计算缓慢的动画进度缓解。否则，进度缓和为百分比//，根据进度得到当前动画位置now if(this.options.duration){ this . pos=缓和=jquery .缓和[this .缓和] (percent，this.options.duration * percent，0，1，this . options . duration)。} else { this.pos=eased=percent} this . now=(this . end-this . start)*缓和了this . start；2.根据当前进度设置css特征值。

//设置css特征值if(hooks hooks . set){ hooks . set(this)；} else { Tween . PrOphooks . _ default . set(this)；}退回这个；可以看出，这一步生成慢速动画是整个动画的核心：

创建一个慢速动画组，每个原子动画包含每个原子css属性动画的各种必要参数和动画功能。

不同的是，hide/show直接在defaultPrefilter中创建这个慢速动画组(默认情况下所有属性都是px单位)，其他动画在调用createTweens时创建慢速动画组。

记得创建动画时，有一个tick函数，每隔一步调用一次。

tick=function(){ 0.长度=animation . tweens . length；for(；索引长度；index ) { animation.tweens[ index ]。运行(百分比)；看，每个原子动画都有自己的运行函数来执行自己的动画，这是在创建慢速动画组时构建的。

好了，整理一下动画的整个核心流程：

1.根据参数，调用jQuery.speed获取动画相关参数，得到一个类似如下的对象；生成的动画执行函数doAnimation使用。排队进入队列并立即执行。

opt={ complete : fn coction()}.}，//动画执行的回调时长为3360 400，//动画执行时间为easing: ' swing '，//动画效果队列： 'fx '，//动画队列old : false/fn action(){ 0.},} 2.做动画调用创建延迟对象，使用延迟对象的promise方法构造动画对象动画(延迟对象的动画特征列表)，最后在动画执行后给动画添加一个回调函数。

3.调用jQuery内部函数proFilter对css特征名进行修正，使其能够被当前浏览器识别，并分解一些复合css特征(如填充成paddingTop/Right/Bottom/Left)。

4.调用jQuery内部函数defaultPrefilter，纠正动画可以正常运行的前提条件：比如高度/宽度动画显示和溢出需要特殊的值。需要注意的是：

对于显示/隐藏动画，之前调用genFx提取需要动画的css特征，动画对象动画.直接在defaultPrefilter函数中调用createTween，将对应的慢速动画对象(包括动画参数和run等动画函数)添加到每个CSS动画属性中，并按下它们进入慢速动画组动画. tweens

5.调用jQuery内部函数createTweens为除显示/隐藏之外的每个css动画功能创建慢速动画对象(包括动画参数和动画函数，如run)，并将其按入慢速动画组动画

6.启动动画计时，在每个时间点执行tick函数，为对应的css特征值设置运动值。

其中，css特征值移动的进度百分比为：

剩余=math.max (0，animation . starttimeanimation . duration-current time)，temp=剩余/animation.duration | | 0，percent=1-temp。获得的百分比符合时间定律。替换此百分比以设置精确的css特征值来刷新动画显示。

8.动画完成后调用动画完成回调。

关于jQuery 1.9.1源代码分析系列(XV)作为动画处理核心的Tween的全部内容都结束了。如果你有任何问题，请给我留言，我会尽快与你联系。