上一篇文章《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/