庖丁解牛：GIF圖片原理和儲存結構

　　GIF是一種使用LZW壓縮，支援多張影像的容器。支援256色，透明通道為1bit。作為網際網路表情包的載體，GIF這項80年代的技術依然生生不息。

　　但它的弊端也是顯而易見的：易出現毛邊，色彩表現低劣，檔案壓縮比不高。針對這些問題，Mozilla釋出了APNG來代替老舊的GIF技術，同時許多開源元件也用WebP格式來代替GIF。

　　GIF在iOS的尷尬處境

　　長久以來，iOS一直被吐槽不能用GIF。造成這一局面的主要原因是：

• iOS關於照片的場景不會自動播放GIF,也沒有角標。
• 一些應用將GIF視為靜態影像去操作，導致使用者保持了一個GIF後，結果應用將其儲存成JPG。
• iOS只能通過imageI/O去操作GIF資料，UIKit對其絕緣。

　　GIF的儲存結構

　　由於歷史的原因，GIF有兩個版本，但它們的檔案結構是一樣的，都是由不同用途的資料塊構成，可分為控制塊和資料塊。控制塊裡是決定GIF表現的引數，資料塊裡的資料由前面的控制塊裡的引數來解釋。

　　一個GIF檔案的內部結構如下圖：

　　Header：包含檔案簽名與版本號。

　　Trailer: 檔案結束識別符號。

　　GIF Data: Header 與 trailer 之間就是GIF檔案的資料。

　　我們從一個簡單的GIF圖入手，它包含兩張影像：

　　這是它的十六進位制資料,我用顏色區分了不同的資料塊：

　　Header

　　GIF檔案的開頭是 Header 資料塊，長度為6位元組，ASCII值為“GIF87a”或"GIF89a",前三位為GIF簽名，後三位為不同年份的版本號。

　　利用這點，在iOS中判斷二進位制檔案是否為GIF時，可以簡單去判斷它的前四位是否是"GIF8"。事實上絕大多數影像都可以用檔案簽名來判斷型別。

　　GIF 內容

　　GIF資料包含多個資料塊，其結構如下:

　　邏輯螢幕描述符

0A000A00 B30000

　　這一資料塊由7個位元組組成，前四個位元組分別是影像渲染區域的寬高。GIF的資料是按照大端序儲存的，0x0A00為10，所以這個GIF的寬高均為10。

　　接下來是一個壓縮位元組，第一個 Bit 為標誌位，表示全域性顏色列表是否存在。接下來三個Bit表示影像調色盤中每個顏色的原色所佔用的Bit數，011表示佔用4個Bit，111佔用8個Bit，以此類推。調色盤最多隻包含由24-Bit顏色中選出的256個顏色（實際有很多優化方案能提高顏色解析度，如加入區域性調色盤）。第五個Bit為標誌位，表示顏色列表排序方式。若為1，表示顏色列表是按照顏色在影像中出現的頻率降序排列。隨後三個Bit表示全域性顏色列表的大小，計算方法是2^N+1 ，其中N為這三個Bit的二進位制數值。

　　第六個位元組是表示背景色在全域性顏色列表中的索引，若無全域性顏色列表則此位元組無效。在GIF的影像資料中，沒有被指定顏色的畫素會被背景色填充。

　　最後一個位元組是畫素的寬高比，大多數時候這個值都是0，若值為N, 則影像的寬高比：

aspectRatio = (pixelAspectRatio + 15) / 64

　　全域性顏色列表

000000 80000000 80008080 00000080 80008000 8080C0C0 C0808080 FF000000 FF00FFFF 000000FF FF00FF00 FFFFFFFF FF

　　由前面的邏輯螢幕描述符可知，全域性顏色列表的大小是16，每個顏色佔三個位元組，按照RGB排列，所以它佔有48個位元組。資料流中，顏色是按照列表中的索引儲存的。

　　應用程式擴充套件

　　21FF0B 4E455453 43415045 322E3003 01000000

　　GIF中擴充套件塊都以0x21開始，後一個位元組是擴充套件標籤，標識擴充套件用途。

　　應用程式擴充套件的標籤是0xFF，它包含有應用程式的標識資訊和應用程式資料。其中 Netscape 應用程式擴充套件常用於控制GIF的動畫迴圈次數。Netscape 擴充套件長19個位元組，前14個是應用程式的ACSII資訊，後四個是資料子塊，用於指定GIF的迴圈次數, 按無符號整型儲存，0表示無限迴圈。

　　圖形控制擴充套件

21F90409 32000F00

　　圖形控制擴充套件塊屬於"89a"版本的定義。它在一個影像資料塊的最前端，用來指定影像的透明度與動畫屬性。圖形控制擴充套件的開端兩位元組是0x21F9，其中0x21表示這是一個擴充套件，F9表示擴充套件用於圖形控制。第三個位元組是塊大小(它到結束符之間的資料)。第四個位元組是壓縮欄位，前三個Bit保留，四到六Bit是disposal method。第四、五個位元組是影像控制擴充套件後面的影像的動畫時間，以無符號整型儲存。第六個位元組是透明色索引，之後是塊結束符0x00。

　　影像描述符

2C000000 000A000A 0000

　　影像描述符位於GIF中每一個影像資料的前端，由0x2C開始，長度為10個位元組。第一個位元組是影像描述符的標識0x2c，後面八個位元組表示影像的frame（left, top, width, height），用來在動畫中區域性更新影像。最後一個是壓縮位元組，主要是關於區域性顏色列表的資訊，其中第二個Bit表示影像的儲存方式是交織還是連續。

　　區域性顏色列表

　　如果上面的區域性顏色列表標誌位為1，那麼區域性顏色列表會排列在影像描述符後面，它只對緊跟在它之後的影像資料有效。如果區域性顏色列表標誌位為0，那麼影像資料將使用全域性顏色列表索引顏色。區域性顏色列表的大小計算方法和畫素顏色格式與全域性顏色列表相同。

　　影像資料

041C 1080472B 0549DA9B BAAE58E7 4D4F288E E629A519 697E1C0C 92DB1301 00

　　GIF的影像資料是經過LZW壓縮的二進位制流，通過解碼可以將其按照顏色列表中的顏色進行畫素填充。第一個位元組是LZW最小編碼大小，用來進行資料解碼。第二個位元組是影像資料的大小，之後的都是影像資料，直到塊結束符。

　　結束符

3B

　　GIF的動畫原理

　　GIF動畫的迴圈次數是由應用擴充套件來控制的，而GIF動畫每一幀的過渡方式是由圖形控制擴充套件控制,影像描述符控制影像繪製的區域。

　　圖形控制擴充套件中控制動畫的引數分別是：disposal method，user input flag，delay time，transparency color。

　　disposal method

　　disposal method佔3Bit，能夠表示0-7。

• disposal method = 1

　　解碼器不會清理畫布，直接將下一幅影像渲染上一幅影像上。

• disposal method = 2

　　解碼器會以背景色清理畫布，然後渲染下一幅影像。背景色在邏輯螢幕描述符中設定。

• disposal method = 3

　　解碼器會將畫布設定為上之前的狀態，然後渲染下一幅影像。

• disposal method = 4-7

　　保留值

　　user input flag

　　當user input flag為1時，GIF會在有使用者輸入事件（滑鼠、鍵盤）時才會過渡到下一幅影像。

　　delay time

　　delay time佔兩個位元組，為無符號整數，控制當前幀的展示時間，單位是0.01秒。

　　transparency color

　　如果圖形控制擴充套件的透明色標誌位為1，那麼解碼器會通過透明色索引在顏色列表中找到改顏色，標記為透明，當渲染影像時，標記為透明色的顏色將不會繪製，顯示下面的背景。

　　影像渲染區域

　　GIF中影像描述符指定了當前幀需要渲染的區域，這樣GIF的過渡動畫就只用繪製兩幀之間不同的區域，前提是diposal method的值為1。

　　實驗

　　根據上面的知識，將第一幀的圖形控制擴充套件改為：

21F90409 0A000900

　　這裡將透明色改成了紅色（紅色在全域性顏色列表中的索引是9），並將delay time改為0.1秒。修改完的GIF為：