2008年11月28日

FLASH 運動曲線研究(緩動效果)

緩動曲線的概念:

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