|
在送上教程之前,我想先感謝一位經(jīng)典的網(wǎng)友,他介紹了一個(gè)數(shù)學(xué)公式編輯軟件MATHTYPE,對(duì)我這次寫(xiě)教程有了很大的幫助.但是是誰(shuí)一時(shí)想不起來(lái),又找不到.如果找到的話,我一定會(huì)把他的大名公布出來(lái),以示感激.
這是兩個(gè)月前答應(yīng)一位網(wǎng)友寫(xiě)的教程,但是當(dāng)初沒(méi)有時(shí)間,所以拖到現(xiàn)在.而且這個(gè)效果還是有相當(dāng)一部分的人曾經(jīng)在論壇上問(wèn)過(guò)怎么做的.現(xiàn)在筆者擠出了點(diǎn)時(shí)間,給大家送上這個(gè)教程.
效果預(yù)覽 (點(diǎn)擊觀看)
這基本上是用AS實(shí)現(xiàn)的.主要用了MovieClip對(duì)象的lineTo和curveTo方法,此外還有很多人都很熟悉的韓式彈性菜單的算法.
在這里,先給大家介紹比較簡(jiǎn)單的韓式彈性菜單算法.框架彈性動(dòng)作就是通過(guò)這種算法實(shí)現(xiàn)的.它要達(dá)到的效果就是讓一個(gè)物體在目標(biāo)位置兩側(cè)振動(dòng),而且振幅越來(lái)越小,最終停止在目標(biāo)位置.
它的算法如下:
ObjPos=targetPos-deceleration*(ObjPos-targetPos)
你嘗試讓ObjPos是任意的一個(gè)數(shù),然后讓deceleration取0~1(不包括0,1),然后targetPos取一個(gè)跟ObjPos相差比較大的數(shù),不斷地代入上式算一下,你會(huì)發(fā)現(xiàn)ObjPos會(huì)在targetPos兩側(cè)振動(dòng),并且當(dāng)前一次大于targetPos時(shí)候,這一次將小于targetPos,而且無(wú)限接近于targetPos,于是就達(dá)到彈性振動(dòng)的目的了.
當(dāng)然明眼人一觀察就出結(jié)果.不過(guò)這個(gè)認(rèn)識(shí)是感性的,如果有興趣的話,可以看下我對(duì)這條式子的證明過(guò)程(對(duì)數(shù)學(xué)沒(méi)興趣的可以跳過(guò))
在證明之前,先解釋一點(diǎn),上式兩邊的ObjPos是不一樣的,在AS里,它并不代表相等,而是先把ObjPos當(dāng)前的值代到右邊,算出結(jié)果后重新對(duì)ObjPos賦值.因此,假設(shè)ObjPos原始值為a1,該式子運(yùn)行一次后左邊的ObjPos的值記為a2,依此類推,執(zhí)行到n次后左邊ObjPos的值記為an+1,所以,在數(shù)學(xué)上,實(shí)際上是進(jìn)行這么一個(gè)數(shù)列的遞推運(yùn)算:
an=t-d(an-1-t)(其中d,t是常數(shù))
當(dāng)代碼執(zhí)行n次時(shí),物體的位置就位于數(shù)列{an}的第n+1項(xiàng).
因此,我們需要證明數(shù)列當(dāng)a1!=t的時(shí)候,an兩個(gè)相鄰項(xiàng)之間的數(shù)值跟t的差的符號(hào)相反,并且當(dāng)n趨向于無(wú)窮的時(shí)候,an=t
由此可知,如果把這段代碼用setInterval調(diào)用,或者在onEnterFrame里調(diào)用的話,ObjPos的值將在targetPos兩邊振動(dòng),并且無(wú)限接近targetPos.這個(gè)式子用到我的鼠標(biāo)效果里,這里要控制的點(diǎn)就是整個(gè)框的最高點(diǎn).最高點(diǎn)的變動(dòng)帶動(dòng)整個(gè)形狀的變動(dòng),當(dāng)然帶動(dòng)形狀變動(dòng)是后面的事情,我們當(dāng)前先要把最高點(diǎn)振動(dòng)的效果實(shí)現(xiàn).因此,targetPos就是框架最高點(diǎn)最終停留的位置,而ObjPos則是框架最高點(diǎn)當(dāng)前的位置.
下面筆者介紹的將是如何根據(jù)算出的最高點(diǎn)把圖形描繪出來(lái)：
首先,矩形的四個(gè)頂點(diǎn)都是常量,而且有三條邊都是直線,因此,這里用lineTo就可以實(shí)現(xiàn)了.
lineTo(x,y)方法比較簡(jiǎn)單,對(duì)MC調(diào)用該方法時(shí),lineTo將在點(diǎn)x,y和當(dāng)前MC的畫(huà)圖標(biāo)記點(diǎn)連一直線,一開(kāi)始默認(rèn)為(0,0),所以第一次對(duì)該MC調(diào)用lineTo的時(shí)候,將在該MC上畫(huà)一條從(0,0)到(x,y)的直線,然后畫(huà)圖標(biāo)記點(diǎn)就改為(x,y)了.如果不希望一開(kāi)始畫(huà)上這條線的話,或者畫(huà)完一根線以后,希望再畫(huà)一根,并且不要跟現(xiàn)在的線連在一起的話,可以先用moveTo(x,y)方法改變畫(huà)圖標(biāo)記點(diǎn).
curveTo(controlX,controlY,anchorX, anchorY)方法則是該教程的一個(gè)重點(diǎn),因?yàn)椴ㄐ蔚睦L制都是通過(guò)該方法實(shí)現(xiàn)的.而且過(guò)兩點(diǎn)有無(wú)數(shù)條曲線,所以,如何保證波形曲線的平滑性,是個(gè)很重要的問(wèn)題.
出處：藍(lán)色理想
責(zé)任編輯：moby
上一頁(yè) 下一頁(yè) 鼠標(biāo)特效--彈性框架的制作 [2]
◎進(jìn)入論壇Flash專欄版塊參加討論
|
第 1 頁(yè) 鼠標(biāo)特效--彈性框架的制作 [1]
第 2 頁(yè) 
