相对于 Extjs Fx 模块的处理
, Jquery Fx 的处理显得紧凑,灵活,不像 Extjs 严格的分层,将基础操作,中央定时队列抽象出来,然后再对具体元素,具体属性进行动画效果,Jquery 不严格区分,将对元素属性的操作以及定时队列管理糅合在一起,代码显得更精悍。
DOM动画处理的关键是对目标元素得目标 css 属性进行随时间设置不同的值,造成动画的效果,具体设计包括两个方面:
1。中央定时队列引入,将所有元素的所有不同属性变化导入中央队列,避免定时器分散设置与不同元素,性能提高
2。抽象出不同 css 属性随时间变化得公共计算,css 属性以及变化值做为变量处理。
Jquery 实践:
关建为 animate 方法
animate: function( prop, speed, easing, callback )
其他定义好的操作
slideDown,slideUp,slideToggle,fadeIn,fadeOut,show,hide
都是对于 animate 函数的具体变量设置调用。
animate 参数的 prop 为 属性的结合,形式为 :
[{
height:endValue
},
{
width:endValue
}]
其中 endValue 为动画结束的结果数字或者 jquery 预定义的一些常量 show ,hide ,toogle ...
在animate 函数中,对参数prop中的每个 css 属性计算开始,结束以及持续时间,对应每个元素以及元素的每个变化css属性构造出 jquery.fx类型 对象
,由该对象调用其 custom 方面来具体实施动画效果。
fx: function( elem, options, prop ){
this.options = options;
this.elem = elem;
this.prop = prop;
if ( !options.orig )
options.orig = {};
}
框架图:
则 custom 方法
就如同之前分析,构造出回调函数,放入中央队列等待处理,关键点 :
1:利用闭包,创造出内部函数,可以由中央计时器调用修改其特定元素特定css属性对应的jquery.fx的内部状态
//内部函数,由中央计时控制调用更新内部状态
function t(gotoEnd){
return self.step(gotoEnd);
}
t.elem = this.elem;
2:维护中央队列定时器,需要时才创建 timer。(与extjs 不同,中央队列耦合于动画操作)
if ( t() && jQuery.timers.push(t) && !timerId ) {
timerId = setInterval(function(){
var timers = jQuery.timers;
for ( var i = 0; i < timers.length; i++ )
if ( !timers[i]() )
timers.splice(i--, 1);
if ( !timers.length ) {
clearInterval( timerId );
timerId = undefined;
}
}, 13);
3: 根据当前时间与结束时间(由speed可得)的比例,以及用户设置的css属性值的最终结果来计算当前css属性的具体值
3.1 两种比例计算方法, linear 与 swing
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;
}
},
3.2 css 属性值的更新注意 opacity ,
step: {
opacity: function(fx){
jQuery.attr(fx.elem.style, "opacity", fx.now);
},
_default: function(fx){
if ( fx.elem.style && fx.elem.style[ fx.prop ] != null )
fx.elem.style[ fx.prop ] = fx.now + fx.unit;
else
fx.elem[ fx.prop ] = fx.now;
}
}
4.easing 的插件扩展方式
jquery自带了两种easing (即为如何从初值随着时间变化过度到终值的过程):
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;
}
如果要自定义easing,则实现一个函数(接口),参数解释:
p : 当前动画进行到的进度,范围为0 ~ 1
n : 动画从开始已经逝去的时间 (很少使用)
firstNum: 动画属性值的初始值
diff: 当前动画时刻属性值和属性终值的差值
另外还有第五个参数
duration: 设置的动画的持续时间
一般只要使用 p,firstNum,diff 参数即可。
关键是要保证返回值当 p=0 时返回 firstNum 即为初值,当 p=1 时返回 firstNum+diff 即为终值
比如 二次函数,越往后变化越剧烈:
jQuery.extend(jQuery.easing, {
'quadratic': function(p,n,firstNum,diff,duration) {
return p* p* diff + firstNum;
}
});
使用:
在
animate: function( prop, speed, easing, callback )
中的 easing 参数中填入 quadratic 即可。
- 大小: 61.5 KB
分享到:
相关推荐
jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码...
JQUERY博客源码 JQUERY博客源码
2023年最新整理优质源码之圣诞节雪花飘落jQuery特效源码 2023年最新整理优质源码之圣诞节雪花飘落jQuery特效源码 2023年最新整理优质源码之圣诞节雪花飘落jQuery特效源码 2023年最新整理优质源码之圣诞节雪花飘落...
Jquery源码分析 清晰 Jquery源码分析 清晰 Jquery源码分析 清晰 Jquery源码分析 清晰
jQuery Popup 源码示例
jquery最新源码jquery最新源码jquery最新源码
jQuery 教程 源码+实例+注释jQuery 教程 源码+实例+注释jQuery 教程 源码+实例+注释jQuery 教程 源码+实例+注释
50个jquery例子源码,附有比较详细的代码,更快的帮助您网页设计。
Jquery1.2.6源码分析及源码文件 博文链接:https://jljlpch.iteye.com/blog/234218
Jquery1.2.6源码分析文档,并附上分析的源代码。
jQuery,源码jQuery,源码jQuery,源码jQuery,源码jQuery,源码jQuery,源码
jquery1.2.6源码分析,其中里面含有源码详细的中文注释
从github下载下来的最新jquery1.11源码,github地址:https://github.com/jquery/jquery
简单不能再简单的jQuery分页源码 简单不能再简单的jQuery分页源码
Day09【JQuery】源码及综合案例
Jquery1.2.6源码分析 Jquery1.2.6源码分析
jQuery最新源码库
锋利的jQuery 源码锋利的jQuery 源码锋利的jQuery 源码锋利的jQuery 源码锋利的jQuery 源码锋利的jQuery 源码
jquery1.2.6源码分析 jquery1.2.6源码分析