用Blend 4制作正弦函數(shù)繪圖過程動畫的關(guān)鍵步驟及其要點

杜衛(wèi)杰，陳世華，艾訓(xùn)儒

（1.深圳市寶安區(qū)深圳東方英文書院，廣東深圳518128；2.恩施自治州高級中學(xué)，湖北恩施445000；3.湖北民族學(xué)院，湖北恩施 445000）

用Blend 4制作正弦函數(shù)繪圖過程動畫的關(guān)鍵步驟及其要點

杜衛(wèi)杰1，陳世華2，艾訓(xùn)儒3

（1.深圳市寶安區(qū)深圳東方英文書院，廣東深圳518128；2.恩施自治州高級中學(xué)，湖北恩施445000；3.湖北民族學(xué)院，湖北恩施 445000）

在用Expression Blend 4制作正弦函數(shù)繪圖過程動畫的過程中，作者試圖利用路徑動畫來實現(xiàn)，但是，Blend 4制作Silverlight應(yīng)用程序時，沒有直接的路徑動畫。文章闡述通過布局路徑及故事板（Storyboard）實現(xiàn)用路徑動畫繪制正弦曲線的過程。

正弦函數(shù)；Silverlight&Blend；布局路徑；路徑動畫

筆者在制作正弦函數(shù)繪圖過程動畫時，為了實現(xiàn)“用筆畫線，線隨筆出”的效果，想到了Flash的路徑動畫。但是，Blend 4沒有提供直接的路徑動畫，手上教材中連路徑動畫的概念都沒有，網(wǎng)上偶有提及，但是或者不全，或者講得太復(fù)雜，甚至用到大篇的代碼，與Flash的路徑動畫相去甚遠。筆者綜合網(wǎng)上信息，進行多次試驗，終于發(fā)現(xiàn)Blend 4路徑動畫的實現(xiàn)并不復(fù)雜，由此做出的正弦函數(shù)繪圖過程動畫效果并不輸于Flash。制作過程的關(guān)鍵步驟及其要點如下：

一、描點

如圖1所示，通過旋轉(zhuǎn)半徑確定角度、生成正弦線、平移正弦線到展現(xiàn)點，實現(xiàn)描點動畫。整個過程一個動畫，命名為sb01。動畫只用到普通的關(guān)鍵幀動畫及線性插值動畫，這里不予細說。

二、畫線筆制作

動畫過程中，設(shè)計用鉛筆畫線。由于美工欠缺，若直接在設(shè)計視圖中繪制鉛筆，繪出來太不專業(yè)；若用現(xiàn)存圖片，背景又不好處理。因此可用圖像畫刷：先從網(wǎng)上下載一個鉛筆圖片， 再畫一個五邊形 （形狀Shapes→Pentagon），用鉛筆圖片填充該五邊形，可實現(xiàn)對鉛筆圖片的裁剪，效果見圖2。將鉛筆命名為pencil01。

三、動畫連線

1.繪制路徑

用鉛筆工具，沿著前面繪的點畫出正弦線。開始畫出的曲線一般不會很光滑，可用路徑選擇工具進行調(diào)節(jié)。可以用筆工具對路徑上的節(jié)點進行增減。

曲線繪制好后，復(fù)制一份。一個命名為path01，另一個命名為path02。

2.創(chuàng)建布局路徑

選擇path02，點鼠標右鍵，在彈出的菜單中選“路徑”→ “創(chuàng)建布局路徑”，于是，path02的上面自動生成一個“PathListBox”，將 pencil01拖到PathListBox下面，設(shè)計視圖中，鉛筆圖片也就綁定到了路徑path02上。

3.創(chuàng)建動畫

新建故事板，命名為sb02。選中PathListBox，屬性窗口中，展開布局路徑項，布局路徑下的Lay-outPath屬性有如下選項：

Distribution（排列方式）：Even（排滿）、Padded（間隔）；

Capacity（容量）：放置控件的數(shù)量。如果設(shè)為1，則該路徑上只能放一個控制項；

Padding（間隔距離）：Distribution設(shè)為Padded才有效；

Orientation（方向）：None（無）、OrientToPath（順著路徑），設(shè)為None時，運動對象不傾斜，設(shè)為OrientToPath時，運動對象沿路徑方向傾斜；

Start （開始位置）：運動對象在路徑上的開始位置，這是對象運動的關(guān)鍵項；

Span（寬度）：用于調(diào)整路徑的寬度。

開始時刻插入關(guān)鍵幀，Start值設(shè)為0%，最后位置插入關(guān)鍵幀，Start值設(shè)為100%。點播放，鉛筆動了起來。但是此時，鉛筆的位置不對。筆的中心點在路徑上，而不是筆尖在路徑上。

將path02的透明度設(shè)為0，并將path02向上移動，使筆尖剛好指在path01的開始位置。這樣，鉛筆雖然在沿著path02移動，但看起來是筆尖沿path01在移動。

再添加一個矩形，不要邊線，用白色填充，用來遮住鉛筆未到部分。

繼續(xù)編輯sb02，第一幀處矩形全部遮住path01，最后一幀矩形剛好到path01結(jié)尾。由于鉛筆走的是彎路，而矩形走的是直路，中間它們可能不同步，可以通過調(diào)節(jié)矩形動畫的關(guān)鍵幀使它們同步，結(jié)果如圖2所示。

結(jié)束語

用鉛筆工具繪制對象的運動路徑，創(chuàng)建布局路徑得到Path-ListBox，將運動對象拖入到Path-ListBox下，再創(chuàng)建故事板，設(shè)置PathListBox的LayoutPath屬性，即可實現(xiàn)路徑動畫，這是本制作的關(guān)鍵；圖像畫刷給非專業(yè)美工人員處理圖片提供了方便，常使制作錦上添花；結(jié)合關(guān)鍵幀動畫，可以使動畫過程得到準確控制。

（編輯：王天鵬）

G434

A

1673-8454（2012）04-0068-02