程序员人生 网站导航

javascript的缓动效果(第2部分)

栏目:jscript时间:2013-11-29 11:28:45

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

------分隔线----------------------------
------分隔线----------------------------

最新技术推荐