jQuery.animate简单分析
作者:heero 来源:heero博客 发布时间:2010-06-26 12:45:00
很久之前就对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:一组包含作为动画属性和终值的样式属性和及其值的集合。
duration:动画时长。
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是以当前时间来决定位移值,某个时刻的位移值总是固定的,因而动画速度不会有差异。
猜你喜欢
- 一、怎么样取得最新版本的MySQL?要安装MySQL,首先要当然要取得它的最新版本,虽然大家都知道在FreeBSD的Packages中可以找
- 以XML格式查看查询结果通过使用传统—xml 选项调用MySQL命令行客户程序,你可以以XML格式(而不是传统的列表形式
- asp如何获知页面上的图象的实际尺寸大小?见下面的两个asp文件:<!--#include virtual="/i
- 如何用组件实现自动发送电子邮件?我想做一个能够自动发送电子邮件的程序,该如何做? 这就要用到w3 upl
- 分页查询是经常能够遇到的问题,我们首先看看分页查询存在的理由:方便用户:用户不可能一次察看所有数据,所以一页一页的翻看比较好。提高性能:一次
- 阅读上一篇:javascript面向对象编程(一)[javascript模拟传统OOP]javascript是一种非常灵活的语言,它的灵活度
- 下面是一些有助于更有效地使用 SQL 事件探查器的提示和技巧。运行的跟踪过多如果 Microsoft? SQL Server? 实例运行得过
- 上个周末去书店时碰巧看到了AS3 CookeBook,我记得在apollo的alpha版快出来的时候,7yue就推荐过这个小册子,只不过我已
- 从publish 表中取出第 n 条到第 m 条的记录的sql语句写法:SELECT TOP m-n+1 *&
- SQL Server2005扩展函数已经不是一件什么新鲜的事了,但是我看网上的大部分都是说聚合函数,例子也比较浅,那么这里就讲讲我运用扩展函
- 在Windows系统中用“Ctrl+C”和“Ctrl+V”就可以完成复制、粘贴工作,是不是很爽?其实使用a标签的accesskey属性也可以
- Div+CSS+JS组和能够实现很多好看的特殊的效果,这里推荐一款可刷新的下拉菜单:下面是js代码部分:<script type=te
- 为数据库配置比较大的内存,可以有效提高数据库性能。因为数据库在运行过程中,会在内存中划出一块区域来作为数据缓存。通常情况下,用户访问数据库时
- 测试:IE6、IE7、FF3.014突发奇想的效果,主要突出构思,效果还比较粗糙,好好创意一下,应该可以引申出一些比较有新意的图片切换效果。
- 守来说,AJAX在现在是热得不能再热的技术。没有人能否认,它拥有大批的支持者。在CNN上,它从二月份的一个不被看好的词语到十月份成长成一个初
- 星爷的一部“国产007”应该是无人不晓,其中一个片段是将“007”向MM展示他的秘密武器。皮鞋可以吹头发,大哥大可以刮胡子……把真实功能隐蔽
- 一、多行函数又称组合函数(Group Functions)、聚合函数 1、 Types of Group Functions avg、cou
- 集群是一种实现高可用性的有效解决方案,有时它会适得其反。而且,它还非常昂贵。因此,数据库管理员可使用日志转移代替集群来提供较高的可用性。日志
- 用比较笨的方法来做abc ="AlkjA;lkjlkjAlkAkjAlkjAAAA" if instr(abc,&quo
- 不用整天为美化select控件烦恼了。1、可批量美化select控件。2、可以有onchange句柄。3、触发onchange的函数可带参数