中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

下面這部分對原先的緩動函數(shù)進(jìn)行抽象化，并結(jié)合緩動公式進(jìn)行強化。成品的效果非常驚人逆天。走過路過不要錯過。

好了，打諢到此為止。普通的加速減速是難以讓人滿意的，為了實現(xiàn)彈簧等讓人眼花繚亂的效果必須動用緩動公式。我見過兩套緩動公式，一套是早期Robert Penner大神的緩動公式，內(nèi)置到tween類中，不過現(xiàn)在人們越來越推薦tweenlite這個新秀了。另一套是script.aculo.us與mootools里面的，由于mootools可稱之為prototype的升級版，script.aculo.us則是基于prototype，我們就把它們并稱為prototype流派。與flash流派最大的不同是，它們封裝得更好，并只需傳入一個參數(shù)（0~1的小數(shù)），并且擁有嚴(yán)密的隊列機制來調(diào)用各種回調(diào)函數(shù)。如在回調(diào)函數(shù)設(shè)置元素的長寬，就弄成Scale特效，利用它我們進(jìn)一步制作SlideUp，SlideDown，Squish等復(fù)合特效。

我們先來看flash流派的緩動公式，它們基本都有如下四個參數(shù)。

• t:timestamp，指緩動效果開始執(zhí)行到當(dāng)前幀開始執(zhí)行時經(jīng)過的時間段，單位ms
• b:beginning position，起始位置
• c:change，要移動的距離，就是終點位置減去起始位置。
• d: duration ，緩和效果持續(xù)的時間。

我們把這四個參數(shù)傳入Robert Penner大神的緩動公式，它就會計算出當(dāng)前幀物體移動的位置。我們對比原來的函數(shù)來改寫。

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,//緩動效果持續(xù)時間 
  ease = options.ease || transition.linear,//要使用的緩動公式 
  end = begin + change,//結(jié)束位置 
  startTime = new Date().getTime();//開始執(zhí)行的時間 
  (function(){ 
    setTimeout(function(){ 
      var newTime = new Date().getTime(),//當(dāng)前幀開始的時間 
      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) 
  })()
}

接著是各種緩動公式大閱兵，共分為十一大類，除了linear。其他類又分為三種。

1. easeIn方法控制補間如何從開始到最高速度。
2. easeOut 方法控制補間減速并停在目標(biāo)位置
3. easeInOut方法同時控制上述兩者。

具體公式見下面（共31種）：

代碼拷貝框
//***********@author：Robert Penner and cloudgamer************* //http://www.cnblogs.com/cloudgamer/archive/2009/01/06/Tween.html var Tween = { Linear: function(t,b,c,d){ return c*t/d + b; }, Quad: { easeIn: function(t,b,c,d){ return c*(t/=d)*t + b; }, easeOut: function(t,b,c,d){ return -c *(t/=d)*(t-2) + b; }, easeInOut: function(t,b,c,d){ if ((t/=d/2) < 1) return c/2*t*t + b; return -c/2 * ((--t)*(t-2) - 1) + b; } }, Cubic: { easeIn: function(t,b,c,d){ return c*(t/=d)*t*t + b; }, easeOut: function(t,b,c,d){ return c*((t=t/d-1)*t*t + 1) + b; }, easeInOut: function(t,b,c,d){ if ((t/=d/2) < 1) return c/2*t*t*t + b; return c/2*((t-=2)*t*t + 2) + b; } }, Quart: { easeIn: function(t,b,c,d){ return c*(t/=d)*t*t*t + b; }, easeOut: function(t,b,c,d){ return -c * ((t=t/d-1)*t*t*t - 1) + b; }, easeInOut: function(t,b,c,d){ if ((t/=d/2) < 1) return c/2*t*t*t*t + b; return -c/2 * ((t-=2)*t*t*t - 2) + b; } }, Quint: { easeIn: function(t,b,c,d){ return c*(t/=d)*t*t*t*t + b; }, easeOut: function(t,b,c,d){ return c*((t=t/d-1)*t*t*t*t + 1) + b; }, easeInOut: function(t,b,c,d){ if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b; return c/2*((t-=2)*t*t*t*t + 2) + b; } }, Sine: { easeIn: function(t,b,c,d){ return -c * Math.cos(t/d * (Math.PI/2)) + c + b; }, easeOut: function(t,b,c,d){ return c * Math.sin(t/d * (Math.PI/2)) + b; }, easeInOut: function(t,b,c,d){ return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b; } }, Expo: { easeIn: function(t,b,c,d){ return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b; }, easeOut: function(t,b,c,d){ return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b; }, easeInOut: function(t,b,c,d){ if (t==0) return b; if (t==d) return b+c; if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b; return c/2 * (-Math.pow(2, -10 * --t) + 2) + b; } }, Circ: { easeIn: function(t,b,c,d){ return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b; }, easeOut: function(t,b,c,d){ return c * Math.sqrt(1 - (t=t/d-1)*t) + b; }, easeInOut: function(t,b,c,d){ if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b; return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b; } }, Elastic: { easeIn: function(t,b,c,d,a,p){ if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; if (!a || a < Math.abs(c)) { a=c; var s=p/4; } else var s = p/(2*Math.PI) * Math.asin (c/a); return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; }, easeOut: function(t,b,c,d,a,p){ if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; if (!a || a < Math.abs(c)) { a=c; var s=p/4; } else var s = p/(2*Math.PI) * Math.asin (c/a); return (a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b); }, easeInOut: function(t,b,c,d,a,p){ if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5); if (!a || a < Math.abs(c)) { a=c; var s=p/4; } else var s = p/(2*Math.PI) * Math.asin (c/a); if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b; } }, Back: { easeIn: function(t,b,c,d,s){ if (s == undefined) s = 1.70158; return c*(t/=d)*t*((s+1)*t - s) + b; }, easeOut: function(t,b,c,d,s){ if (s == undefined) s = 1.70158; return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b; }, easeInOut: function(t,b,c,d,s){ if (s == undefined) s = 1.70158; if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b; return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b; } }, Bounce: { easeIn: function(t,b,c,d){ return c - Tween.Bounce.easeOut(d-t, 0, c, d) + b; }, easeOut: function(t,b,c,d){ if ((t/=d) < (1/2.75)) { return c*(7.5625*t*t) + b; } else if (t < (2/2.75)) { return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b; } else if (t < (2.5/2.75)) { return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b; } else { return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b; } }, easeInOut: function(t,b,c,d){ if (t < d/2) return Tween.Bounce.easeIn(t*2, 0, c, d) * .5 + b; else return Tween.Bounce.easeOut(t*2-d, 0, c, d) * .5 + c*.5 + b; } } }
[Ctrl+A 全部選擇 然后拷貝]

<div id="taxiway">  
<div id="move" onclick="transition(this,{ease:Tween.Bounce.easeOut})"></div>
</div>

出處：藍(lán)色理想
責(zé)任編輯：bluehearts

上一頁 javascript的緩動效果 [2] 下一頁 javascript的緩動效果 [4]

◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。