Silverlight C# 遊戲開發：Flyer09扇動翅膀的蝴蝶

　　在這一節中，將會使用上故事板、變換、屬性等部分，一起使蝴蝶的翅膀扇動，看起來更加自然，現在我們開始吧，在本文的最後面，會有原始碼和Silverlight示範。

     首先先簡單設計一下介面，更加細緻的設計工作我們在最後做調整，用Rectangle簡單進行繪製，得到介面，然後就這麼放著吧，我們最後才會使用上。

 

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

　　建立新控制項，將名字命名為Butterfly，在"物件與時間軸"介面選擇UserControl，在屬性裡講Width和Height設定成為128，而不是自動，因為自動會造成我們很多麻煩事，蝴蝶本身只有128x128。

　　然後將蝴蝶圖片托到框中對齊左上，複製一個放在右邊，下面我們做鏡像操作。

　　在屬性介面中選擇“變換”，找到鏡像的小圖片，選擇X軸翻轉。

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

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

　　做動畫，蝴蝶的一個翅膀，然後選擇建立新的故事板，輸入Flap（扇動）的動畫名，添加主要畫面格，選擇相應的時間軸，將對應的屬性進行修改，注意，你可以看到整個畫布是用紅色框起來的，表示為動畫操作模式，此時所有操作都會有可能記錄成為動畫上的主要畫面格，在設定完成以後，我們看看效果。

 　　將兩邊的動畫都做好了以後，直接選擇物件與時間軸的動畫名字，你會發現屬性的設定介面內容發生變化，將AutoReverse構選上，這時的播放會自動播回去，咱們就不用再建立新的幀了。

 　  然而，我們播放的效果卻是很單調，為了豐富它和讓動畫看起來更加真實，再添加一個幀，並且將軌跡設定成前慢後快的曲線，這樣看起來就有點意思了。

　　下面我們實現一組代碼，這組代碼將實現如下的功能：

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

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

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

　　好了，這次咱們將控制項放到介面中，選擇MainPage，然後從資產中找到Butterfly控制項，如果你沒找到，可以輸入快速尋找——如果還沒找到，重新編譯一下項目就能看見。

 　　放入之後，我們就會用上剛才設定的屬性了，選擇剛剛放入的蝴蝶，然後在屬性面板裡選擇雜項，看，出了一個編號，嘗試修改一下，哈，蝴蝶變成對應的了，這是Blend提供的公用預設屬性的設定，可以將public的屬性變成雜項直接進行操作，這樣我們可以很容易控制控制項的各種預設狀態。

 　　現在擺出一個介面看看效果：

 

 　　還是老樣子，如果需要，請自行下載原始碼檔案，請使用Blend開啟，由於這個項目不是獨立項目，你可能需要獨立建立一個sln工程來搞定它。

 　　這一次可能沒有看到扇動效果到底是什麼樣的，包含上面的原始碼檔案也沒有，但是你可以在下面看到我們在未來準備實現的效果，期待第10節吧：）