很久之前就对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就是速度和时间了。前端UI分享
再看看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);
前端UI分享
通过setInterval每隔一定时间(jQuery中是13ms)进行一次位移运算,直到当前时间与初始时间的差值大于动画时长,这就是jQuery.animate的执行过程。
按照常规思路,动画的实现方式是这样的:通过setInterval每隔一定时间给某个值增加特定数值,直到这个值达到限制值。这样做的主要问题是,不同浏览器的运行速度不同,从而导致动画速度有差异,一般是IE下比较慢,Firefox下比较快。而jQuery.animate是以当前时间来决定位移值,某个时刻的位移值总是固定的,因而动画速度不会有差异。
相关推荐
一个简单的图片放大效果基于jquery animate函数,很简单的,自己可以修改一下用。jquery文件通用自己改一下链接文件。
下面小编就为大家带来一篇原生js实现jquery函数animate()动画效果的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
jQuery.animate的每种动画过渡效果都是通过easing函数实现的。jQuery1.4.2中就预置了两个这样的函数: easing: { linear: function( p, n, firstNum, diff ) { return firstNum + diff * p; }, swing: function( p,...
jquery animate() 用于创建自定义动画的函数。这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性(如"height"、"top"或"opacity")。 注意:所有指定的属性必须用...
jquery数字跳动插件Animate Number是一款增加了数属性和阶跃函数的jQuery动画功能特性。
jquery animate函数不能处理背景色渐变,需要使用jquery.color插件 核心代码: $(function(){ $("#cdiv").animate( { backgroundColor:'#FF0000' },1000 ) }) 完整代码如下: <!DOCTYPE html> <...
jQuery animate 的简单覆盖,允许将属性作为动态值的函数传递。 例如,如果您有一个容器需要滚动到特定元素,但容器的其他子元素正在切换,则容器所需的 scrollTop 将在动画完成之前更改。 现在我们可以为 ...
animate()在jquery中作为一个方法,可用于创建动画效果,jquery中的animate()方法让那个页面增加了很好的视觉效果
如下所示: function fingers(){ $(.box01 .fingers).animate({width:7.5rem,marginLeft:-3.75rem},500,function(){ $(.box01 .fingers).animate...以上这篇jquery animate动画持续运动的实例就是小编分享给大家的全
用于创建自定义动画的函数。这个函数的关键在于指定动画形式及结果样式属性对象,下面为大家详细介绍下animate方法的具体使用,感兴趣的朋友可以了解下哈
最近刚在项目里面花心思捉摸JQ,所以有些心得也及时放上来,理解不足的地方也请教下大家。
1:支持回调函数; 2:支持级联动画调用; 3:支持delay动画队列延迟; 4:支持stop停止动画; 5:支持opacity透明度变化; 6:支持+= -= *= /=操作; 7:支持单位操作(px, %); 2:使用说明 jelle(A).animate(B,...
从jQuery API 文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数: • properties:一组包含作为动画属性和终值的样式属性和及其值的集合 • ...
从jQuery API 文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数: •properties:一组包含作为动画属性和终值的样式属性和及其值的集合 •duration...
针对jq的animate在ie低版本不兼容的情况,写的运动函数。
昨天突然有网友问我animate()方法可以...css中的不是所有属性都可以用Jquery动画(animate函数)来动态改变,下面总结了JQ可以操作元素的一些属性: * backgroundPosition * borderWidth * borderBottomWidth * b
本文主要讲解jQuery的animate函数的基本用法,利用动画函数animate实现豌豆发射的效果,对于学习animate很有帮助,有需要的可以参考借鉴。
用于创建自定义动画的函数。 这个函数的关键在于指定动画形式及结果样式属性对象。
本文介绍了浅谈原生JS实现jQuery的animate()动画示例,希望此文章对各位有所帮助。 参数介绍: obj 执行动画的元素 css JSON数值对,形式为“{属性名: 属性值}”,指要执行动画的书序及其对应值 ...