滑鼠特效彈性框架的製作

在送上教程之前,我想先感謝一位經典的網友,他介紹了乙個數學公式編輯軟體mathtype,對我這次寫教程有了很大的幫助.但是是誰一時想不起來,又找不到.如果找到的話,我一定會把他的大名公布出來,以示感激.

這是兩個月前答應一位網友寫的教程,但是當初沒有時間,所以拖到現在.而且這個效果還是有相當一部分的人曾經在論壇上問過怎麼做的.現在筆者擠出了點時間,給大家送上這個教程.

效果預覽

這基本上是用as實現的.主要用了movieclip物件的lineto和curveto方法,此外還有很多人都很熟悉的韓式彈性選單的演算法.

在這裡,先給大家介紹比較簡單的韓式彈性選單演算法.框架彈性動作就是通過這種演算法實現的.它要達到的效果就是讓乙個物體在目標位置兩側振動,而且振幅越來越小,最終停止在目標位置.

它的演算法如下:

objpos=targetpos-deceleration*(objpos-targetpos) 你嘗試讓objpos是任意的乙個數,然後讓deceleration取0~1(不包括0,1),然後targetpos取乙個跟objpos相差比較大的數,不斷地代入上式算一下,你會發現objpos會在targetpos兩側振動,並且當前一次大於targetpos時候,這一次將小於targetpos,而且無限接近於targetpos,於是就達到彈性振動的目的了.

當然明眼人一觀察就出結果.不過這個認識是感性的,如果有興趣的話,可以看下我對這條式子的證明過程(對數學沒興趣的可以跳過)

在證明之前,先解釋一點,上式兩邊的objpos是不一樣的,在as裡,它並不代表相等,而是先把objpos當前的值代到右邊,算出結果後重新對objpos賦值.因此,假設objpos原始值為a1,該式子執行一次後左邊的objpos的值記為a2,依此類推,執行到n次後左邊objpos的值記為an+1,所以,在數學上,實際上是進行這麼乙個數列的遞推運算:

an=t-d(an-1-t)(其中d,t是常數)

當**執行n次時,物體的位置就位於數列的第n+1項.

因此,我們需要證明數列當a1!=t的時候,an兩個相鄰項之間的數值跟t的差的符號相反,並且當n趨向於無窮的時候,an=t

由此可知,如果把這段**用setinterval呼叫,或者在onenterframe裡呼叫的話,objpos的值將在targetpos兩邊振動,並且無限接近targetpos.這個式子用到我的滑鼠效果裡,這裡要控制的點就是整個框的最高點.最高點的變動帶動整個形狀的變動,當然帶動形狀變動是後面的事情,我們當前先要把最高點振動的效果實現.因此,targetpos就是框架最高點最終停留的位置,而objpos則是框架最高點當前的位置.

下面筆者介紹的將是如何根據算出的最高點把圖形描繪出來：

首先,矩形的四個頂點都是常量,而且有三條邊都是直線,因此,這裡用lineto就可以實現了.

lineto(x,y)方法比較簡單,對mc呼叫該方法時,lineto將在點x,y和當前mc的畫圖標記點連一直線,一開始預設為(0,0),所以第一次對該mc呼叫lineto的時候,將在該mc上畫一條從(0,0)到(x,y)的直線,然後畫圖標記點就改為(x,y)了.如果不希望一開始畫上這條線的話,或者畫完一根線以後,希望再畫一根,並且不要跟現在的線連在一起的話,可以先用moveto(x,y)方法改變畫圖標記點.

curveto(controlx,controly,anchorx, anchory)方法則是該教程的乙個重點,因為波形的繪製都是通過該方法實現的.而且過兩點有無數條曲線,所以,如何保證波形曲線的平滑性,是個很重要的問題.

[1b]下面先做乙個小測試:

[/1b]新建乙個flash文件,在幀上新增下面的**:

var initx = 100;

var inity = 200;

滑鼠特效彈性框架的製作

滑鼠特效彈性框架的製作

flash滑鼠跟隨的製作

仿Material UI框架的動畫特效

滑鼠特效 彈性框架的製作

滑鼠特效 彈性框架的製作

flash滑鼠跟隨的製作

仿Material UI框架的動畫特效

相關推薦

滑鼠特效彈性框架的製作

滑鼠特效彈性框架的製作