上一篇文章《Javascript的缓动效果（第1部分）》这部分对原先的缓动函数进行抽象化，并结合缓动公式进行强化。成品的效果非常惊人逆天。走过路过不要错过。
好了，打诨到此为止。普通的加速减速是难以让人满意的，为了实现弹簧等让人眼花缭乱的效果必须动用缓动公式。我见过两套缓动公式，一套是早期Robert Penner大神的缓动公式，内置到tween类中，不过现在人们越来越推荐tweenlite这个新秀了。另一套是script.aculo.us与mootools里面的，由于mootools可称之为prototype的升级版，script.aculo.us则是基于prototype，我们就把它们并称为prototype流派。与flash流派最大的不同是，它们封装得更好，并只需传入一个参数（0~1的小数），并且拥有严密的队列机制来调用各种回调函数。如在回调函数设置元素的长宽，就弄成Scale特效，利用它我们进一步制作SlideUp，SlideDown，Squish等复合特效。
我们先来看flash流派的缓动公式，它们基本都有如下四个参数。
t:timestamp，指缓动效果开始执行到当前帧开始执行时经过的时间段，单位ms
b:beginning position，起始位置
c:change，要移动的距离，就是终点位置减去起始位置。
d: duration ，缓和效果持续的时间。
我们把这四个参数传入Robert Penner大神的缓动公式，它就会计算出当前帧物体移动的位置。我们对比原来的函数来改写。
| var transition = function(el){ transition.linear = function(t,b,c,d){ return c*t/d + b; };//免费提供一个缓动公式（匀速运动公式） el.style.position = "absolute"; var options = arguments[1] || {}, begin = getCoords(el).left,//开始位置 change = parseFloat(getStyle(_("taxiway"),"width")) - parseFloat(getStyle(el,"width")),//要移动的距离 duration = options.duration || 500,//缓动效果持续时间 ease = options.ease || transition.linear,//要使用的缓动公式 end = begin + change,//结束位置 startTime = new Date().getTime();//开始执行的时间 (function(){ setTimeout(function(){ var newTime = new Date().getTime(),//当前帧开始的时间 timestamp = newTime - startTime;//逝去时间 el.style.left = ease(timestamp,begin,change,duration) + "px";//移动 if(duration <= timestamp){ el.style.left = end + "px"; }else{ setTimeout(arguments.callee,25);//每移动一次停留25毫秒 } },25) })() } |
转自：http://www.cnblogs.com/rubylouvre/