Silverlight 遊戲開發小技巧：軌迹跟随效果

我們通常在遊戲中有各種各樣的粒子效果，其中有一種就是跟随滑鼠發生的軌迹動畫，在滑鼠經過的地方會産生一些特效，這種方式我們在粒子當中經常使用，本篇使用一個簡單的例子再次将粒子系統改善，更加精簡更加高效。

如果有興趣的同學可以讀一下以前的

但是這今次實作方法更加簡單更加偏向于美術設計師，因為這次的程式設計将基本上在Blend中實作。

在繼續往下看之前，你需要了解MouseMove事件，以及基本的控件、故事闆的知識，隻有這樣在下面的操作中比較容易了解，而我們目的效果是，當滑鼠經過一個地方，會出現閃爍的小星星。

首先先建立工程，然後建立一個使用者控件UserControl，我們起名為FlashPoint，顧名思義這是一個閃爍的點點。

<a target="_blank" href="http://blog.51cto.com/attachment/201111/220114584.jpg"></a>

可能建立方式各有不同，但是我們隻是需要一個沒有填充色的LayoutRoot，然後在最左上為中心畫一個我們想要的圖形，當然了，你也可以使用圖檔。

<a target="_blank" href="http://blog.51cto.com/attachment/201111/220123416.jpg"></a>

現在建立一個故事闆動畫，同樣動畫的是怎麼編排可以看各自的需求設計。

<a target="_blank" href="http://blog.51cto.com/attachment/201111/220130261.jpg"></a>

在下面的例子中實作一個閃爍出現的小方塊然後漸隐消失掉。

<a target="_blank" href="http://blog.51cto.com/attachment/201111/220138984.jpg"></a>

選擇需要動畫的目标，添加一個關鍵幀，然後找到這個目标控件的變換屬性（Transform），設定為0，0，這樣在動畫播放的最開始是完全不可見。

<a target="_blank" href="http://blog.51cto.com/attachment/201111/220147299.jpg"></a>

然後拖動故事闆的時間線，在1秒的位置上增加另外一個關鍵幀，将關鍵幀上的XY放縮變換設定為1，1，設定位置就是第一個關鍵幀的地方。

<a target="_blank" href="http://blog.51cto.com/attachment/201111/220204167.jpg"></a>

現在選擇關鍵幀，我們可以使用Silverlight自帶的緩沖（Easing）方法，制作閃爍出現的效果，我們選擇Elastic Out的方法，你可以播放一下看看感覺：）

<a href="http://images.cnblogs.com/cnblogs_com/nowpaper/201102/201102030047143308.jpg"></a>

好了，最後在1.5秒的位置設定新的關鍵幀，将不透明度設定成0%，再次播放一下，你會看到一個突然蹦出的小方塊，然後消失掉的故事闆動畫。

<a target="_blank" href="http://blog.51cto.com/attachment/201111/220218643.png"></a>

好了，截止現在基本的粒子控件制作完畢，現在打開MainPage控件将背景設定成為灰色或者漸變色，因為上面的小方塊是白色的，為了更好看，并且把LayoutRoot從Grid改成Canvas，這樣可以友善我們對位置的操作，

<a target="_blank" href="http://blog.51cto.com/attachment/201111/220229809.png"></a>

下面就是Coding時間了，在這裡我将弄幾個小的技巧增加程式的便利性。

在FlashPoint.cs的類構造中，添加一行代碼，就是故事闆的開始動畫，比如說：Storyboard1.Begin();

現在打開VS或者在Blend裡修改.cs檔案，在MainPage.cs中加入滑鼠的移動事件或者重寫本身的OnMouseMove方法，我用的是重寫：）

public partial class MainPage : UserControl   

{   

public MainPage()   

InitializeComponent();   

}   

protected override void OnMouseMove(MouseEventArgs e)   

var pos = e.GetPosition(this);   

var point = new FlashPoint();   

LayoutRoot.Children.Add(point);   

Canvas.SetLeft(point,pos.X);   

Canvas.SetTop(point, pos.Y);   

base.OnMouseMove(e);   

好了，現在運作一下看看，

<a href="http://images.cnblogs.com/cnblogs_com/nowpaper/201102/201102030047312125.jpg"></a>

但是現在仍有很多的問題，比如這麼new出來的對象一定是非常多的，那麼怎麼才能正确的将控件對象移除掉呢？在我的另外一片有關于粒子文章中，使用的方式是計時器的循環運算，然後反着來周遊，将符合條件的移除掉，這是因為粒子具有很不确定的因素，是以需要周遊處理，更何況還涉及到軌迹的計算邏輯，雖然說我們比較明确動畫的時間長度，可以使用計時器從集合中RemoveAt，而這次我們将使用一個更加簡便的方法解決這個小瑕疵。請看下面的代碼

public FlashPoint()   

Storyboard1.Completed += new EventHandler(Storyboard1_Completed);   

Storyboard1.Begin();   

void Storyboard1_Completed(object sender, EventArgs e)   

Storyboard1.Completed -= Storyboard1_Completed;   

var parent = this.Parent as Panel;   

if (parent != null)   

parent.Children.Remove(this);   

這是我們自定義的控件FlashPoint的構造和事件代碼，在構造函數中注冊動畫完成事件，然後在完成的部分實作我們的具體邏輯，我們目的是讓父一級移除我們，是以先要判定是否是一個标準的Panel的容器，Panel類請參看官方Silverlight文檔。

實際展示效果：

本文轉自nowpaper 51CTO部落格，原文連結:http://blog.51cto.com/nowpaper/712786