|
下面先做一個小測試:
新建一個Flash文檔,在幀上添加下面的代碼:
var initX = 100;
var inity = 200;
var controlX;
var controlY;
var anchorX = 50;
var anchorY = 50;
this.onMouseMove = function() {
this.createEmptyMovieClip("curve", 1);
with (curve) {
lineStyle(1, 000000, 50);
moveTo(initX, initY);
ControlX = _xmouse;
ControlY = _ymouse;
lineTo(controlX, controlY);
lineTo(anchorX, anchorY);
moveTo(initX, inity);
curveTo(controlX, controlY, anchorX, anchorY);
}
updateAfterEvent(this.onMouseMove)
};
然后,測試影片,在舞臺上移動鼠標(biāo),觀察曲線的變化(其中,鼠標(biāo)所在的點是控制點)
也可以直接在這里預(yù)覽:
效果預(yù)覽 (點擊觀看)
你會發(fā)現(xiàn),不管控制點怎樣變化,畫出來的曲線都有一個特點,就是控制點跟曲線兩個頂點的連線都和曲線相切,并且弧線總是C形,不是S形.這就是指導(dǎo)我們畫出平滑曲線的重要結(jié)論.
觀察下面的圖:
可以發(fā)現(xiàn),在除紅線以外的所有曲線中,跟紅線的切線相切,并且方向跟紅線相反的兩根藍線是可以跟紅線平滑過渡的,數(shù)學(xué)上這種現(xiàn)象稱為連接.另外,切線本身也能跟紅線實現(xiàn)平滑過渡.
由此可以正確控制波形的形狀.
波形的草圖如下:
紅色是曲線部分,一看就知道不是個簡單的C形,你嘗試在Flash,或FW或者PS里把這條路徑畫出來,再看看錨點的組成,你就可以發(fā)現(xiàn),這么條曲線可以分成三條C形曲線.
如果就這樣畫三段,那么,波形最高點的坐標(biāo)是由控制點決定的,很難精確,所以,最好在最高點再添加一個錨點,這樣最高點的位置就準確了.
但是,其它錨點怎么確定呢?
其實根據(jù)已知的條件,是無法得出其它錨點的位置的,這個一般憑感覺來確定就好了.姑且讓整條曲線的寬度為width,然后假設(shè)最高點的橫坐標(biāo)是xm,那么,曲線最左點的橫坐標(biāo)是xm-width/2,最右點的橫坐標(biāo)是xm+width/2,中間兩個過渡點的橫坐標(biāo),一個在xm-width/2和xm之間,一個在xm和xm+width/2之間,為了方便,也為了自然,選取中點,xm+width/4,xm+3*width/4,縱坐標(biāo)的選取也相似.
現(xiàn)在要討論的是控制點的問題,就是怎么讓每段曲線之前能實現(xiàn)平滑的連接.
首先,作出曲線各錨點的切線.那么,相鄰曲線段的切線之間的交點(A,B,C,D)就是相應(yīng)曲線的控制點.
可見,A,D均位于波形最低點,而B,C位于波形最高點.另外,A,A1,B三點共線,C,C1,D三點也共線,這樣就可以保證整個波形都是平滑的.
但是,這樣A,B,C,D的位置還是不能確定下來,但可以肯定的一點是,四個點的橫坐標(biāo)從左到右的順序依次是A,B,C,D.那么,比較方便而且比較美觀的選擇是讓A的橫坐標(biāo)位于A0和A1的中間,那么可以算出B點的位置恰好位于A1和頂點的中間,同樣道理,C點在頂點和和C1點的中間,D點在C1點和D0點的中間.
理論基礎(chǔ)基本齊全,下面可以開始動手寫程序了.
不過筆者發(fā)現(xiàn),有個這個基礎(chǔ)原來還不足夠,依然會遇到很多很棘手的問題.在測試的時候才發(fā)現(xiàn)的.
出處：藍色理想
責(zé)任編輯：moby
上一頁 鼠標(biāo)特效--彈性框架的制作 [1] 下一頁
◎進入論壇Flash專欄版塊參加討論
|
第 1 頁 
第 2 頁 鼠標(biāo)特效--彈性框架的制作 [2]
