製作 GIF 動圖的方法（7）

Make an animated GIF from the command line (7)

【前言】

本篇的內容和前一篇大同小異，差在前一篇是先剪出有變動的矩形區域，而本篇是將有變動的部分用 GIMP 改成透明並做成遮罩 (mask)。

所用的影片是 "World Nature Video" 在 Youtube 的影片 "Scenery Of Mountains And Rivers With Natural Sounds And Music"。

銜接仍用淡出淡入重疊 19 格的方法，共須 38 畫格。

【步驟】

1. 抽出圖片。

ffmpeg -ss 14 -i source.mp4 -t 2 images\1%03d.png

影片速度是 24 fps，時長兩秒，共 48 畫格。前幾個的亮度稍有不同，所以取後面 38 個畫格，1011 到 1048。

2. 編輯圖片。

下載的版本是 1280x720，將之縮為 75%，960x540。

for /L %a in (1011,1,1048) do ^

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

3. 做遮罩圖。

　a. 選一張欲做為背景圖的畫格，現以 a1011.png 為例。

　b. 用 GIMP 選出變動區。

　　當然可以選下半部矩形區域，今特別示範不規則區域。

　　若不易直接選到邊緣，可先選接近邊緣的區域。

　　然後 [Select] > [Grow]。

　c. 改為透明。

　　若按 [Del] 鍵可成透明，那是最好，若成白色，用下法：

　　　[Select] > [Sharpen]

　　　按 [Del] 鍵（成白色）

　　　將前景色改為圖片中沒有的顏色，譬如藍色。

　　　[Bucket Fill] 將選取範圍改為此色。

 　　　[Colors] > [Color to Alpha] 將藍色改為透明；去除選取。

　d. 輸出為遮罩圖 mask.png。

4. 將固定背景貼到各畫格上。

for /L %a in (1011,1,1048) do ^

magick convert images\a%a.png images\mask.png -composite +repage images\b%a.png

註：因為背景都一樣，所以動圖的這個區域是不會動的。也是靠這個降低檔案尺寸。

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

c*.png 為對照組，d*.png 為固定背景組。

setlocal enabledelayedexpansion

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

set /a up=1010+%a & ^

set /a down=1048-19+%a & ^

set /a percent=5*%a & ^

set /a output=100+%a & ^

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

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

6. 製作動圖。

magick convert -delay 1x24 images\c*.png nature.gif

magick convert -delay 1x24 images\c*.png -fuzz 1% -layers OptimizeTransparency nature-1.gif

magick convert -delay 1x24 images\d*.png nature-mask.gif

magick convert -delay 1x24 images\d*.png -fuzz 1% -layers OptimizeTransparency nature-mask-1.gif

【後語】

1. 檔案尺寸比較：

未最佳化的動圖都近 7.2 MB。

1% 最佳化的動圖，未固定背景的約 1.73 MB，有固定的約 1.17 MB。但若轉為 mp4，前者 249 KB，後者 181 KB。

magick convert filename.gif filename.mp4

這樣就知道為什麼 Facebook 不讓人直接貼動圖了吧！就算用連結的，也會自動轉為 mp4。

2. 此為本系列的最後一篇。各位看倌應可依這七篇的方法，做出大部分的動圖。