如何通過程序方式創(chuàng)建Blend旋轉(zhuǎn)動(dòng)畫

陳世華

（湖北省恩施高中，湖北恩施 445000）

如何通過程序方式創(chuàng)建Blend旋轉(zhuǎn)動(dòng)畫

陳世華

（湖北省恩施高中，湖北恩施 445000）

用動(dòng)畫方式展現(xiàn)教學(xué)難點(diǎn)，無疑是教學(xué)信息化的重要成分。程序方式創(chuàng)建動(dòng)畫，不僅便于實(shí)現(xiàn)交互，而且易于復(fù)制以實(shí)現(xiàn)共享，提高開發(fā)效率。作者用Visual Studio 2010+Expression Blend 3制作動(dòng)畫，試圖通過從文本框輸入旋轉(zhuǎn)角度，實(shí)現(xiàn)任意角的動(dòng)畫。

程序設(shè)計(jì)；創(chuàng)建動(dòng)畫；旋轉(zhuǎn)角度

一、動(dòng)畫目標(biāo)

教學(xué)時(shí)，在兩個(gè)文本框中，分別輸入相差360°整數(shù)倍的兩角、互補(bǔ)兩角、互為相反數(shù)的兩角、相差180°的兩角等，以動(dòng)態(tài)、直觀地展示這些角度的重要關(guān)系。

二、界面對(duì)象設(shè)計(jì)

在Blend 3的設(shè)計(jì)視圖中，首先引入一張?jiān)趲缀萎嫲逯兄谱鞯淖鴺?biāo)系圖片，再加入兩個(gè)Button、兩個(gè) TextBox、一個(gè) Canvas，分別命名為 button01、button02、textbox01、textbox02、canvas01。在 canvas01 中，按住Shift鍵，畫一條線段，將該線段放置于坐標(biāo)系的軸上，使其左端點(diǎn)與坐標(biāo)原點(diǎn)重合，作為角的始邊。再復(fù)制粘貼兩條線段，分別命名為path01、path02，改變path02的粗細(xì)與顏色以便于區(qū)分。path01與path02將分別表示兩個(gè)角的終邊。雖然線段也可以通過程序代碼創(chuàng)建，但在設(shè)計(jì)視圖下創(chuàng)建更方便。

三、理解和使用轉(zhuǎn)換（Transform）

旋轉(zhuǎn)，要用到Blend 3的轉(zhuǎn)換（Transform），Transform包含了四種效果：旋轉(zhuǎn)（RotateTransform）、縮放（ScaleTransform）、扭曲（SkewTransform）和平移（TranslateTransform）。[1]

四、創(chuàng)建Double動(dòng)畫（DoubleAnimation）和故事板（Storyboard）實(shí)現(xiàn)動(dòng)畫

將以上代碼復(fù)制到button02的Click事件處理程序中，只需將path01改path02，就可實(shí)現(xiàn)第二條線段的動(dòng)畫。

五、說明

以上是C#代碼，難點(diǎn)在于設(shè)置動(dòng)畫的作用屬性一句，教材及網(wǎng)絡(luò)上，講得都不很詳細(xì)。由于后面的參數(shù)是一個(gè)長(zhǎng)長(zhǎng)的字符串，在Visual Studio中，也沒有方向性的錯(cuò)誤提示。

實(shí)際上，句中的“[0]”，數(shù)字是可變的。一個(gè)轉(zhuǎn)換組Transformgroup01可以包含多個(gè)轉(zhuǎn)換對(duì)象，比如兩個(gè)旋轉(zhuǎn)對(duì)象，此時(shí)，設(shè)置第二個(gè)旋轉(zhuǎn)對(duì)象的作用屬性時(shí)，就要改為“[1]”。

[1]章立民.大師講堂Silverlight2.0開發(fā)技術(shù)精粹.C#版[M].北京：北京科海電子出版社，2009.5.

[2]銀光志.Silverlight3.0開發(fā)詳解與最佳實(shí)踐[M].北京：清華大學(xué)出版社，2009.12.

TP311.1

B

1673-8454（2011）18-0073-02

（編輯：王天鵬）

*本文為廣東省科技型中小企業(yè)技術(shù)創(chuàng)新專項(xiàng)資金項(xiàng)目（項(xiàng)目編號(hào)：2009CD019）成果。