[Part I. GIMP基礎功]

[Part II. 一種效果的誕生]
[Part III. Script-Fu的秘密]



顯示具有 第15章 簡易的動態效果 標籤的文章。 顯示所有文章
顯示具有 第15章 簡易的動態效果 標籤的文章。 顯示所有文章

15.1 GIMP與GIF動畫

動畫的基本觀念
  • 動畫,為連續播放數張相關聯的畫面。
  • 每一個畫面稱為一個畫格(frame),按照時間的順序,依次顯示各個畫格,持續一段固定的時間,通常為數十到數百毫秒。
  • 由於視覺暫留的特性,若各畫格主體前後有關聯,則觀賞者會覺得畫面中的主體有動態的變化。


  • 本章的範例很簡單,只是把相關聯的影像,按照時間順序排一起,如此產生有律動感的動畫。


GIMP不適合製作複製動畫的原因
  • 若只靠圖層面版手工打造動畫,當畫格變多,使用管理畫格會變得不容易。
  • XCF格式沒有對畫格做壓縮,也沒有對畫格與畫格之間做壓縮。

  • 練習過本章的範例之後,也許,讀者也會覺得GIMP不適合,大幅與多畫格動畫的製作。


其它工具
  • GIMP還有一個威力強大的動畫套件GAP,GIMP Animation Package。安裝GAP後,會增加一列名為Video的選單。GAP可將數張流水號排列的anim_######.xcf的圖檔轉成一張多圖層的動畫。GAP也可利用路徑曲線製作出物體位移的動畫。
  • 「濾鏡 / 動畫」的選單內,有幾個濾鏡可針對所開啟的圖形,做些處理自動,產生多圖層的動畫。


必須熟悉的工具
  • 用GIMP製作動畫,若完全用手工打造,最重要的兩個工具是:
    1. 圖層面版,提供眾多操作圖層的相關指令與運算。執行[影像] / 視窗 / 浮動式對話盒 / 圖層 【註1】 ,可啟動圖層面版。
    2. 動畫播放對話盒,執行[影像] / 濾鏡 / 動畫 / 播放 【註2】 ,可啟動控制動畫播放的對話盒。

  • 畫格的停留時間,設定於圖層名稱的尾端。


  • 變更圖層名稱的方法為:
    • 在圖層面版內,以滑鼠指標點選特定的圖層。
    • 對該圖層,按下滑鼠右鍵,在圖層的右鍵選單中,執行「修改圖層屬性」。
    • 而後會出現 了「圖層屬性」對話盒。
    • 將圖層名稱由「背景 複製本」改為eye_open(500ms)。
    • 500ms表示在播放該圖層會停留500毫秒。
小技巧
在圖層面版內,雙擊欲更名的圖層,亦可啟動「圖層屬性」對話盒。


選單及項目名稱的英文:
【註1】 [Image] / Windows / Dockable Dialogs / Layers
【註2】 [Image] / Filters / Animation / Animation Playback

15.2 關於GIF格式

GIF, Graphics Interchange Format
  • GIF格式支援多圖層、交錯顯示。GIF格式的透明色版 (Alpha Channel)為1-bit,因此的GIF格式不支援半透明的效果色版 ,但支援全透明的效果,因此去背的圖案仍可以儲存為GIF檔。
  • GIF格式是256色索引模式,使用非破壞性壓縮。而JPEG格式24-bit全彩模式,使用破壞性壓縮,但JPEG格式不支援多圖層及透明效果。

  • GIMP可處理的圖形顏色模式有:
    • RGB(24-bit全彩模式)
    • Grayscale(灰階模式)
    • Indexed(索引模式)
  • GIMP許多濾鏡與與功能,無法在索引模式下運作,若要處理GIF 格式的檔案,最好先執行[影像] / 圖片 / 模式 / RGB 【註1】 ,將該檔案轉為RGB模式。處理完,再執行[影像] / 圖片 / 模式 / 索引色 【註2】,而後存檔。
  • XCF為GIMP的原生檔案格式,支援多圖層與全彩,在動畫未完成之前,可以將儲存為XCF檔,方便紀錄完整的資訊。


索引色轉換
  • 由全彩模式轉為索引模式,顏色數由2的24次方色,降為256色。因此,風景照或人物照,不適合儲存為GIF檔。
  • 但是,由於網頁的圖片需要較小的檔案,以加快資料的傳輸,加上GIF格式多圖層、交錯顯示、透明效果的優點,使得GIF仍是廣泛流通的圖形格式。


  • 執行[影像] / 圖片 / 模式 / 索引色 【註3】,可將該影像轉為索引模式。
  • 在「索引色轉換」對話盒內,藉由控制色盤的顏色數目,可改變影像解析的品質與檔案的大小。



儲存為動畫
  • 執行[影像] / 檔案 / 另存新檔 【註4】
  • 出現「儲存圖片」對話盒,將該圖存為 eye_anim.gif 檔,按下「儲存」按鈕。
  • 接著,出現「匯出檔案」對話盒,點選「儲存為動畫」,按下「匯出」按鈕。
  • 而後,出現「儲存為GIF」對話盒 【註5】

  • 在「匯出檔案」對話盒,必須要點選「儲存為動畫」。


  • 在「儲存為GIF」 對話盒內,必須設定動畫相關的選項。

  • 上圖的設定為:
    • 勾選反覆循環的選項。
    • 畫格的延遲時間,預設為100 毫秒,也就是0.1秒,意謂著每秒有10個畫格。改變延遲時間,可改變動畫的播放速率。
    • 按下「儲存」按鈕後,便可以用瀏覽器或看圖軟體,來欣賞GIF動畫的效果。


選單及項目名稱的英文:
【註1】 [Image] / Image / Mode / RGB
【註2】 [Image] / Image / Mode / Indexed
【註3】 [Image] / Image / Mode / Indexed
【註4】 [Image] /File / Save As
【註5】 Save as GIF

15.3 眨眨我的眼

圖片來源
  • Draw是OpenOffice的繪圖程式,內建有簡易的幾何圖案。利用Draw繪製兩張圖片,一張是眼睛是開的,一張眼睛是閉的。
  • 將圖案匯出為 JPEG格式,檔名為eye_open.jpg與eye_close.jpg。以此來產生一個簡單又有趣的動畫。
  • 或可以自己使用鉛筆工具分別畫兩張。


複製、貼上、更名
  • 開啟張眼的影像eye_open.jpg,與瞇眼的影像eye_close.jpg


  • 切換至eye_open.jpg圖片視窗,執行[影像] / 檔案 / 另存新檔 【註1】 ,將該圖存為 eye_anim.xcf檔。
  • 切換至eye_open.xcf圖片視窗,而後在圖層面版內,按下「複製圖層」的按鈕,產生一個名字為「背景 複製本」的圖層。
  • 將「背景 複製本」這一圖層更名為eye_open(500ms)。
  • 將「背景」這一圖層更名為eye_close(500ms)。
  • 500ms表示,播放到該圖層時,會停留500毫秒。
  • 將eye_close.jpg圖片複製後,整個貼到eye_anim.xcf的eye_close圖層上。



測試動畫的效果
  • 執行[影像] / 濾鏡 / 動畫 / 播放 【註2】 ,啟動控制「動畫播放」的對話盒。
  • 按下「播放」按鈕,動畫開始播放。
  • 眼睛張開500ms,眼睛閉上500ms,一開一閉,眨個不停。


  • 也可將檔案存為GIF檔,而後以瀏覽器來觀看GIF的動畫。



選單及項目名稱的英文:
【註1】[Image] / File / Save As
【註2】[Image] / Filters / Animation / Animation Playback

15.4 文字動畫

圖片來源
  • 使用OpenOffice.org Draw,繪出笑臉圖案,附有一文字說明框。
  • 將圖案匯出,儲存為howareyou.tif


  • 使用GIMP開啟howareyou.tif,圖案如下所示。



複製、更名、修圖
  • 執行[影像] / 視窗 / 浮動式對話盒 / 圖層 ,可啟動圖層面版。
  • 按下「複製圖層」的按鈕五次,將這六個相同的圖層,由上而下,以依序更改名字為圖層6(100ms)、圖層5(100ms)、...... 、圖層1(100ms)。


  • howareyou.tif只有一個圖層,複製得到六個圖層。
  • 依次使用矩形選取工具,選取圖中特定區域,清除部分的文字與點號。



測試動畫的效果
  • 切換至howareyou.tif圖片視窗,執行[影像] / 檔案 / 另存新檔 【註1】 ,將該圖存為XCF檔,檔名為howareyou_anim.xcf。
  • 執行[影像] / 濾鏡 / 動畫 / 播放 【註2】 ,啟動控制「動畫播放」的對話盒。按下「播放」按鈕,動畫開始播放。
  • 也可將檔案存為GIF檔,而後以瀏覽器來觀看GIF的動畫。



選單及項目名稱的英文:
【註1】[Image] / File / Save As
【註2】[Image] / Filters / Animation / Animation Playback

15.5 更多關於 GIF 格式要注意的事項

  • 單一 GIF 動畫圖檔,最好不要超過 500 K Bytes
  • 雖然網路頻寬越來越充裕,500 K Bytes 其實很小。
  • 但是要考慮極端的情況,一旦圖檔太大,小的圖檔又很多張,網頁載入的時間太長,用戶可能會略去不看。
  • 超過 500 K Bytes 時,可能要考慮其它動畫的技術,例如,Flash、Javascript、HTML5。
  • 大幅的 GIF 動畫圖檔,例如, 400 x 300,可以將上限定為 2 M Bytes 。

15.6 如何發揮GIMP 製作動畫的功能

撰寫中 ......

  • 用 GIMP 製作動畫並不難, GIMP 特別適合製作,畫面只改變「幾項特徵的」動畫。
  • 第24章 波浪動畫(Waves)」就是最好的範例,利用迴圈,只改變波浪濾鏡的相位參數,就能「自動化」生成波浪的效果。

15.7 濾鏡效果的動態應用


  • 規律變動濾鏡的參數,是製作動畫的方法之一。
  • 製作雖然費時,操作卻不會太難。
  • 也就是,一直重複類似的操作操作流程,直到調整好所有的畫面效果。


備妥紅圓的標誌,圖層名為 Text
  • 產生一新的透明圖層。
  • 使用橢圓選區工具,產生圓形選取區並填上紅色
  • 選擇黑色,使用文 字工具,寫上「日本」兩字。
  • 將黑字與紅圓合併為單一圖層,結果如下圖所示。而後,再將圖層更名為 Text 。



動畫的圖層結構
  • 複製 Text 圖層11次,並更名,如下圖所示。
 
  • CCW 表示 counterclockwise 逆時鐘旋轉,表示執行[影像] / 濾鏡 / 扭曲 / Whirl and Pitch 【註1】 ,旋轉角度設正90度。
  • CCW1,數字1,表示執行 Whirl and Pitch 濾鏡一次(旋轉角度設正90度)。
  • 2表兩次,依此類推。
  • CW 表示 clockwise 順時鐘旋轉,表示執行[影像] / 濾鏡 / 扭曲 / Whirl and Pitch 【註2】,旋轉角度設負90度。
  • CW1,數字1,表示執行Whirl and Pitch濾鏡一次(旋轉角度負90度)。
  • 2表兩次,依此類推。
  • 選取 Background 圖層,將透明的部份填上白色。
  • Background 圖層與 Text 圖層都不執行 Whirl and Pitch 濾鏡。
  • (100ms) 表示畫格間的延遲時間為100 milliseconds。


展示 Whirl and Pitch 濾鏡的效果


  • 對 CW1 圖層,執行[影像] / 濾鏡 / 扭曲 / Whirl and Pitch 【註3】 ,旋轉角度設負90度。
 


  • 對 CCW1 圖層,執行[影像] / 濾鏡 / 扭曲 / Whirl and Pitch 【註4】,旋轉角度設正90度。
 


儲存為 GIF
  • 執行[影像] / 圖片 / 模式 / 索引色 【註5】 ,將該影像轉為索引模式。
  • 執行[影像] / 檔案 / 另存新檔 【註6】 ,出現「儲存圖片」對話盒,將該圖存為 jp_whirl.gif 檔,出現「儲存為GIF」對話盒(Save as GIF)。
  • 在「儲存為GIF」對話盒內,「反覆循環」要勾選,畫格間的延遲時間,可採用預設值100毫秒。




  • 存檔後,再重新載入 jp_whirl.gif ,會發現 GIF 畫格命名的規則,如下圖所示。



  • 執行[影像] / 濾鏡 / 動畫 / 播放 【註7】 ,啟動控制動畫播放對話盒。
  • 觀看動畫的效果,若覺得不流暢,可多增加幾個圖層。




選單及項目名稱的英文:
【註1】[Image] / Filters / Distorts / Whirl and Pitch
【註2】[Image] / Filters / Distorts / Whirl and Pitch
【註3】[Image] / Filters / Distorts / Whirl and Pitch
【註4】[Image] / Filters / Distorts / Whirl and Pitch
【註5】[Image] / Image / Mode / Indexed
【註6】[Image] / File / Save as
【註7】[Image] / Filters / Animation / Animation Playback


等價的 Python-Fu 程式碼
  • 接續前面的練習操作,改用 Python-Fu 自動化字體的生成流程。

  • 下面的程式碼,分成三大部份:
    • 首先,新增影像、新增圖層,圖層名為 Background ,此為最下方的圖層,產生一個紅圓。
    • pdb.gimp_text_fontname(...) 寫上「ABC」或寫上「日本」。
    • 產生順時針扭曲的圖層 CW1 ...... CW5 。產生逆時針扭曲的圖層 CCW5 ...... CCW1 。產生最上方的圖層 Text 。


# 圖片的尺寸
width = 256
height = 256

# 前景色設為黑色,背景色設為白色
black = (0, 0, 0)
white = (255, 255, 255)
red = (255, 0, 0)
pdb.gimp_context_set_foreground(black)
pdb.gimp_context_set_background(white)

diameter = width * 0.8 #直徑
offx = width/2 - diameter/2
offy = height/2 - diameter/2

img = pdb.gimp_image_new(width, height, RGB)
bg_layer = pdb.gimp_layer_new(img, width, height, RGBA_IMAGE, "Background", 100, NORMAL_MODE)
pdb.gimp_image_add_layer(img, bg_layer, 0)
pdb.gimp_display_new(img)

pdb.gimp_ellipse_select(img, offx, offy, diameter, diameter, 2, TRUE, FALSE, 0)
pdb.gimp_context_set_foreground(red)
pdb.gimp_edit_fill(bg_layer, FOREGROUND_FILL) 


string = "ABC"
font_size = 72
font = "Arial"

#string = "日本"
#font_size = 72
#font = "Sans"

text_ext = pdb.gimp_text_get_extents_fontname(string, font_size, PIXELS, font)
text_width = text_ext[0]
text_height= text_ext[1]
text_offx = width/2 - text_width/2
text_offy = height/2 - text_height/2

pdb.gimp_context_set_foreground(black)
tmp_layer = pdb.gimp_text_fontname(img, bg_layer, text_width, text_height ,string, 0, TRUE, font_size, PIXELS, font)
pdb.gimp_layer_set_offsets(tmp_layer, text_offx, text_offy)
pdb.gimp_floating_sel_anchor(tmp_layer)


layer_num = 5
layer_list = []
for i in range(0,layer_num):
  drw = pdb.gimp_layer_copy(bg_layer, TRUE)
  layer_list.append(drw)
  pdb.gimp_image_add_layer(img, layer_list[i], -1)
  # 產生圖層 CW1, CW2, CW3, CW4, CW5
  name = "CW" + str(i+1) + "(100ms)"
  pdb.gimp_drawable_set_name(layer_list[i], name)
  # 順時針旋轉
  for j in range(0,i):
    pdb.plug_in_whirl_pinch(img, layer_list[i], -90, 0, 1)
    # layer_list[0] 為 CW1 旋轉 1 次
    # i = 0 迴圈會執行 1 次

layer_list = []
for k in range(0,layer_num):
  i = layer_num - k -1
  drw = pdb.gimp_layer_copy(bg_layer, TRUE)
  layer_list.append(drw)
  pdb.gimp_image_add_layer(img, layer_list[k], -1)
  # 產生圖層 CCW5, CW4, CW3, CW2, CW1
  name = "CCW" + str(i+1) + "(100ms)"
  pdb.gimp_drawable_set_name(layer_list[k], name)
  # 逆時針旋轉
  for j in range(0,i):
    pdb.plug_in_whirl_pinch(img, layer_list[k], 90, 0, 1)
    # layer_list[0] 為 CCW5 旋轉 5 次
    # i = layer_num - k -1 = 5 - 0 -1 = 4
    # i = 4 迴圈會執行 5 次

# 產生最上方的圖層 Text
drw = pdb.gimp_layer_copy(bg_layer, TRUE)
pdb.gimp_image_add_layer(img, drw, -1)
name = "Text"+ "(100ms)"
pdb.gimp_drawable_set_name(drw, name)

  • 把上面的程式碼,貼到 GIMP Python Console 提示符號 >>> 之後。
  • 而後,可以將檔案存為 GIF 檔。
  • 下圖 GIF 動畫的延遲時間是 100 ms 。

15.8 混色工具的動態應用


讓人有暈眩的感覺。

混色工具,有許多種產生漸層的方法,有些並不常用,我使用螺旋(逆時針)與圓錐形(對稱)來產生這個動畫。


逆時針螺旋(ccw spiral)的漸層圖案
  • 新增256x256影像。
  • 在混色工具的選項面版內 【註1】 ,「形狀」項目設為螺旋(逆時針)(選單中的最後一個選項)。
  • 使用混色工具,從圖形的中心點向外拉一小條直線,線段的長度決定螺紋的疏密。
  • 執行[影像] / 色彩 / 界限值 【註2】 ,將旋轉式的漸層圖案變為黑白兩色的圖案。
  • 執行[影像] / 濾鏡 / 模糊化 / 高斯模糊 【註3】 ,模糊半徑設2。



圓錐狀(conical)的漸層圖案
  • 新增一圖層。
  • 在混色工具的選項面版內 【註4】 ,「形狀」項目設為圓錐形(對稱)。
  • 使用混色工具,從圖形的中心點,向右下角拉一條直線,產生圓錐狀的漸層。



以濾色 Screen 模式,重疊顯示
  • Conical 圖層與 Spiral 圖層以濾色混合模式,重疊顯示,讓 Spiral 圖層左上角有發光的感覺。
  • 調整 Conical 圖層的「透明度」,可改變左上角有發光的亮度。
  • 請注意,在圖層面版內Opacity 譯為「透明度」,但 Opacity 卻代表「不透明、不通透」的意思。





剪裁成圓形,改變角度,做出八層圖案
  • 合併 Conical 圖層與 Spiral 圖層,將影像剪裁成圓形,此時圖層名稱為 Spiral 。
 
  • 重複上述動作,改變製作圓錐狀的漸層所拉的直線的角度,產生不同的發光角度。
  • 也可複製多個相同的 Spiral 圖層(合併後的),使用旋轉工具來轉動圖案。
 
  • 此動畫總共有八個圖層。
  • 最下方的圖層要作為Background 圖層,是最先播放的圖層,將此圖層塗上橘色的底色。
 


儲存為 GIF
  • 執行[影像] / 圖片 / 模式 / 索引色 【註5】 ,將該影像轉為索引模式。
  • 執行[影像] / 檔案 / 另存新檔 【註6】 ,出現「儲存圖片」對話盒,將該圖存為 spiral_anim.gif 檔,出現「儲存為GIF」對話盒(Save as GIF)。
  • 在「儲存為GIF」對話盒內,「反覆循環」要勾選,畫格間的延遲時間可採用預設值100毫秒。
 

  • 存檔後,再重新載入spiral_anim.gif。
  • 會發現 GIF 畫格命名的規則,如下圖所示。



選單及項目名稱的英文:
【註1】Shape設Spiral (ccw)
【註2】[Image] / Colors / Threshold
【註3】[Image] / Filters / Blur / Gaussian Blur,Blur Radius設2
【註4】Shape設Conical(sym)
【註5】[Image] / Image / Mode / Indexed
【註6】[Image] / File / Save as


等價的 Python-Fu 程式碼
  • 接續前面的練習操作,改用 Python-Fu 自動化動畫的生成流程。

  • 下面的程式碼,分成四大部份:
    1. 首先,準備好新的影像,與所需的圖層。
    2. 產生螺紋的漸層,產生圓錐狀的漸層
    3. 改變角度,做出8畫格的動畫。若不包含背景,只需再做出7個畫格。
    4. 儲存為 GIF,再載入此檔案。

# Part 1.
# 圖片的尺寸
width = 256
height = 256
img = pdb.gimp_image_new(width, height, RGB)
bg_layer = pdb.gimp_layer_new(img, width, height, RGB_IMAGE, "Background", 100, NORMAL_MODE)
pdb.gimp_image_add_layer(img, bg_layer, 0)
# 底圖為橘色
orange = (252, 138, 5)
pdb.gimp_context_set_background(orange)
pdb.gimp_edit_fill(bg_layer, BACKGROUND_FILL)
# 將放置螺紋的圖案
spiral_layer = pdb.gimp_layer_copy(bg_layer, TRUE)
pdb.gimp_image_add_layer(img, spiral_layer, -1)
pdb.gimp_drawable_set_name(spiral_layer, "Spiral")
# 將放置圓錐狀的圖案
conical_layer = pdb.gimp_layer_copy(bg_layer, TRUE)
pdb.gimp_image_add_layer(img, conical_layer, -1)
pdb.gimp_drawable_set_name(conical_layer, "Conical")

pdb.gimp_display_new(img)


# Part 2.
center_x = width / 2
center_y = height / 2
start_x = center_x
start_y = center_y

# 前景色設為黑色,背景色設為白色
black = (0, 0, 0)
white = (255, 255, 255)
pdb.gimp_context_set_foreground(black)
pdb.gimp_context_set_background(white)

# 從圖形的中心點,向外拉一小條直線,線段的長度,決定螺紋的疏密
pdb.gimp_blend(spiral_layer, FG_BG_RGB_MODE, NORMAL_MODE, GRADIENT_SPIRAL_ANTICLOCKWISE, 100, 0, REPEAT_TRIANGULAR, FALSE, FALSE, 0, 0, 0, start_x, start_y, start_x + 8, start_y + 8)

pdb.gimp_threshold(spiral_layer, 127, 255)

# 從圖形的中心點,向右下角拉一條直線,產生圓錐狀的漸層
pdb.gimp_blend(conical_layer, FG_BG_RGB_MODE, NORMAL_MODE, GRADIENT_CONICAL_SYMMETRIC, 100, 0, REPEAT_NONE, FALSE, FALSE, 0, 0, 0, start_x, start_y, width - 1 , height - 1)
# 剪裁成圓形
pdb.gimp_ellipse_select(img, 0, 0, width - 1, height -1 ,  CHANNEL_OP_REPLACE, FALSE, FALSE, 0)
pdb.gimp_selection_shrink(img, 10)
pdb.gimp_selection_invert(img)
pdb.gimp_edit_clear(conical_layer)
pdb.gimp_edit_clear(spiral_layer)
pdb.gimp_selection_none(img)
opacity = 70
pdb.gimp_layer_set_opacity(conical_layer, opacity)
pdb.gimp_layer_set_mode(conical_layer, SCREEN_MODE)


# Part 3.
layer_num = 7
layer_list = []
for i in range(0,layer_num):
  spiral_tmp = pdb.gimp_layer_copy(spiral_layer, TRUE)
  pdb.gimp_image_add_layer(img, spiral_tmp, -1)
  drw_tmp = pdb.gimp_layer_copy(conical_layer, TRUE)
  layer_list.append(drw_tmp)
  pdb.gimp_image_add_layer(img, layer_list[i], -1)
  pdb.gimp_layer_set_mode(layer_list[i], SCREEN_MODE)
  angle = [0, -45, -90, -135, -180, -225, -270, -315]
  drw_tmp = pdb.gimp_drawable_transform_rotate_default(layer_list[i], angle[i], FALSE, center_x, center_y, INTERPOLATION_NONE, TRANSFORM_RESIZE_ADJUST)
  layer_list[i] = pdb.gimp_image_merge_down(img, drw_tmp, EXPAND_AS_NECESSARY)
  # 產生圖層 Conical1, ... , Conical7
  name = "Conical" + str(i+1) + "(100ms)"
  pdb.gimp_drawable_set_name(layer_list[i], name)

pdb.gimp_image_remove_layer(img, conical_layer)
bg_layer = pdb.gimp_image_merge_down(img, spiral_layer, EXPAND_AS_NECESSARY)
name = "Background"
pdb.gimp_drawable_set_name(bg_layer, name)


# Part 4.
pdb.gimp_convert_indexed(img, NO_DITHER, MAKE_PALETTE, 255, FALSE, FALSE, 0)
gif_file = "/tmp/spiral_anim.gif"
pdb.file_gif_save(img, bg_layer, gif_file, "", FALSE, TRUE, 100, 0)

img_gif = pdb.file_gif_load(gif_file, "")
pdb.gimp_display_new(img_gif)

  • 啟動 GIMP Python Console
  • 將前面的程式碼,依次序,全部選取、複製、再貼到 Python Console 提示符號 >>> 之後,按下 Enter 。
  • 過一會,就會看到結果圖,與其圖層結構。

  • 確定你也是在 Linux 環境下,有 /tmp 目錄。
  • 前往 /tmp 目錄,就會看到螺紋旋轉的動畫檔,其視效,如下圖所示。

  • 下圖是螺紋旋轉動畫 GIF 圖檔的圖層結構。

15.9 小島圖樣的動態應用

  • 可利用小島的圖樣來製作球體旋轉的動畫。


島嶼的圖案
  • 先執行[影像] / 檔案 / Create / Patterns / Land,使用預設參數,產生一張島嶼的圖案,尺寸為256 x 256。


  • 使用「Bottom 複製本」圖層,來製作動畫。
  • 記得要刪除 Bottom 圖層。



旋轉吧!球體
  • 執行[影像] / 濾鏡 / 動畫 / Spinning Globe,使用預設參數。
    • 由於,原影像是正方形的,而且是無接縫的。
    • 因此,圖案產生球狀的形變。
    • 球體旋轉時,不會看到接縫,好像一顆有海洋與陸地的星球。


  • 此動畫共有10個畫格,圖層結構如下所示。


等價的 Python-Fu 程式碼
  • 由於,使用 GIMP 內建的函數產生動畫,因此,下面的程式碼,很簡短。
  • 下面的程式碼,分成三大部份:
    1. pdb.script_fu_land(...) 產生小島圖案
    2. pdb.script_fu_spinning_globe(...) 10 格的動畫
    3. pdb.file_gif_save(...) 儲存為 GIF 動畫

# Part 1. 準備好一張小島圖案的影像
gradient = "Land 1"
pdb.gimp_context_set_gradient(gradient)
pdb.script_fu_land(256, 256, 32, 4, 60, 4, 4, 4, gradient)
img_array = gimp.image_list()
# 假設最新的影像是 land 這個影像視窗
img = img_array[0]
pdb.gimp_image_flatten(img)
drw = pdb.gimp_image_active_drawable(img)

# Part 2. 產生 10 個畫格的動畫
pdb.script_fu_spinning_globe(img, drw, 10, FALSE, TRUE, 63, TRUE)

img_array = gimp.image_list()
# 假設最新的影像是旋轉球體 spinning globe 這個影像視窗
img = img_array[0]

drw = pdb.gimp_image_active_drawable(img)

# Part 3. 儲存為 GIF 動畫檔
pdb.file_gif_save(img, drw, "/tmp/land_spinning_globe2.gif", "", FALSE, TRUE, 100, 2)

  • 啟動 GIMP Python Console
  • 將前面的程式碼,全部選取、複製、再貼到 Python Console 提示符號 >>> 之後,按下 Enter 。
  • 過一會,就會看到結果圖。
  • 確定你也是在 Linux 環境下,有 /tmp 目錄。
  • 前往 /tmp 目錄,就會看到旋轉球體的動畫檔。

15.10 畫面微微的晃動

  • 可利用「Script-Fu: Rippling」加上「Script-Fu: Blend」,製作出微微晃動的效果。


電漿圖案,漣波起伏的效果
  • 新增一張影像,尺寸為256 x 256。
  • 執行[影像] / 濾鏡 / 描繪 / 雲狀 / 電漿 【註1】,使用預設參數,產生一張電漿的圖案。

  • 執行[影像] / 濾鏡 / 動畫 / Rippling,使用預設參數,產生漣波動畫,畫格數目為15。
  • 執行[影像] / 濾鏡 / 動畫 / Blend,使用預設參數,讓漣波晃動的效果更柔和,產生的動畫其畫格數目為56。

Rippling動畫,畫格數15。
Blend動畫,畫格數56。



波光晃動的效果
  • 仿照上述操作,可製作海水微微起伏的效果。

靜止的海水。

漣波起伏,畫格數56。

電漿漣波起伏,等價的 Python-Fu 程式碼
  • 由於,使用 GIMP 內建的函數產生動畫,因此,下面的程式碼,很簡短。
  • 下面的程式碼,分成四大部份:
    1. pdb.plug_in_plasma(...) 產生電漿圖案
    2. pdb.script_fu_ripply_anim(...) 產生 15 格的動畫
    3. pdb.script_fu_blend_anim(...) 產生 56 格的動畫
    4. pdb.file_gif_save(...) 儲存為 GIF 動畫

# Part 1. 準備好一張電漿圖案的影像
# 影像的尺寸
width = 256;height = 256;
img_plasma = pdb.gimp_image_new(width, height, RGB)
drw_plasma = pdb.gimp_layer_new(img_plasma, width, height, RGB_IMAGE, "Plasma", 100, NORMAL_MODE)
pdb.gimp_display_new(img_plasma)
pdb.gimp_image_add_layer(img_plasma, drw_plasma, 0)
# Plasma 所使用的參數值
seed = 0; turbulence = 1
pdb.plug_in_plasma(img_plasma, drw_plasma, seed, turbulence)

# Part 2. 產生 15 個畫格的動畫
pdb.script_fu_ripply_anim(img_plasma, drw_plasma, 3, 15, 0)
img_array = gimp.image_list()
# 假設「最新的影像」是「Rippling動畫效果」這個影像視窗
img1 = img_array[0]
drw1 = pdb.gimp_image_active_drawable(img1)

# Part 3. 產生 56 個畫格的動畫
pdb.script_fu_blend_anim(img1, drw1, 3, 0, TRUE)
img_array = gimp.image_list()
# 假設「最新的影像」是「Rippling+Blend動畫效果」這個影像視窗
img2 = img_array[0]
drw2 = pdb.gimp_image_active_drawable(img2)

# Part 4. 儲存為 GIF 動畫檔
pdb.gimp_convert_indexed(img1, NO_DITHER, MAKE_PALETTE, 255, FALSE, FALSE, 0)
gif_file = "/tmp/plasma_rippling_anim.gif"
pdb.file_gif_save(img1, drw1, gif_file, "", FALSE, TRUE, 100, 2)

pdb.gimp_convert_indexed(img2, NO_DITHER, MAKE_PALETTE, 255, FALSE, FALSE, 0)
gif_file = "/tmp/plasma_rippling_and_blend_anim.gif"
pdb.file_gif_save(img2, drw2, gif_file, "", FALSE, TRUE, 100, 2)



海水微微起伏,等價的 Python-Fu 程式碼
  • 由於,使用 GIMP 內建的函數產生動畫,因此,下面的程式碼,很簡短。
  • 下面的程式碼,分成四大部份:
    1. pdb.file_uri_load(...) 載入海水的影像
    2. pdb.script_fu_ripply_anim(...) 產生 15 格的動畫
    3. pdb.script_fu_blend_anim(...) 產生 56 格的動畫
    4. pdb.file_gif_save(...) 儲存為 GIF 動畫

# Part 1. 指定 uri 載入海水的影像
# 靜止海水影像的 uri
file_uri = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRrBvVJxfo6kQwXjWI873OQo371PiXoFb2df0KR814SDMZPmxFkS2B86-ECex8OAvZDqqr-1DG3W_92PZc7fB4HcmLTEVNYB9hSHIeAVUM15ZKEaRdYQLo6hRL-uRvVLdy4QDgDCFHTNSa/s400/seawater.jpg"
#file_uri = "file:///tmp/seawater.jpg" # 也可先儲存在 /tmp 目錄內
img_sea = pdb.file_uri_load(file_uri, file_uri)
drw_sea = pdb.gimp_image_get_active_layer(img_sea)
pdb.gimp_drawable_set_name(drw, "Sea Water")
pdb.gimp_display_new(img_sea)

# Part 2. 產生 15 個畫格的動畫
pdb.script_fu_ripply_anim(img_sea, drw_sea, 3, 15, 0)
img_array = gimp.image_list()
# 假設「最新的影像」是「Rippling動畫效果」這個影像視窗
img1 = img_array[0]
drw1 = pdb.gimp_image_active_drawable(img1)

# Part 3. 產生 56 個畫格的動畫
pdb.script_fu_blend_anim(img1, drw1, 3, 0, TRUE)
img_array = gimp.image_list()
# 假設「最新的影像」是「Rippling+Blend動畫效果」這個影像視窗
img2 = img_array[0]
drw2 = pdb.gimp_image_active_drawable(img2)

# Part 4. 儲存為 GIF 動畫檔
pdb.gimp_convert_indexed(img1, NO_DITHER, MAKE_PALETTE, 255, FALSE, FALSE, 0)
gif_file = "/tmp/sea_rippling_anim.gif"
pdb.file_gif_save(img1, drw1, gif_file, "", FALSE, TRUE, 100, 2)

pdb.gimp_convert_indexed(img2, NO_DITHER, MAKE_PALETTE, 255, FALSE, FALSE, 0)
gif_file = "/tmp/sea_rippling_and_blend_anim.gif"
pdb.file_gif_save(img2, drw2, gif_file, "", FALSE, TRUE, 100, 2)

  • 啟動 GIMP Python Console
  • 將前面的程式碼,全部選取、複製、再貼到 Python Console 提示符號 >>> 之後,按下 Enter 。
  • 過一會,就會看到結果。
  • 結果圖與前面相同,可參考「漣波起伏,畫格數56」
  • 確定你也是在 Linux 環境下,有 /tmp 目錄。
  • 前往 /tmp 目錄,就會看到微微起伏的海水的動畫檔。