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