Delphi 圖形顯示特效大全：推拉、交錯、雨滴、百葉窗、積木五大演算法實作

核心原理

所有特效基於同一模式：

1. 以 TImage 載入原始圖片作為緩衝區
2. 建立同尺寸 TBitmap 作為動態合成目標
3. 利用 Canvas.CopyRect 將來源畫布矩形區域複製到目標畫布對應區域
4. 每一幀合成後立即 Form.Canvas.Draw 顯示，形成動畫

五大特效演算法

1. 推拉效果（上拉示例）

原理：逐行從源圖頂部複製到目標圖底部，視覺上圖片從下方推入。

procedure TForm1.BtnPullUpClick(Sender: TObject);
var
  Bmp: TBitmap; I, H, W: Integer;
begin
  Bmp := TBitmap.Create;
  try
    Bmp.Width := Image1.Width; Bmp.Height := Image1.Height;
    H := Image1.Height; W := Image1.Width;
    for I := 0 to H do
    begin
      Bmp.Canvas.CopyRect(Rect(0, H-I, W, H),
        Image1.Canvas, Rect(0, 0, W, I));
      Canvas.Draw(120, 100, Bmp);
      Application.ProcessMessages;  // 讓 UI 更新
    end;
  finally Bmp.Free; end;
end;

下拉、左拉、右拉同理調整 Rect 參數。

2. 垂直交錯效果

原理：奇數掃描線從上往下、偶數掃描線從下往上同步複製，雙向匯聚。

procedure TForm1.BtnVInterlaceClick(Sender: TObject);
var
  Bmp: TBitmap; I, J, H, W: Integer;
begin
  Bmp := TBitmap.Create;
  try
    Bmp.SetSize(Image1.Width, Image1.Height);
    H := Image1.Height; W := Image1.Width;
    I := 0;
    while I <= H do
    begin
      J := I;
      while J > 0 do
      begin
        // 奇數線：從下往上
        Bmp.Canvas.CopyRect(Rect(0, J-1, W, J),
          Image1.Canvas, Rect(0, H-I+J-1, W, H-I+J));
        // 偶數線：從上往下
        Bmp.Canvas.CopyRect(Rect(0, H-J, W, H-J+1),
          Image1.Canvas, Rect(0, I-J, W, I-J+1));
        Dec(J, 2);
      end;
      Canvas.Draw(120, 100, Bmp);
      Application.ProcessMessages;
      Inc(I, 2);
    end;
  finally Bmp.Free; end;
end;

3. 水平交錯效果

原理：同垂直交錯，改為左右兩側向中間匯聚。

procedure TForm1.BtnHInterlaceClick(Sender: TObject);
var
  Bmp: TBitmap; I, J, H, W: Integer;
begin
  Bmp := TBitmap.Create;
  try
    Bmp.SetSize(Image1.Width, Image1.Height);
    H := Image1.Height; W := Image1.Width;
    I := 0;
    while I <= W do
    begin
      J := I;
      while J > 0 do
      begin
        Bmp.Canvas.CopyRect(Rect(J-1, 0, J, H),
          Image1.Canvas, Rect(W-I+J-1, 0, W-I+J, H));
        Bmp.Canvas.CopyRect(Rect(W-J, 0, W-J+1, H),
          Image1.Canvas, Rect(I-J, 0, I-J+1, H));
        Dec(J, 2);
      end;
      Canvas.Draw(120, 100, Bmp);
      Application.ProcessMessages;
      Inc(I, 2);
    end;
  finally Bmp.Free; end;
end;

4. 雨滴效果

原理：從底部向上，每一條掃描線依序「掃過」畫面頂端到當前位置，留下軌跡。

procedure TForm1.BtnRainClick(Sender: TObject);
var
  Bmp: TBitmap; I, J, H, W: Integer;
begin
  Bmp := TBitmap.Create;
  try
    Bmp.SetSize(Image1.Width, Image1.Height);
    H := Image1.Height; W := Image1.Width;
    for I := H downto 1 do
      for J := 1 to I do
      begin
        Bmp.Canvas.CopyRect(Rect(0, J-1, W, J),
          Image1.Canvas, Rect(0, I-1, W, I));
        Canvas.Draw(120, 100, Bmp);
        Application.ProcessMessages;
      end;
  finally Bmp.Free; end;
end;

5. 百葉窗效果

原理：將圖片分 N 組（預設 16 組），每組內部逐行依序顯示，組與組平行推進。

procedure TForm1.BtnBlindClick(Sender: TObject);
var
  Bmp: TBitmap; I, J, H, W, Groups, RowsPerGroup: Integer;
begin
  Bmp := TBitmap.Create;
  try
    Bmp.SetSize(Image1.Width, Image1.Height);
    H := Image1.Height; W := Image1.Width;
    Groups := 16;
    RowsPerGroup := H div Groups;
    for I := 0 to RowsPerGroup do
      for J := 0 to Groups - 1 do
      begin
        Bmp.Canvas.CopyRect(Rect(0, RowsPerGroup*J+I-1, W, RowsPerGroup*J+I),
          Image1.Canvas, Rect(0, RowsPerGroup*J+I-1, W, RowsPerGroup*J+I));
        Canvas.Draw(120, 100, Bmp);
        Application.ProcessMessages;
      end;
  finally Bmp.Free; end;
end;

6. 積木效果（雨滴變體）

原理：每次複製一塊矩形區塊（預設高 10 像素），而非單行。

procedure TForm1.BtnBlockClick(Sender: TObject);
var
  Bmp: TBitmap; I, J, H, W, BlockH: Integer;
begin
  Bmp := TBitmap.Create;
  try
    Bmp.SetSize(Image1.Width, Image1.Height);
    H := Image1.Height; W := Image1.Width;
    BlockH := 10;
    I := H;
    while I > 0 do
    begin
      for J := BlockH to I do
      begin
        Bmp.Canvas.CopyRect(Rect(0, J-BlockH, W, J),
          Image1.Canvas, Rect(0, I-BlockH, W, I));
        Canvas.Draw(120, 100, Bmp);
        Application.ProcessMessages;
      end;
      Dec(I, BlockH);
    end;
  finally Bmp.Free; end;
end;

效能優化建議

• 雙緩衝：建立離屏 TBitmap 合成完畢後一次 BitBlt 到螢幕，減少閃爍
• 計時器驅動：將每幀拆分到 TTimer 或執行緒，避免阻塞主執行緒
• DirectX/OpenGL：大尺寸圖片、高幀率需求請改用 GPU 加速
• 釋放資源：try..finally Bmp.Free 確保記憶體不洩漏

測試環境

原文驗證環境：Delphi 3.0、Pentium 100MHz 相容機，效果流暢。現代硬體可支援更高解析度與幀率。