WPF/Silverlight 遊戲開發教程 (6)：完美移動 — 幀動畫與位移動畫融合、三大缺憾與解決路徑

融合架構：DispatcherTimer 幀動畫 + Storyboard 位移動畫

int count = 0;
Image Spirit;
Storyboard storyboard;

public Window6()
{
    InitializeComponent();
    Spirit = new Image { Width = 150, Height = 150 };
    Carrier.Children.Add(Spirit);
    Canvas.SetLeft(Spirit, 0); Canvas.SetTop(Spirit, 0);

    var dt = new DispatcherTimer();
    dt.Tick += (s,e) => {
        Spirit.Source = new BitmapImage(new Uri(@$"Player\{count}.png", UriKind.Relative));
        count = count == 7 ? 0 : count + 1;
    };
    dt.Interval = TimeSpan.FromMilliseconds(150);
    dt.Start();
}

private void Carrier_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    Move(e.GetPosition(Carrier));
}

private void Move(Point p)
{
    storyboard = new Storyboard();

    var animX = new DoubleAnimation(Canvas.GetLeft(Spirit), p.X, new Duration(TimeSpan.FromSeconds(1)));
    Storyboard.SetTarget(animX, Spirit);
    Storyboard.SetTargetProperty(animX, new PropertyPath("(Canvas.Left)"));
    storyboard.Children.Add(animX);

    var animY = new DoubleAnimation(Canvas.GetTop(Spirit), p.Y, new Duration(TimeSpan.FromSeconds(1)));
    Storyboard.SetTarget(animY, Spirit);
    Storyboard.SetTargetProperty(animY, new PropertyPath("(Canvas.Top)"));
    storyboard.Children.Add(animY);

    if (!Resources.Contains("rectAnimation")) Resources.Add("rectAnimation", storyboard);
    storyboard.Begin();
}

點擊任意處，角色播放 8 幀跑步循環動畫，同時在 1 秒內線性移動至目標點。

三大缺憾與進階解決方案

朝向計算演算法詳解

int GetDirection(double dx, double dy)
{
    double angle = Math.Atan2(dy, dx) * 180 / Math.PI; // -180 ~ 180
    if (angle < 0) angle += 360; // 0 ~ 360
    // 0度=北(上)，順時針 8 方向，每象限 45 度
    int dir = (int)Math.Round(angle / 45) % 8;
    return dir; // 0=北, 1=東北, 2=東, 3=東南, 4=南, 5=西南, 6=西, 7=西北
}

DispatcherTimer_Tick 中根據 currentDirection 選擇圖片目錄：Spirit.Source = new BitmapImage(new Uri($@"Player_Dir{dir}\{frame}.png"));

總結與展望

本章完成「幀動畫 + 位移動畫」基礎融合，但距離「完美移動」尚有三大里程碑：動作狀態機、真實腳底定位、八方向朝向。下一章將引入地圖結構（背景、障礙物、矩陣），為 A* 尋路移動鋪路，並逐步攻克上述三大缺憾。

1. 上一篇文章： WPF/Silverlight 遊戲開發教程 (7)：傳說中的 A* 尋路算法 — 曼哈頓啟發式、矩陣構建、動態終點尋路
2. 下一篇文章： WPF/Silverlight 遊戲開發教程 (5)：2D 角色動畫實作二 — 圖集裁切法、CroppedBitmap 高效幀切換

關於C#

C# WinForms 使用 GDI+ 繪製自訂進度條控制項完整教學

內建 ProgressBar 樣式固定、難以客製化。本文示範

C# 檔案逐位元組比較：FileCompare 方法完整實作與效能優化

前言 判斷兩個檔案內容是否完全相同，最直觀的方法是逐位元組比

C# Dictionary/Hashtable 內部運作原理：GetHashCode 與 Equals 正確實作

Hashtable、Dictionary<TKey,

ASP.NET 資料繫結完整指南：單值/多值繫結、資料來源控制項與強型別集合

前言 ASP.NET 資料繫結讓開發者無需手寫連線、命令、格