上一篇文章《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/
程序員人生，我編程，我富裕，記住wfuyu網，php教程，php學習，php手冊，CMS模版制作
聲明：本站大部分內容是作者原創，少部分收集于互聯網供大家一起學習，原版權很多不明，如有侵權請聯系本站，謝謝！
粵ICP備14040726號-1?? 2015-2020 程序員人生 版權所有
