剛剛學習了一下網頁動畫中上的緩動效果，分享一下學習心得。

緩動曲線的概念：

緩動曲線是一個0為起點的連續函數曲線，x軸表示時間變化，y軸表示位移變化。曲線的斜率反映出運動的數度。

緩動效果在Flash動畫中比較常見，用于模擬一些現實中常見的運動軌跡，或者制造一些超絢的效果。
而且新版本的Flash中，內置了一些常用的緩動曲線函數。

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

于是乎，自己琢磨琢磨。

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

曲線轉換
每種類型的漸變都有三種變形

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

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



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

這是一個簡單的2次曲線，表現一個漸入運動。
簡單的變換一下：y = 1-(1-x)*(1-x) 減速運動(easeOut)
復雜一點：
y = x>0.5? 1-2(1-x)*(1-x) :
2*x*x :
先加速后減速運動(easeBoth)




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

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

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

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



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

回退起步效果。
喜歡看動畫片的話，你一定記得這個常見的場面，當一個家伙想快跑的時候，一點要先回撤一段距離，能后如突然加速前進。ok要的就是這個效果。
實現其實也很簡單，一個二次曲線就可以搞定

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



撞墻效果

這個名字可能不太合適吧，應該叫撞地效果更合適，鑒于撞墻這個名詞更常見一些，也就標題黨一回好了：）
玩過彈球吧，彈球的運動規律一定還記得。
對就是這種軌跡。
運功軌跡就是若干條二次曲線的分段拼接。改寫一個yui里面的模擬實現。

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;
};
這里手動指出了一大堆參數，其實，這些參數都可以通過計算得出，偷個懶，就這么地吧，^_^

演示url (IE不支持)