剛剛學(xué)習(xí)了一下網(wǎng)頁動(dòng)畫中上的緩動(dòng)效果，分享一下學(xué)習(xí)心得。

緩動(dòng)曲線的概念：

緩動(dòng)曲線是一個(gè)0為起點(diǎn)的連續(xù)函數(shù)曲線，x軸表示時(shí)間變化，y軸表示位移變化。曲線的斜率反映出運(yùn)動(dòng)的數(shù)度。

緩動(dòng)效果在Flash動(dòng)畫中比較常見，用于模擬一些現(xiàn)實(shí)中常見的運(yùn)動(dòng)軌跡，或者制造一些超絢的效果。
而且新版本的Flash中，內(nèi)置了一些常用的緩動(dòng)曲線函數(shù)。

可惜,Flash的這些曲線函數(shù)不是開源的，我們不知道內(nèi)部如何實(shí)現(xiàn)，也就無法將其移植到JS中。感受其絢麗的同時(shí)，未免有一絲遺憾。

于是乎，自己琢磨琢磨。

首先，我對(duì)Flash的漸變函數(shù)接口非常不滿。
搞那么多參數(shù)干嗎？
要描述一個(gè)區(qū)間的漸變運(yùn)動(dòng)特征，只需一個(gè)y = f(x)足已。那么一大堆參數(shù)，真夠羅嗦。
//原理：我們以終點(diǎn)位移為參考，只需要知道中間個(gè)點(diǎn)相對(duì)于最終位移，我們就能確定運(yùn)動(dòng)的規(guī)律。
y= f(x)
//約定
//x ∈ [0,1] #將x變化換算成[0,1]是最簡(jiǎn)單不過的操作
//f(0) = 0 #運(yùn)動(dòng)是連續(xù)的嘛^_^.
//f(1) != 0 #如果f(1) = 0了，那不就沒有運(yùn)動(dòng)嘛，中間即使有位移，我也無法計(jì)算中間的位移相對(duì)于總體位移的比例。

曲線轉(zhuǎn)換
每種類型的漸變都有三種變形

漸入(in)	在過渡的開始提供緩動(dòng)效果。
漸出(out)	在過渡的結(jié)尾提供緩動(dòng)效果。
漸入漸出(inOut/Both)	在過渡的開始和結(jié)尾提供緩動(dòng)效果。

其中，我們只要知道一個(gè)的曲線，其他兩個(gè)都可以轉(zhuǎn)換生成：
知道漸入曲線之后，將其相對(duì)于(0.5,0.5)點(diǎn)繪制鏡像，就是一個(gè)緩出運(yùn)動(dòng)，分段疊加就是一個(gè)完整的緩入緩出運(yùn)動(dòng)。



首先，常見的加速/減速運(yùn)動(dòng)：
初中物理就能搞定。
加速漸變函數(shù)為(easeIn)：
y=x*x; //y軸比例常數(shù)無需考慮

這是一個(gè)簡(jiǎn)單的2次曲線，表現(xiàn)一個(gè)漸入運(yùn)動(dòng)。
簡(jiǎn)單的變換一下：y = 1-(1-x)*(1-x) 減速運(yùn)動(dòng)(easeOut)
復(fù)雜一點(diǎn)：
y = x>0.5? 1-2(1-x)*(1-x) :
2*x*x :
先加速后減速運(yùn)動(dòng)(easeBoth)




既然有二次曲線，很自然就想到三次、四次曲線。是的，這些曲線都有類似特征，區(qū)別在中間更陡峭，兩頭平緩（緩入緩出）

接下來，我就想實(shí)現(xiàn)一下彈動(dòng)效果：
這類效果就好像一個(gè)甲蟲飛到蜘蛛網(wǎng)上，在網(wǎng)上抖動(dòng)兩下，靜下來聽天由命。
抖動(dòng)，周期運(yùn)動(dòng)，好，我們很快就想到正弦曲線。
方法基本正確，不過我起初還是走彎路了，我自作聰明的想著延長開始的半周期（x軸邊形處理，振動(dòng)讓周期先大后小）。
但最終發(fā)現(xiàn)效果非常不理想，最后查看yui的實(shí)現(xiàn)。模仿一下，走出了這個(gè)誤區(qū)。
我們通常看到的振蕩移位效果，都是開始移動(dòng)了較長位移，給人一種開始的振動(dòng)周期更長的錯(cuò)覺，振動(dòng)周期是不需要變化的。
糾正這個(gè)錯(cuò)誤后，實(shí)現(xiàn)曲線函數(shù)如下：

y = Math.pow(1024,x-1)*Math.sin(x*((2*(period||1)+0.5)*Math.PI));

利用指數(shù)函數(shù)的第二象限的漸變特征變形，取處理正弦波形的振幅，達(dá)到一個(gè)衰減的效果。



趁熱打鐵，看看yui的其他幾類漸變效果：

回退起步效果。
喜歡看動(dòng)畫片的話，你一定記得這個(gè)常見的場(chǎng)面，當(dāng)一個(gè)家伙想快跑的時(shí)候，一點(diǎn)要先回撤一段距離，能后如突然加速前進(jìn)。ok要的就是這個(gè)效果。
實(shí)現(xiàn)其實(shí)也很簡(jiǎn)單，一個(gè)二次曲線就可以搞定

y = x*(x-(backDistance||0.1)*4)



撞墻效果

這個(gè)名字可能不太合適吧，應(yīng)該叫撞地效果更合適，鑒于撞墻這個(gè)名詞更常見一些，也就標(biāo)題黨一回好了：）
玩過彈球吧，彈球的運(yùn)動(dòng)規(guī)律一定還記得。
對(duì)就是這種軌跡。
運(yùn)功軌跡就是若干條二次曲線的分段拼接。改寫一個(gè)yui里面的模擬實(shí)現(xiàn)。

this.bounceOut = function (x) {
if (x < (1/2.75)) {
return x*x;
} else if (x < (2/2.75)) {
return (x-=(1.5/2.75))*x + .75/7.5625;
} else if (x < (2.5/2.75)) {
return (x-=(2.25/2.75))*x + .9375/7.5625;
}
return (x-=(2.625/2.75))*x + .984375/7.5625;
};
這里手動(dòng)指出了一大堆參數(shù)，其實(shí)，這些參數(shù)都可以通過計(jì)算得出，偷個(gè)懶，就這么地吧，^_^

演示url (IE不支持)