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是以当前时间来决定位移值,某个时刻的位移值总是固定的,因而动画速度不会有差异。
建议继续学习:
- JQuery实现Excel表格呈现 (阅读:46523)
- 分享一个JQUERY颜色选择插件 (阅读:12652)
- jQuery插件---轻量级的弹出窗口wBox. (阅读:9688)
- 10个强大的Ajax jQuery文件上传程序 (阅读:7757)
- jQuery的data()方法 (阅读:7586)
- jQuery性能优化指南 (阅读:7327)
- jQuery Color Animations颜色动画插件 (阅读:7090)
- 精于图片处理的10款jQuery插件 (阅读:6223)
- jQuery中getJSON跨域原理详解 (阅读:5621)
- 配合jquery实现异步加载页面元素 (阅读:5375)
扫一扫订阅我的微信号:IT技术博客大学习
- 作者:Heero's Blog 来源: Heero's Blog
- 标签: animate jQuery
- 发布时间:2010-08-06 09:47:10
- [56] Oracle MTS模式下 进程地址与会话信
- [56] IOS安全–浅谈关于IOS加固的几种方法
- [55] 图书馆的世界纪录
- [54] android 开发入门
- [53] 如何拿下简短的域名
- [52] Go Reflect 性能
- [51] 【社会化设计】自我(self)部分――欢迎区
- [48] 读书笔记-壹百度:百度十年千倍的29条法则
- [37] 程序员技术练级攻略
- [33] 视觉调整-设计师 vs. 逻辑