有的老師來(lái)信詢(xún)問(wèn)講課中演示的文字書(shū)寫(xiě)動(dòng)畫(huà)如何制作，下面介紹一種設(shè)計(jì)方法。
T1-20 書(shū)寫(xiě)動(dòng)畫(huà)界面
這不是Flash動(dòng)畫(huà)。這種動(dòng)畫(huà)的制作方法和Flash不一樣，因?yàn)镋xpressionBlend中沒(méi)有橡皮擦工具，但同樣可以實(shí)現(xiàn)，如T1-20。動(dòng)畫(huà)界面由1個(gè)背景圖、2個(gè)靜止卷軸、一只毛筆和1個(gè)Textblock（書(shū)法研究）組成。其中背景圖和卷軸的設(shè)計(jì)已經(jīng)在卷軸動(dòng)畫(huà)中涉及，這里不再重復(fù)。動(dòng)畫(huà)形成這樣的效果：1支毛筆書(shū)寫(xiě)“書(shū)法研究”4個(gè)漢字，鼠標(biāo)左鍵點(diǎn)擊背景圖的矩形退出動(dòng)畫(huà)程序。
1、窗口設(shè)計(jì)
新建項(xiàng)目，MainWindow的Window屬性設(shè)置為：
“外觀”欄目中，WindowStyle-None；AllowsTransparency選中。
“畫(huà)筆”欄中“Background”和“BorderBrush”屬性均設(shè)為“無(wú)畫(huà)筆”。
以上設(shè)置后，窗口上方的控制條被取消，需要添加退出應(yīng)用的事件。
“布局”欄目中，Height=600，Width=800。
“公共屬性”欄目中，WindowStartupLocation-CenterScreen。
LayoutRoot屬性設(shè)置為：
“畫(huà)筆”欄目中，Background-無(wú)畫(huà)筆。
2、動(dòng)畫(huà)實(shí)現(xiàn)方案
ExpressionBlend的【工具】面板中目前沒(méi)有提供橡皮擦工具，書(shū)寫(xiě)文字的動(dòng)畫(huà)就要另外想辦法。下面我們以一個(gè)比較簡(jiǎn)單的漢字“大”說(shuō)明書(shū)寫(xiě)過(guò)程動(dòng)畫(huà)的一種設(shè)計(jì)方法。
這種設(shè)計(jì)方法的基本思路就是用無(wú)邊框、和文字背景同色的若干塊“矩形”覆蓋文字筆畫(huà)形狀（需要時(shí)要旋轉(zhuǎn)矩形），覆蓋從文字的最后筆畫(huà)形狀開(kāi)始，一直覆蓋到該文字的起筆，下圖是“大”子被矩形覆蓋后的形狀，為了說(shuō)明覆蓋情況，設(shè)置了矩形邊框，實(shí)際設(shè)置動(dòng)畫(huà)時(shí)沒(méi)有邊框。
每次覆蓋必須選中窗口的根布局，這樣覆蓋后的矩形形成了這樣的層次順序：后覆蓋的矩形處于前1個(gè)矩形的上層，起筆處于最上層，上層矩形的大小就不會(huì)有嚴(yán)格的尺寸限制（實(shí)際上只要覆蓋了筆畫(huà)形狀，矩形大小沒(méi)有嚴(yán)格限制，只要不影響上一筆畫(huà)的顯示即可，這給設(shè)計(jì)帶來(lái)方便），矩形的X軸或Y軸的軸向一般沿筆畫(huà)形狀方向。
這樣1個(gè)文字會(huì)有很多矩形，覆蓋完成后將這些矩形全部組合成1個(gè)組，為區(qū)分用被覆蓋的字作為組名。
T1-21 矩形覆蓋
矩形覆蓋和字體有直接關(guān)系，注意系統(tǒng)有無(wú)相應(yīng)的字體資源。【屬性】面板的“文本”欄中有字體的“嵌入”選擇項(xiàng)，需要時(shí)可以選擇。
T1-22 文字被矩形覆蓋后的對(duì)象和時(shí)間線面板
3、毛筆設(shè)計(jì)
毛筆由筆桿、筆頭和筆繩組成。筆桿是1個(gè)矩形，和卷軸的設(shè)計(jì)方法一樣。筆頭和筆繩用【工具】面板中的筆工具畫(huà)出形狀路徑，筆頭顏色采用漸變畫(huà)筆，筆繩用純色畫(huà)筆。最后用Grid組成1組，命名為“毛筆”。
4、故事板設(shè)計(jì)
建立1個(gè)故事板，從“書(shū)”字的起筆開(kāi)始針對(duì)覆蓋矩形設(shè)計(jì)動(dòng)畫(huà)，逐個(gè)進(jìn)行，每個(gè)矩形使用X或Y軸變換壓縮，以露出字的筆畫(huà)形狀，根據(jù)筆畫(huà)長(zhǎng)短選擇關(guān)鍵幀之間的時(shí)間間隔，時(shí)間間隔的末尾設(shè)置對(duì)應(yīng)矩形的“外觀”屬性中的“Visibility”為“Hidden”，依次逐一設(shè)計(jì)每個(gè)矩形直到“書(shū)”字的最后1筆的最后1個(gè)覆蓋矩形。
然后選中“毛筆”，從“書(shū)”字的起筆設(shè)計(jì)“毛筆”的位移動(dòng)畫(huà)，最好用鍵盤(pán)中的箭頭鍵移動(dòng)“毛筆”，直到“書(shū)”字的最后1筆的最后1筆。注意“毛筆”的位置變化、沿筆形的時(shí)間變化。設(shè)計(jì)完成后在【對(duì)象和時(shí)間線】面板將“書(shū)”字“鎖”定。每個(gè)字的設(shè)計(jì)方法是一樣的，但要注意字與子之間的“毛筆”運(yùn)動(dòng)。
注意“毛筆”應(yīng)放置在布局的最上層。
5、背景圖矩形的鼠標(biāo)左鍵單擊事件：
鼠標(biāo)左鍵單擊背景圖的矩形ExitRectangle將退出應(yīng)用程序，代碼是。
private voidExitRectangle_MouseLeftButtonDown(object sender,System.Windows.Input.MouseButtonEventArgs e)
{
Application.Current.Shutdown();
}
故事板動(dòng)畫(huà)對(duì)象涉及若干個(gè)矩形，故事板圖形不方便展示，請(qǐng)讀者參看光盤(pán)中的實(shí)例，不再列出。動(dòng)畫(huà)設(shè)計(jì)完成。
