用Blend 4制作正弦函數繪圖過程動畫的關鍵步驟及其要點

杜衛杰，陳世華，艾訓儒

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

用Blend 4制作正弦函數繪圖過程動畫的關鍵步驟及其要點

杜衛杰1，陳世華2，艾訓儒3

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

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

正弦函數；Silverlight&Blend；布局路徑；路徑動畫

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

一、描點

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

二、畫線筆制作

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

三、動畫連線

1.繪制路徑

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

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

2.創建布局路徑

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

3.創建動畫

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

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

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

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

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

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

Span（寬度）：用于調整路徑的寬度。

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

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

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

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

結束語

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

（編輯：王天鵬）

G434

A

1673-8454（2012）04-0068-02