在這一節中，將會使用上故事板、變換、屬性等部分，一起使蝴蝶的翅膀扇動，看起來更加自然，現在我們開始吧，在本文的最后面，會有源代碼和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節吧：）

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。