jQuery的animate函数学习记录


Posted in Javascript onAugust 08, 2014

很久之前就对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是以当前时间来决定位移值,某个时刻的位移值总是固定的,因而动画速度不会有差异。

Javascript 相关文章推荐
HTTP状态代码以及定义(解释)
Feb 02 Javascript
使用jquery给input和textarea设定ie中的focus
May 29 Javascript
jQuery实现密保互斥问题解决方案
Aug 16 Javascript
jquery基础教程之数组使用详解
Mar 10 Javascript
jquery实现增加删除行的方法
Feb 03 Javascript
swtich/if...else的替代语句
Aug 16 Javascript
ES6新特性之解构、参数、模块和记号用法示例
Apr 01 Javascript
Bootstrap table使用方法总结
May 10 Javascript
JS+canvas绘制的动态机械表动画效果
Sep 12 Javascript
js实现文件上传功能 后台使用MultipartFile
Sep 08 Javascript
微信小程序实现炫酷的弹出式菜单特效
Jan 28 Javascript
jQuery中使用validate插件校验表单功能
May 24 jQuery
jQuery中get和post方法传值测试及注意事项
Aug 08 #Javascript
JSON.stringify转换JSON时日期时间不准确的解决方法
Aug 08 #Javascript
js事件监听机制(事件捕获)总结
Aug 08 #Javascript
使用jquery.qrcode生成彩色二维码实例
Aug 08 #Javascript
兼容最新firefox、chrome和IE的javascript图片预览实现代码
Aug 08 #Javascript
js调试工具console.log()方法查看js代码的执行情况
Aug 08 #Javascript
JS创建类和对象的两种不同方式
Aug 08 #Javascript
You might like
php一个找二层目录的小东东
2012/08/02 PHP
php读取csv实现csv文件下载功能
2013/12/18 PHP
jquery中map函数与each函数的区别实例介绍
2014/06/23 Javascript
javascript实现playfair和hill密码算法
2014/12/07 Javascript
JS实现浏览器状态栏显示时间的方法
2015/10/27 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
2016/02/19 Javascript
HTML5+jQuery实现搜索智能匹配功能
2017/03/24 jQuery
了解VUE的render函数的使用
2017/06/08 Javascript
小程序清理本地缓存的方法
2018/08/17 Javascript
详解webpack打包nodejs项目(前端代码)
2018/09/19 NodeJs
Django+vue跨域问题解决的详细步骤
2019/01/20 Javascript
JS 数组基本用法入门示例解析
2020/01/16 Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
2020/03/08 Javascript
vue中解决微信html5原生ios虚拟键返回不刷新问题
2020/10/20 Javascript
原生JS实现pc端轮播图效果
2020/12/21 Javascript
[00:12]2018DOTA2亚洲邀请赛SOLO赛 MidOne是否中单第一人?
2018/04/05 DOTA
tornado捕获和处理404错误的方法
2014/02/26 Python
python3使用smtplib实现发送邮件功能
2018/05/22 Python
详解django中使用定时任务的方法
2018/09/27 Python
Python模块 _winreg操作注册表
2020/02/05 Python
Python numpy大矩阵运算内存不足如何解决
2020/11/19 Python
CSS3实现粒子旋转伸缩加载动画
2016/04/22 HTML / CSS
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
2013/04/25 HTML / CSS
HTML5学习心得总结(推荐)
2016/07/08 HTML / CSS
HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
2018/03/02 HTML / CSS
千禧酒店及度假村官方网站:Millennium Hotels and Resorts
2019/05/10 全球购物
经济系大学生求职信
2013/10/01 职场文书
家具促销活动方案
2014/02/16 职场文书
个人廉洁自律承诺书
2014/03/27 职场文书
乡镇综治宣传月活动总结
2014/07/02 职场文书
复兴之路观后感
2015/06/02 职场文书
雨中的树观后感
2015/06/03 职场文书
少儿励志名言(80句)
2019/08/14 职场文书
JAVA API 实用类 String详解
2021/10/05 Java/Android
SQL SERVER触发器详解
2022/02/24 SQL Server
sqlserver连接错误之SQL评估期已过的问题解决
2022/03/23 SQL Server