jQuery.animate简单分析

好久之前就对jQuery.animate的实现很是感乐趣，不外前段时刻很忙，直到前几天端午假期才偶然刻去研究。

jQuery.animate的每种动画过渡结果都是通过easing函数实现的。jQuery1.4.2中就预置了两个这样的函数：

easing: {
linear: function( p, n, firstNum, diff ) {
return firstNum + diff * p;
},
swing: function( p, n, firstNum, diff ) {
return ((-Math.cos(p*Math.PI)/2) + 0.5) * diff + firstNum;
}
}

从参数名隐隐可以展望出firstNum是初始值。要是你的数学学得较量好，你可以发明linear函数是直线方程；要是你的物理学得较量好，你可以发明它是匀速行为的位移方程（我数学和物理都没学好，是别人提示我的……）。那么diff和p就是速率和时刻了。

再看看jQuery.animate的原型：

animate: function( prop, speed, easing, callback )

各参数的声名如下：

• prop：一组包括作为动画属性和终值的样式属性和及其值的荟萃。
• speed：动画时长。
• easing：要行使的擦除结果的名称。
• callback：动画完成时执行的函数。

元素的当前样式值（firstNum）可以获取，动画时长（p）就是duration，最终样式值是prop。理论上说，动画速率（diff）是可 以算出来的。可是这又肯定必要另一个函数举办运算。这样做明明是不明智的。再看看挪用easing函数的相干代码（位于 jQuery.fx.prototype.step中）：

var t = now()；
...
var n = t - this.startTime;
this.state = n / this.options.duration;
...
this.pos = jQuery.easing[specialEasing || defaultEasing](this.state, n, 0, 1, this.options.duration);

可以发明，p参数的值也就是this.state的值，从上下文得知它现实上是动画的时刻进度。而firstNum和diff的参数值都是写死的，别离是0和1。这下easing函数的奥秘完全被解开，p、firstNum、diff都是百分率而非现实数值，easing函数的返回值也就是位移的进度。diff的值是1，也就是以1倍的速率行为作画。算出位移进度后，通过“初始值+（最终值-初始值）×进度”就可以算出当前位移值：

this.now = this.start + ((this.end - this.start) * this.pos);

通过setInterval每隔一按时刻（jQuery中是13ms）举办一次位移运算，直到当前时刻与初始时刻的差值大于动画时长，这就是jQuery.animate的执行进程。

凭证通例思绪，动画的实现方法是这样的：通过setInterval每隔一按时刻给某个值增进特定命值，直到这个值到达限定值。这样做的首要题目是，差异赏识器的运行速率差异，从而导致动画速率有差别，一样平常是IE下较量慢，Firefox下较量快。而jQuery.animate是以当前时刻来抉择位移值，某个时候的位移值老是牢靠的，因而动画速率不会有差别。

出处：http://www.ued163.com

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!