????經過前面的介紹和學習，我們分別掌握了如何點擊鼠標讓對象移動，并且實現2D人物的動作動畫。那么，如何將兩者完美的進行融合呢？這一節的內容將涉及到很多重要的技術及技巧，很關鍵哦。

??? 那么同樣的，前臺xaml還是保持不變，接下來看后臺C#第一部分：

??????? int count = 0;

??????? Image Spirit;

??????? Storyboard storyboard;

??????? public Window6() {

??????????? InitializeComponent();

??????????? Spirit = new Image();

????????? ??Spirit.Width = 150;

??????????? Spirit.Height = 150;

??????????? Carrier.Children.Add(Spirit);

??????????? Canvas.SetLeft(Spirit, 0);

??????????? Canvas.SetTop(Spirit, 0);

??????????? DispatcherTimer dispatcherTimer = new DispatcherTimer();

??????????? dispatcherTimer.Tick += new EventHandler(dispatcherTimer_Tick);

??????????? dispatcherTimer.Interval = TimeSpan.FromMilliseconds(150);

??????????? dispatcherTimer.Start();

??????? }

??????? private void dispatcherTimer_Tick(object sender, EventArgs e) {

? ??????????Spirit.Source = new BitmapImage((new Uri(@"Player\" + count + ".png", UriKind.Relative)));

??????????? count = count == 7 ? 0 : count + 1;

??????? }

??? 上面代碼基本上相對于前面幾節沒有太多改變，只是結合了第一節和第四節的內容。

??? 那么再看C#第二部分：

?? private void Carrier_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) {

??????????? Point p = e.GetPosition(Carrier);

??????????? Move(p);

???}

???private void Move(Point p) {

??????????? //創建移動動畫

??????????? storyboard = new Storyboard();

??????????? //創建X軸方向動畫

??????????? DoubleAnimation doubleAnimation = new DoubleAnimation(

????????????? Canvas.GetLeft(Spirit),

????????????? p.X,

????????????? new Duration(TimeSpan.FromSeconds(1))

??????????? );

??????????? Storyboard.SetTarget(doubleAnimation, Spirit);

??????????? Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath("(Canvas.Left)"));

??????????? storyboard.Children.Add(doubleAnimation);

??????????? //創建Y軸方向動畫

??????????? doubleAnimation = new DoubleAnimation(

????????????? Canvas.GetTop(Spirit),

????????????? p.Y,

????????????? new Duration(TimeSpan.FromSeconds(1))

??????????? );

??????????? Storyboard.SetTarget(doubleAnimation, Spirit);

??????????? Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath("(Canvas.Top)"));

??????????? storyboard.Children.Add(doubleAnimation);

??????????? //將動畫動態加載進資源內

??????????? if (!Resources.Contains("rectAnimation")) {

??????????????? Resources.Add("rectAnimation", storyboard);

??????????? }

??????????? //動畫播放

??????????? storyboard.Begin();

???}

??? 不難看出鼠標左鍵點擊事件中Move()方法，該方法大家如果熟悉第一節的話將非常好理解，通過將這兩段代碼進行合成，即可以實現鼠標點哪主角就向哪移動，同時主角的動畫始終保持為跑步狀態。

??? 那么該動畫并非完美，存在以下3個問題：

??? 一、主角始終為跑步狀態，那么能否當主角移動到目的地后即變成站立狀態呢？

??? of course，方法不要太多，這里我給大家一個小提示，例如我們可以dispatcherTimer_Tick事件中進行如下判斷：

??? if (storyboard != null && storyboard.GetCurrentTime() == TimeSpan.FromSeconds(1)) {

??????????? TODO...?

??????????? //主角的圖片源切換成站立系列幀圖片即可。

??? }

??? 當然此方法只是N多方法之一。

?? ?二、主角定位的坐標始終處于圖片的左上角，能否定位到主角的腳底，例如我鼠標點哪，主角移動到該處后腳的位置站在此點上，實現精確定位？

??? 這其實并不難，涉及到一個圖片定位算法問題，您需要設置一個Point Spirit_Position{get;set}屬性來存儲主角的坐標。并且該坐標的Spirit_Position.X，Spirit_Position.Y值分別定位到主角的腳底，如下圖：

??? 然后在以后的調用中都使用該坐標來取代Canvas.getLeft(),Canvas.getTop()。

??? 三、主角朝向如何實現8個方向，即往哪邊跑就朝向哪邊？

??? 這就是典型的算法問題了，其實也很簡單，根據主角移動的目標Target.X和Target.Y分別與主角初始位置的Old.X和Old.Y進行一個角度計算，然后根據判斷返回0-7(int)，8個數字分別代表8個朝向，這樣在Spirit.Source設置時就調用相應角度的圖片源系列幀即可。

??? 到此，我們已經能夠完美的實現角色的移動與停止等動畫，接下來的章節我將就地圖結構與主角在地圖中的處理進行詳細講解，敬請關注。

作者：深藍色右手
出處：http://alamiye010.cnblogs.com
教程目錄及源碼下載：點擊進入(歡迎加入WPF/Silverlight小組　WPF/Silverlight博客團隊)
本文版權歸作者和博客園共有，歡迎轉載。但未經作者同意必須保留此段聲明，且在文章頁面顯著位置給出原文連接，否則保留追究法律責任的權利。

總結

以上是生活随笔為你收集整理的C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial)：(六)完美移动的全部內容，希望文章能夠幫你解決所遇到的問題。

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