C++ Builder 圖像特效實戰：中心擴散與百葉窗簾動畫詳解

核心思路

利用 TImage 控件的幾何屬性（Left/Top/Width/Height）與 TCanvas::CopyRect 像素級拷貝，配合定時器或循環延時，即可在無第三方庫情況下實現炫酷圖像進場動畫。

準備工作

1. 拖放 TImage (Name=Image1)，載入 BMP，設 AutoSize=true 或手動調整尺寸匹配圖片。
2. 放置兩按鈕：BtnZoom(中心擴散)、BtnBlinds(百葉窗簾)。

效果一：中心擴散

原理：從中心點開始，逐幀放大顯示區域，直到覆蓋完整圖片。

void __fastcall TForm1::BtnZoomClick(TObject *Sender) {
    int L = Image1->Left, T = Image1->Top;
    int W = Image1->Width, H = Image1->Height;
    for (int i = 0; i <= W; ++i) {
        // 計算當前幂顯示矩形（保持長寬比）
        Image1->Left   = L + (W - i) / 2;
        Image1->Top    = T + H/2 - i * H / W / 2;
        Image1->Width  = i;
        Image1->Height = i * H / W;
        Image1->Refresh(); // 強制重繪
        Sleep(10);         // 簡易延時，實際建議用 Timer
    }
    // 最後復原原始位置尺寸
    Image1->Left = L; Image1->Top = T; Image1->Width = W; Image1->Height = H;
}

效果二：百葉窗簾

原理：建立一個離屏 TBitmap，將源圖按水平條帶順序拷貝到目標畫布，形成「由上而下逐條顯示」視覺效果。

void __fastcall TForm1::BtnBlindsClick(TObject *Sender) {
    const int STRIPS = 16; // 葉片數
    Graphics::TBitmap* bmp = new Graphics::TBitmap();
    bmp->Width  = Image1->Width;
    bmp->Height = Image1->Height;

    int stripH = bmp->Height / STRIPS;
    for (int phase = 1; phase <= stripH; ++phase) {
        for (int s = 0; s < STRIPS; ++s) {
            int y = s * stripH;
            // 拷貝第 s 條帶的前 phase 行
            TRect src(0, y, bmp->Width, y + phase);
            TRect dst(0, y, bmp->Width, y + phase);
            bmp->Canvas->CopyRect(dst, Image1->Canvas, src);
        }
        // 將離屏位圖繪製到表單畫布（或另一 TImage）
        Form1->Canvas->Draw(Image1->Left, Image1->Top, bmp);
        Sleep(20);
    }
    delete bmp;
}

進階優化建議

• 雙緩衝防閃爍：所有繪圖操作在 TBitmap 完成後一次性 Draw 到可見控件。
• 使用 Timer 替代 Sleep：避免阻塞主執行緒，響應 WM_PAINT 保持界面流暢。
• 參數化特效引擎：將動畫邏輯封裝為 TImageEffect 類，支援「淡入/滑動/旋轉/像素化」等多種模式，通過策略模式切換。
• 高 DPI 適配：使用 ScaleFactor 修正坐標計算，確保 4K 螢幕下不變形。

舉一反三：更多創意特效

結語

掌握 TCanvas 像素操作與幾何變換，配合離屏繪圖、雙緩衝、定時器驅動，即可在 C++ Builder 中實現媲美 Web/遊戲引擎的 UI 動畫，為桌面應用注入靈魂。