jquery的动画插件制作

扩展$.animate

当前jquery提供了animate({key:value})形式的动画,但这个函数只能用于简单的“数字+单位”（10px)。像样式background-position:10% 10%,transform都不支持。所以我们要写入自己的动画插件来扩展它。

1.以扩展background-position为例 ,首先我们要在$.Tween.propHooks插入对应的属性:

(function($){$.Tween.propHooks[‘backgroundPosition’]={set:function(tween){} };}(jQuery));

2.$.Tween.propHooks[‘backgroundPosition’]里面包含两个函数,set和get函数，我们的动画每次调用时都不断的循环set函数来更新样式的值:

(function($){$.Tween.propHooks[‘backgroundPosition’]={set:(!tween.set){initBackgroundPosition(tween);}$(tween.elem).css(‘background-position’,(tween.pos*(tween.end[0][1]-tween.start[0][1])+tween.start[0][1]*1)+tween.end[0][2]+’ ‘+(tween.pos*(tween.end[1][1]-tween.start[1][1])+tween.start[1][1]*1)+tween.end[1][2]);} };/*用来初始化样式属性的开始值与末尾值设置解析后的tween.end,tween.start*/{tween.start=parseBackgroundPosition($(tween.elem).css(“background-position”));tween.end=parseBackgroundPosition(tween.end);for(var i=0;i<tween.end.length;i++){if(tween.end[i][0]){tween.end[i][1]=tween.start[i][1]+(tween.end[i][0]==’-=’? -1:+1)*tween.end[i][1];}}tween.set=true;}/*解析样式的属性值*//*情况一:”left right”情况二:”30% 50%”情况三:”-+50px +=50px”思路:我们可以两个参数分开，并且每个参数分成三个部分来判断例如[“-=”,”50″,”px”] [“undefined”,”50″,”%”]@param {string} value 属性值@return {array} bogPos 包含两个值的数组，每个值又是一个数组*/{var bgPos=value.split(‘ ‘);var posStr={left:”0%”,center:”50%”,right:”100%”,top:”0%”,bottom:”100%”};posArr=(posStr[index]? posStr:bgPos[index]).match(/^([+-]=)?([+-]?\d+)(\.\d+)?(.*)?$/);return [posArr[1],posArr[2],posArr[4]||”px”];};bgPos[0]=decodeBgPos(0);bgPos[1]=decodeBgPos(1);return bgPos;}}(jQuery));扩张缓动动画

缓动: 一个属性的变化速度是随着时间变化的，它是非线性的。

一个缓动被实现为一个函数，它返回一个给定时间的属性值。为了迎合用户自定义动画的时长和属性范围的需求，，这个函数被标准化为接收一个介于0.0-1.0之间的时间，并且产生的返回值也介于0.0-1.0之间。 例如下面的swing缓动函数：

jQuery.easing={/*新版本*@param p：到1的一个很时间成正比的数*@return 一个和曲线y轴成正比的0-1之间的书*/swing:-Math.cos(p*Math.PI)/2;} //旧版本/** t: current time（当前时间）* b: beginning value（初始值，默认为0）* c: change in value（变化量，默认为1）* d: duration（持续时间）*/swing:c*(0.5-Math.cos(t/d*Math.PI)/2)*b;}}

人生伟业的建立，不在能知，乃在能行。