Silverlight 游戲開發小技巧：動感小菜單2

作者: nowpaper 來源: 博客園發布時間: 2011-02-14 23:02 閱讀: 706 次推薦: 0 原文鏈接 [收藏]

　　動感小菜單其實是想模仿Apple的菜單按鈕設計制作，但是畫虎不成反類犬，看起來有點別扭，昨天各位園友提了這方面的建議，感覺太硬如果加入動畫可能更好，非常感謝各位，而今天這篇的動感小菜單2，讓按鈕更加動感“柔”順：）期望能做的更好吧。

　　我們可以直接借助昨天的工程，在上面的基礎上修改，打開昨天的工程（Silverlight 游戲開發小技巧：動感小菜單）：

　　直接選定一個StackPanel的Group，然后按住Alt鍵復制一個，為了方便編程，這次我們將它制作成一個控件：

　　在結構里面直接選擇剛才Copy的組，點擊右鍵選擇Make Into UserControl，中文版是制作成為自定義用戶控件選項。

　　輸入一個名字，OK，就會自動進入到這個控件的編輯界面，關于自定義控件，我想其他的Blend教程有詳細介紹，這里只介紹技巧相關的內容。

　　現在我們進入到VS中編程，當然了，如果您喜歡在Blend里直接寫也可以，我個人比較習慣在VS里編輯：）

　　你可以在工程中找到剛才制作的控件，選擇對應的cs文件開始寫代碼吧。

　　首先，要設定IconCard的圖像（請一定參看前一篇，本篇是在前一篇中進行的擴展）

　　在Group3Control的構造函數中寫成這樣：

Code Snippet

public Group3Control()
{            
    InitializeComponent();
    for (int i = 0; i < Group3.Children.Count; i++)
    {
        var item = Group3.Children[i] as IconCard;
        item.RenderTransformOrigin = new Point(0.5, 0.5);
        item.RenderTransform = new ScaleTransform() { ScaleX = 1, ScaleY = 1 };
        item.IconIndex = i;
    }
}

　　前面看過的朋友應該不難理解，這時一個指定操作。

　　下面重寫控件的MouseEnter和MouseLeave的函數。

Code Snippet

protected override void OnMouseMove(MouseEventArgs e)
{
            
    foreach (var item in Group3.Children)
    {
        var t = item as IconCard;
        if (t == null)
            continue;
        double x = e.GetPosition(t).X - t.ActualWidth / 2;
        double y = e.GetPosition(t).Y - t.ActualHeight / 2;
        double mine = Math.Sqrt(x * x + y * y);
        double mineZoom = Zoom(1.2, mine, 72);
        (t.RenderTransform as ScaleTransform).ScaleX = mineZoom;
        (t.RenderTransform as ScaleTransform).ScaleY = mineZoom;
    }
    base.OnMouseLeave(e);
}
protected override void OnMouseLeave(MouseEventArgs e)
{
    foreach (var item in Group3.Children)
    {
        var t = item as IconCard;
        if (t == null)
            continue;
        (t.RenderTransform as ScaleTransform).ScaleX = 1;
        (t.RenderTransform as ScaleTransform).ScaleY = 1;
    }
 
    base.OnMouseLeave(e);
}
double Zoom(double m, double d, double s)
{
    if (d < s)
    {
        return (m * (d - s) * (d - s) / (s * s) + 1);
    }
    else
    {
        return 1.0;
    }
}