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

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

?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

?

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

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

總結(jié)

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

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