jQuery的动画函数学习记录
很久以前,我对jQuery动画的实现很感兴趣,但最近几天一直很忙,直到最后几天的端午假期才开始学习。对每jquery.animate动画过渡效果是通过宽松的功能来实现的。在jquery1.4.2,两功能预置:
宽松:{
线性:功能(P,N,firstnum,diff){
返回firstnum + diff * P;
},
摇摆:功能(P,N,firstnum,diff){
返回(((-math.cos(P *数学。PI) / 2)+ 0.5)* DIFF + firstnum;
}
}
可以推测,firstnum由参数名称初始值。如果你数学很好,你可以看到,线性函数是一个直线方程。如果你擅长物理学,你可以看到它是匀速运动的位移方程,所以微分和P是速度和时间。
再看jquery.animate原型:
动画:功能(道具,速度,放松,回调)
这些参数的描述如下:
道具:一组包含动画属性和最终值的样式属性和值。
速度:动画是长的。
放松:使用擦除效果的名称。
回调函数:动画完成后执行的函数。
当前的样式值(firstnum)的元素是可用的,和动画的长度(P)是时间,和最终的样式值是道具。在理论上,动画的速度(diff)是可以计算出来的。但它必须需要一个函数来执行该操作。这样做是很明显的不明智的。看看相关的代码,调用函数(jQuery宽松。外汇。原型。步):
var T =现在();
…
var n = T this.starttime;
this.state = n / this.options.duration;
…
this.pos = jQuery。宽松{ specialeasing | | defaulteasing }(this.state,N,0, 1,这个选项。持续时间);
发现P参数的值也在this.state的价值,它是从上下文知道,它实际上是动画的时间进度,firstnum和不同的参数都写死亡,分别为0和1,镇痛作用的秘密完全解开。P,firstnum和差异百分比而不是实际值。缓和函数的返回值是位移的进度,其值为1,即以1倍的速度运行动画,计算位移后,可用初始值+(最终值-初始值)*计算当前位移值。
this.now = this.start +((this.end这。开始)*,POS);
位移操作是通过setInterval每次(jQuery是13ms),直到当前时间和初始时间之间的差异大于动画的时间,这是jquery.animate执行过程。
按照传统的思维方式,实现动画是这样的方式:通过setInterval,到一定值后每次添加一个特定的值,直到达到极限值。主要的问题是,不同的浏览器运行速度的不同,产生不同的动画速度。一般来说,IE和Firefox的速度较慢,jquery.animate是当前时间的确定,以及位移总是固定在某一个时间,所以动画的速度不会是不同的。