在這一節(jié)中，將會(huì)使用上故事板、變換、屬性等部分，一起使蝴蝶的翅膀扇動(dòng)，看起來更加自然，現(xiàn)在我們開始吧，在本文的最后面，會(huì)有源代碼和Silverlight演示。

?????首先先簡單設(shè)計(jì)一下界面，更加細(xì)致的設(shè)計(jì)工作我們在最后做調(diào)整，用Rectangle簡單進(jìn)行繪制，得到界面，然后就這么放著吧，我們最后才會(huì)使用上。

?

　　現(xiàn)在建立蝴蝶的控件，目的是將動(dòng)畫整合（如果不好理解控件的話，你可以理解成它就是Flash的影片）

　　創(chuàng)建新控件，將名字命名為Butterfly，在"對象和時(shí)間線"界面選擇UserControl，在屬性里講Width和Height設(shè)置成為128，而不是自動(dòng)，因?yàn)樽詣?dòng)會(huì)造成我們很多麻煩事，蝴蝶本身只有128x128。

　　然后將蝴蝶圖片托到框中對齊左上，復(fù)制一個(gè)放在右邊，下面我們做鏡像操作。

　　在屬性界面中選擇“變換”，找到鏡像的小圖片，選擇X軸翻轉(zhuǎn)。

　　下面我們要實(shí)現(xiàn)蝴蝶扇動(dòng)的效果，因?yàn)樯葎?dòng)是一個(gè)類似擠壓放縮的效果（這里沒有用Projection，為的是更加容易理解，在未來的篇章中會(huì)專門介紹Projection）。

　　如上圖所示在扇動(dòng)是按照中心放縮，如果你將一個(gè)軸進(jìn)行放縮，那么對齊中心點(diǎn)就不是中心點(diǎn)，Blend為了更好的理解使用整數(shù)1來表達(dá)整體，0.5代表的就是中心，將變換中心點(diǎn)設(shè)置到最右邊數(shù)值就是x：1，y：0.5，你會(huì)看到中間有一個(gè)小點(diǎn)移到右邊中心的位置，這時(shí)發(fā)生的放縮效果就以此為基準(zhǔn)了，你可以嘗試調(diào)整一下放縮中的X部分，很有趣吧，但是需要注意的是另外一半因?yàn)榻?jīng)過了翻轉(zhuǎn)，所以對齊點(diǎn)就不太一樣了，上面左下圖做了一個(gè)簡要的說明。

　　做動(dòng)畫，蝴蝶的一個(gè)翅膀，然后選擇建立新的故事板，輸入Flap（扇動(dòng)）的動(dòng)畫名，添加關(guān)鍵幀，選擇相應(yīng)的時(shí)間軸，將對應(yīng)的屬性進(jìn)行修改，注意，你可以看到整個(gè)畫布是用紅色框起來的，表示為動(dòng)畫操作模式，此時(shí)所有操作都會(huì)有可能記錄成為動(dòng)畫上的關(guān)鍵幀，在設(shè)置完成以后，我們看看效果。

?　　將兩邊的動(dòng)畫都做好了以后，直接選擇對象和時(shí)間線的動(dòng)畫名字，你會(huì)發(fā)現(xiàn)屬性的設(shè)置界面內(nèi)容發(fā)生變化，將AutoReverse構(gòu)選上，這時(shí)的播放會(huì)自動(dòng)播回去，咱們就不用再建立新的幀了。

?　? 然而，我們播放的效果卻是很單調(diào)，為了豐富它和讓動(dòng)畫看起來更加真實(shí)，再添加一個(gè)幀，并且將軌跡設(shè)置成前慢后快的曲線，這樣看起來就有點(diǎn)意思了。

　　下面我們實(shí)現(xiàn)一組代碼，這組代碼將實(shí)現(xiàn)如下的功能：

• 簡單的播放方法
• 可以改變屬性直接改變圖像

　　可能我這么說并不直觀，先按照下面的代碼敲進(jìn)去吧：）

?　　注意上面有一行引用命名空間，這會(huì)決定BitmapImage是不是可以用，當(dāng)然了，還有image和image1都是系統(tǒng)的名字，如果改了名字不要忘記改回來：）

　　好了，這次咱們將控件放到界面中，選擇MainPage，然后從資產(chǎn)中找到Butterfly控件，如果你沒找到，可以輸入快速查找——如果還沒找到，重新編譯一下項(xiàng)目就能看見。

?　　放入之后，我們就會(huì)用上剛才設(shè)置的屬性了，選擇剛剛放入的蝴蝶，然后在屬性面板里選擇雜項(xiàng)，看，出了一個(gè)編號(hào)，嘗試修改一下，哈，蝴蝶變成對應(yīng)的了，這是Blend提供的公用默認(rèn)屬性的設(shè)置，可以將public的屬性變成雜項(xiàng)直接進(jìn)行操作，這樣我們可以很容易控制控件的各種默認(rèn)狀態(tài)。

?　　現(xiàn)在擺出一個(gè)界面看看效果：

?

?　　還是老樣子，如果需要，請自行下載源代碼文件，請使用Blend打開，由于這個(gè)項(xiàng)目不是獨(dú)立項(xiàng)目，你可能需要獨(dú)立建立一個(gè)sln工程來搞定它。

?　　這一次可能沒有看到扇動(dòng)效果到底是什么樣的，包含上面的源代碼文件也沒有，但是你可以在下面看到我們在未來準(zhǔn)備實(shí)現(xiàn)的效果，期待第10節(jié)吧：）

總結(jié)

以上是生活随笔為你收集整理的Silverlight C# 游戏开发：Flyer09扇动翅膀的蝴蝶的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。