C++Builder 打造 Windows 2000 風格漸層進度條

前言

Windows 2000 開機/關機畫面的漸層進度條極具辨識度。本文採用「雙圖片循環平移」的巧思，僅用 TPanel、兩個 TImage 與一個 TTimer，無需複雜繪圖程式碼，即可在 C++Builder 中複刻此經典視覺效果。

素材準備：Photoshop 製作無縫漸層圖

1. 新建 300×20 像素空白圖片。
2. 選「直線漸變工具」，開啟漸變編輯器，選擇「橙、黃、橙」三色停點，確保最左與最右顏色相同。
3. 按住 Shift 從最左邊水平拖曳至最右邊，產生水平無縫漸層。
4. 另存為 BMP 或 JPG（如 gradient.bmp）。

關鍵：左右邊緣顏色必須一致，否則循環平移時會出現明顯斷層。

元件佈局與屬性設定

FormShow 事件：初始化雙圖片位置

void __fastcall TForm1::FormShow(TObject *Sender)
{
    // Image1 置於 Panel 左邊界
    Image1->Top    = 0;
    Image1->Left   = 0;
    Image1->Height = Panel1->Height;
    Image1->Width  = Panel1->Width;
    Image1->Stretch = true;

    // Image2 置於 Panel 左側外（負寬度），緊接 Image1 之後
    Image2->Top    = 0;
    Image2->Left   = -Panel1->Width;
    Image2->Height = Panel1->Height;
    Image2->Width  = Panel1->Width;
    Image2->Stretch = true;
}

Timer1 OnTimer 事件：同步平移產生流動感

void __fastcall TForm1::Timer1Timer(TObject *Sender)
{
    // 兩圖片同步向右移動 1 像素
    Image1->Left++;
    Image2->Left++;

    // 當 Image1 完全移出 Panel 右邊界，瞬間跳回左側外
    if (Image1->Left == Image1->Width)
        Image1->Left = -Image1->Width;

    // Image2 同理
    if (Image2->Left == Image1->Width)
        Image2->Left = -Image1->Width;
}

運作原理解析

兩張相同寬度的無縫漸層圖首尾相接，形成一個「無限長」的虛擬漸層帶。Timer 以固定速率將兩圖同步右移，當其中一張完全移出可視區時，立即將其瞬間移至另一張圖的左側外，形成無縫循環。人眼感知為連續流動的漸層光帶。

進階客製化建議

• 速度控制：調整 Timer.Interval 或每步移動像素數（如 Left += 2）。
• 方向反轉：改為 Left-- 並判斷 Left == -Width 重置，實現反向流動。
• 垂直進度條：操作 Top 與 Height，圖片改為垂直漸層。
• 進度控制：將 Panel.Width 乘以進度百分比，僅顯示部分區域，配合 ClipRect 或 AnimateWindow 實現真正的進度指示。
• 多色系切換：準備多組漸層圖，依狀態切換 Image.Picture。

優缺點評析

這個「以圖代碼」的技巧，展示了善用現有元件組合往往能以最小成本達到驚艷視覺效果的開發智慧。