《Filthy Rich Clients》讀書筆記（二）：讓 Swing 正確顯示 GIF 動畫

在 Swing 中使用 GIF 圖片實現簡易動畫看似直觀——JLabel.setIcon() 或重寫 paintComponent() 繪製 ImageIcon——但實際運行時往往會遇到幀率過快、動畫失真等問題。本文深入剖析 GIF 格式內部機制，揭示 Swing 預設渲染失效的根因，並提供基於幀元數據解析的修正方案。

一、常見做法與現象

// 方式一：直接設定 Icon
JLabel label = new JLabel(new ImageIcon("loading.gif"));

// 方式二：自訂繪製
public class ShowGifPanel extends JPanel {
    ImageIcon image = new ImageIcon("/root/opt/loading.gif");
    @Override
    public void paint(Graphics g) {
        g.drawImage(image.getImage(), 0, 0, this);
    }
}

理想情況下應平滑播放，但實際表現為「幀率極快、動畫閃爍或靜止」。嘗試將 GIF 拆解為多張圖片輪播雖可繞過問題，但增加美術成本與封包體積，非最佳解。

二、GIF 格式核心機制

要修正渲染，必須理解 GIF 內部結構：

1. 幀序列：GIF 由多張影像（幀）組成，動畫本質為連續顯示。
2. 第一幀為背景：第 0 幀尺寸最大，座標 (0,0)，作為畫布背景；後續幀僅包含變化區域，尺寸較小、位置偏移，需疊加在背景之上。
3. 幀簇渲染：顯示第 N 幀時，必須從「第一幀」開始疊加至第 N 幀，而非單獨顯示背景+當前幀。此「第一幀」由 disposalMethod 決定：值為 2（還原背景）的幀的下一幀即為新的「第一幀」。
4. 延遲時間：每幀擁有 delayTime（百毫秒），控制幀切換間隔。許多 GIF 此值為 0，導致 Swing 以最大速度播放。

三、Swing 與 SWT 的差異

SWT 透過 org.eclipse.swt.graphics.ImageData 完整解析幀元數據（含 disposalMethod、delayTime、位移），手動實現幀簇渲染迴圈，並可調整延遲因子校正幀率。Swing 標準 API 僅支援簡單循環，缺乏對 disposalMethod 與幀簇的處理，且 com.sun.imageio.plugins.gif.GIFImageMetadata 為內部類，版本號長期停留 0.5，文檔缺失，難以直接利用。

四、自製解析工具：GifAnalysis

開發 GifAnalysis.java 逐幀提取元數據對比，發現 loading.gif 所有幀 delayTime=0，證實幀率失控源於源檔案缺乏延遲資訊。美術端補齊 delayTime 即可修復；若無法修改源檔，需在程式端注入延遲因子。

五、參考實作：Gif.java

核心邏輯：

• 構造函數 Gif(File gifFile, int delayFactor) 接收延遲因子，動態調整幀間隔。
• 解析全幀序列與元數據，構建幀簇渲染緩衝區。
• 使用 javax.imageio.ImageReader 讀取幀與 GIFImageMetadata，手動實現 disposalMethod 邏輯與疊加繪製。
• 啟動定時器執行緒按修正後的延遲推進幀索引，觸發 repaint()。

// 關鍵參數調節範例
// loading.gif 建議 delayFactor = 105
// tt1.gif / javafx-loading-100x100.gif 建議 delayFactor = 10
Gif gif = new Gif(new File("loading.gif"), 105);
JLabel label = new JLabel(gif.getIcon()); // 取得實作 Icon 介面的動畫物件

六、總結與建議

1. 優先從源頭解決：要求美術輸出符合規範的 GIF（含正確 delayTime、disposalMethod）。
2. 程式端兜底：引入 Gif 類注入延遲因子，處理幀簇與 disposal 邏輯。
3. 避免拆幀輪播：增加維護成本，且無法處理透明度疊加等複雜情況。

完整原始碼包含 GifAnalysis.java（分析工具）與 Gif.java（渲染元件），可直接整合至專案。掌握 GIF 內部機制，才能在 Swing 中優雅地呈現動畫效果。