製作 GIF 動圖的方法（6）

Make an animated GIF from the command line (6)

【前言】

前面網誌曾言：動圖的最大問題是檔案太大；而最常用的解決辦法是縮小畫面，所以前文的圖都不大。但有一種狀況是可以用較大的畫面，那就是有變化的區域只佔整個畫面的一部分；也就是說，大部分的畫面是靜止不動的。譬如，在一場景中，有一物體只在一小範圍內有變動，其餘範圍是固定不變的。

此時，可將有變動的區域剪下來，貼到某一畫格中，才做成動圖。也就是說，在這一系列的畫格中，不動的區域是來自同一畫格。利用製作動圖時的最佳化 optimizetransparency，將此區域變成透明，即可降低檔案尺寸。

本文即示範此法，所用的影片是 Annie Drury - River Flows。同樣地，下載後，改名為 source.mp4。

前面網誌也曾言及，淡出淡入重疊法中，最極端的是所有畫格前半淡入，後半淡出，全部重疊。本文也同時示範此法，以重疊 19 個畫格舉例。

要重疊 19 畫格，全部就須要 38 個畫格，不多不少。所以一開始從影片抽出圖片時，即取此數。

【步驟】

1. 抽出圖片。

ffmpeg -ss 15 -i source.mp4 -vframes 38 images\1%3d.png

　-vframes: 設定所取畫格數。

2. 編輯圖片。

下載高解析的版本是 1280x720，可能太大了一點，將之縮為 75%，960x540。一般的動圖不會這麼大。

for /L %a in (1001,1,1038) do ^

magick convert images\%a.png -resize 75% +repage images\b%a.png

3. 製作未處理的動圖。

未最佳化：

magick convert -delay 1x30 images\b*.png river-original.gif

最佳化：

magick convert -delay 1x30 images\b*.png -fuzz 1% -layers OptimizeTransparency river-original-1.gif

4. 製作淡出淡入又重疊的畫格。

此為對照組，依常法製作。

setlocal enabledelayedexpansion

for /L %b in (1,1,19) do ^

set /a up=1000+%b & ^

set /a down=1038-19+%b & ^

set /a percent=5*%b & ^

set /a output=100+%b & ^

magick convert images\b!down!.png images\b!up!.png -compose dissolve -define compose:args=!percent! -composite images\c!output!.png

5. 製作動圖。

未最佳化：

magick convert -delay 1x30 images\c*.png river-dissolve.gif

最佳化：

magick convert -delay 1x30 images\c*.png -fuzz 1% -layers OptimizeTransparency river-dissolve-1.gif

6. 剪出變動。

全圖 960x540，以左上角為 (0, 0)，有變化的部分在下方 (0, 430) 到 (960, 540)。

for /L %a in (1001,1,1038) do ^

magick convert images\b%a.png -crop 960x110+0+430 +repage images\d%a.png

7. 貼至背景。

任一圖皆可為背景圖，現以第一圖 b1001.png 為例。

for /L %a in (1001,1,1038) do ^

magick convert images\b1001.png images\d%a.png -geometry +0+430 -composite +repage images\e%a.png

步驟 6 和 7 可合併做。此處為了說明，才分成兩步驟。

8. 製作淡出淡入又重疊的畫格。

此為固定背景組。

setlocal enabledelayedexpansion

for /L %b in (1,1,19) do ^

set /a up=1000+%b & ^

set /a down=1038-19+%b & ^

set /a percent=5*%b & ^

set /a output=100+%b & ^

magick convert images\e!down!.png images\e!up!.png -compose dissolve -define compose:args=!percent! -composite images\f!output!.png

9. 製作動圖。

未最佳化：

magick convert -delay 1x30 images\f*.png river-fixedbg.gif

最佳化：

magick convert -delay 1x30 images\f*.png -fuzz 1% -layers OptimizeTransparency river-fixedbg-1.gif

【後語】

1. 六個動圖皆有失真的現象，這是轉為 GIF 的關係，因為此格式最多只有 256 色。

2. 下表列出上述六個動圖的檔案尺寸：

-------------------------------

檔名　　　　　尺寸 (KB)

-------------------------------

river-original　　13350

river-original-1　1892

river-dissolve　　6600

river-dissolve-1　1237

river-fixedbg　　6623

river-fixedbg-1　 874

-------------------------------

三個未最佳化的動圖中，未重疊處理的 (river-original) 是有處理的 (river-dissolve / river-fixedbg) 兩倍，這很正常，因為前者有 38 畫格，而後者 19 畫格。

未重疊處理的 (river-original) 經最佳化後 (river-original-1)，減為 14%，的確令人驚艷。

有重疊處理的兩個比較， 固定背景的 (river-fixedbg-1) 是比未固定的 (river-dissolve-1) 小。