WPF/Silverlight 遊戲開發教程 (1)：Storyboard 時間軸動畫入門 — 聲明式屬性漸變、Canvas 絕對定位、動態資源註冊

系列教程緣起與定位

自 QXGame (WPF GAME ENGINE) 發布以來，眾多開發者熱切期盼系統性教程。本系列將純 C# 代碼動態構建一切可視化物件，零 XAML 動畫標記，零 Blend 依賴，從零構建專業級 2D 遊戲引擎核心模組。開發環境：Visual Studio 2008 SP1 / .NET 3.5+。

WPF/Silverlight 核心優勢回顧

• WPF：桌面應用主流，Vista/Win7/Win10/11 原生支援，取代 WinForms，硬體加速向量渲染
• Silverlight：~4MB 迷你 .NET 執行環境，跨瀏覽器/跨平台，支援 C#/VB.NET/C++/NET，生態遠超 ActionScript/Flash
• 雙平台共享核心邏輯與渲染模型，一套代碼雙端部署 是最大紅利

第一章目標：Storyboard 實現「點擊任意處，方塊平滑移動過去」

1. XAML 佈局：Canvas 絕對定位容器

為何選 Canvas？ 唯一支援子元素 Canvas.Left/Top/ZIndex 絕對定位的面板，遊戲物件自由移動的必備條件。

2. 代碼後台：動態建立方塊與 Storyboard 移動動畫

Rectangle rect;

public Window1()
{
    InitializeComponent();
    rect = new Rectangle 
    { 
        Fill = Brushes.Red, Width = 50, Height = 50, RadiusX = 5, RadiusY = 5 
    };
    Carrier.Children.Add(rect);
    Canvas.SetLeft(rect, 0); Canvas.SetTop(rect, 0);
}

private void Carrier_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    Point p = e.GetPosition(Carrier); // 取得點擊處相對 Carrier 座標

    var sb = new Storyboard();

    // X 軸動畫
    var animX = new DoubleAnimation(
        Canvas.GetLeft(rect), p.X, 
        new Duration(TimeSpan.FromMilliseconds(500)));
    Storyboard.SetTarget(animX, rect);
    Storyboard.SetTargetProperty(animX, new PropertyPath("(Canvas.Left)"));
    sb.Children.Add(animX);

    // Y 軸動畫
    var animY = new DoubleAnimation(
        Canvas.GetTop(rect), p.Y, 
        new Duration(TimeSpan.FromMilliseconds(500)));
    Storyboard.SetTarget(animY, rect);
    Storyboard.SetTargetProperty(animY, new PropertyPath("(Canvas.Top)"));
    sb.Children.Add(animY);

    // 動態註冊資源 (Storyboard 必須在 Resources 中才能被識別啟動)
    if (!Resources.Contains("rectAnimation"))
        Resources.Add("rectAnimation", sb);

    sb.Begin(); // 啟動動畫
}

關鍵知識點解析

1. DoubleAnimation 三參數：From (當前值)、To (目標值)、Duration (過程時長)。WPF 自動計算中間插值。
2. PropertyPath "(Canvas.Left)"：附加屬性路徑語法，括號表示附加屬性。同理 (Canvas.Top)、(Canvas.ZIndex)、(UIElement.Opacity) 等。
3. Storyboard.SetTarget/SetTargetProperty：將動畫綁定到目標物件的目標屬性。
4. Resources.Add + Begin()：Storyboard 必須掛載在資源字典中才能正確解析時間軸並播放，否則無反應。

執行效果

按 Ctrl+F5，在銀色畫布上任意點擊，紅色圓角方塊在 500ms 內平滑滑動至點擊處。體驗聲明式時間軸動畫的核心魅力：只需定義「從哪裡、到哪裡、花多久」，其餘交給引擎。

Storyboard 本質：時間軸驅動的屬性插值

不同於傳統「逐幀翻圖」動畫，Storyboard 是層級無關的屬性插值系統：任何 DependencyProperty (雙精度、顏色、點、矩陣、幾何體...) 皆可動畫化。這是 WPF/Silverlight 超越 Flash 的架構級優勢。

下章預告

下一章介紹 CompositionTarget.Rendering：渲染管線級的每幀回調，適合大量物件同步更新、物理模擬、攝影機跟隨等全域高頻邏輯。