GIF是一種使用LZW壓縮，支持多張圖像的容器。支持256色，透明通道為1bit。作為互聯(lián)網(wǎng)表情包的載體，GIF這項(xiàng)80年代的技術(shù)依然生生不息。

　　但它的弊端也是顯而易見的：易出現(xiàn)毛邊，色彩表現(xiàn)低劣，文件壓縮比不高。針對這些問題，Mozilla發(fā)布了APNG來代替老舊的GIF技術(shù)，同時(shí)許多開源組件也用WebP格式來代替GIF。

　　GIF在iOS的尷尬處境

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

• iOS關(guān)于照片的場景不會(huì)自動(dòng)播放GIF,也沒有角標(biāo)。
• 一些應(yīng)用將GIF視為靜態(tài)圖像去操作，導(dǎo)致用戶保持了一個(gè)GIF后，結(jié)果應(yīng)用將其保存成JPG。
• iOS只能通過imageI/O去操作GIF數(shù)據(jù)，UIKit對其絕緣。

　　GIF的存儲結(jié)構(gòu)

　　由于歷史的原因，GIF有兩個(gè)版本，但它們的文件結(jié)構(gòu)是一樣的，都是由不同用途的數(shù)據(jù)塊構(gòu)成，可分為控制塊和數(shù)據(jù)塊�？刂茐K里是決定GIF表現(xiàn)的參數(shù)，數(shù)據(jù)塊里的數(shù)據(jù)由前面的控制塊里的參數(shù)來解釋。

　　一個(gè)GIF文件的內(nèi)部結(jié)構(gòu)如下圖：

　　Header：包含文件簽名與版本號。

　　Trailer: 文件結(jié)束標(biāo)識符。

　　GIF Data: Header 與 trailer 之間就是GIF文件的數(shù)據(jù)。

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

　　這是它的十六進(jìn)制數(shù)據(jù),我用顏色區(qū)分了不同的數(shù)據(jù)塊：

　　Header

　　GIF文件的開頭是 Header 數(shù)據(jù)塊，長度為6字節(jié)，ASCII值為“GIF87a”或"GIF89a",前三位為GIF簽名，后三位為不同年份的版本號。

　　利用這點(diǎn)，在iOS中判斷二進(jìn)制文件是否為GIF時(shí)，可以簡單去判斷它的前四位是否是"GIF8"。事實(shí)上絕大多數(shù)圖像都可以用文件簽名來判斷類型。

　　GIF 內(nèi)容

　　GIF數(shù)據(jù)包含多個(gè)數(shù)據(jù)塊，其結(jié)構(gòu)如下:

　　邏輯屏幕描述符

0A000A00 B30000

　　這一數(shù)據(jù)塊由7個(gè)字節(jié)組成，前四個(gè)字節(jié)分別是圖像渲染區(qū)域的寬高。GIF的數(shù)據(jù)是按照大端序存儲的，0x0A00為10，所以這個(gè)GIF的寬高均為10。

　　接下來是一個(gè)壓縮字節(jié)，第一個(gè) Bit 為標(biāo)志位，表示全局顏色列表是否存在。接下來三個(gè)Bit表示圖像調(diào)色板中每個(gè)顏色的原色所占用的Bit數(shù)，011表示占用4個(gè)Bit，111占用8個(gè)Bit，以此類推。調(diào)色板最多只包含由24-Bit顏色中選出的256個(gè)顏色（實(shí)際有很多優(yōu)化方案能提高顏色分辨率，如加入局部調(diào)色板）。第五個(gè)Bit為標(biāo)志位，表示顏色列表排序方式。若為1，表示顏色列表是按照顏色在圖像中出現(xiàn)的頻率降序排列。隨后三個(gè)Bit表示全局顏色列表的大小，計(jì)算方法是2^N+1 ，其中N為這三個(gè)Bit的二進(jìn)制數(shù)值。

　　第六個(gè)字節(jié)是表示背景色在全局顏色列表中的索引，若無全局顏色列表則此字節(jié)無效。在GIF的圖像數(shù)據(jù)中，沒有被指定顏色的像素會(huì)被背景色填充。

　　最后一個(gè)字節(jié)是像素的寬高比，大多數(shù)時(shí)候這個(gè)值都是0，若值為N, 則圖像的寬高比：

aspectRatio = (pixelAspectRatio + 15) / 64

　　全局顏色列表

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

　　由前面的邏輯屏幕描述符可知，全局顏色列表的大小是16，每個(gè)顏色占三個(gè)字節(jié)，按照RGB排列，所以它占有48個(gè)字節(jié)。數(shù)據(jù)流中，顏色是按照列表中的索引存儲的。

　　應(yīng)用程序擴(kuò)展

　　21FF0B 4E455453 43415045 322E3003 01000000

　　GIF中擴(kuò)展塊都以0x21開始，后一個(gè)字節(jié)是擴(kuò)展標(biāo)簽，標(biāo)識擴(kuò)展用途。

　　應(yīng)用程序擴(kuò)展的標(biāo)簽是0xFF，它包含有應(yīng)用程序的標(biāo)識信息和應(yīng)用程序數(shù)據(jù)。其中 Netscape 應(yīng)用程序擴(kuò)展常用于控制GIF的動(dòng)畫循環(huán)次數(shù)。Netscape 擴(kuò)展長19個(gè)字節(jié)，前14個(gè)是應(yīng)用程序的ACSII信息，后四個(gè)是數(shù)據(jù)子塊，用于指定GIF的循環(huán)次數(shù), 按無符號整型存儲，0表示無限循環(huán)。

　　圖形控制擴(kuò)展

21F90409 32000F00

　　圖形控制擴(kuò)展塊屬于"89a"版本的定義。它在一個(gè)圖像數(shù)據(jù)塊的最前端，用來指定圖像的透明度與動(dòng)畫屬性。圖形控制擴(kuò)展的開端兩字節(jié)是0x21F9，其中0x21表示這是一個(gè)擴(kuò)展，F(xiàn)9表示擴(kuò)展用于圖形控制。第三個(gè)字節(jié)是塊大小(它到結(jié)束符之間的數(shù)據(jù))。第四個(gè)字節(jié)是壓縮字段，前三個(gè)Bit保留，四到六Bit是disposal method。第四、五個(gè)字節(jié)是圖像控制擴(kuò)展后面的圖像的動(dòng)畫時(shí)間，以無符號整型存儲。第六個(gè)字節(jié)是透明色索引，之后是塊結(jié)束符0x00。

　　圖像描述符

2C000000 000A000A 0000

　　圖像描述符位于GIF中每一個(gè)圖像數(shù)據(jù)的前端，由0x2C開始，長度為10個(gè)字節(jié)。第一個(gè)字節(jié)是圖像描述符的標(biāo)識0x2c，后面八個(gè)字節(jié)表示圖像的frame（left, top, width, height），用來在動(dòng)畫中局部更新圖像。最后一個(gè)是壓縮字節(jié)，主要是關(guān)于局部顏色列表的信息，其中第二個(gè)Bit表示圖像的存儲方式是交織還是連續(xù)。

　　局部顏色列表

　　如果上面的局部顏色列表標(biāo)志位為1，那么局部顏色列表會(huì)排列在圖像描述符后面，它只對緊跟在它之后的圖像數(shù)據(jù)有效。如果局部顏色列表標(biāo)志位為0，那么圖像數(shù)據(jù)將使用全局顏色列表索引顏色。局部顏色列表的大小計(jì)算方法和像素顏色格式與全局顏色列表相同。

　　圖像數(shù)據(jù)

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

　　GIF的圖像數(shù)據(jù)是經(jīng)過LZW壓縮的二進(jìn)制流，通過解碼可以將其按照顏色列表中的顏色進(jìn)行像素填充。第一個(gè)字節(jié)是LZW最小編碼大小，用來進(jìn)行數(shù)據(jù)解碼。第二個(gè)字節(jié)是圖像數(shù)據(jù)的大小，之后的都是圖像數(shù)據(jù)，直到塊結(jié)束符。

　　結(jié)束符

3B

　　GIF的動(dòng)畫原理

　　GIF動(dòng)畫的循環(huán)次數(shù)是由應(yīng)用擴(kuò)展來控制的，而GIF動(dòng)畫每一幀的過渡方式是由圖形控制擴(kuò)展控制,圖像描述符控制圖像繪制的區(qū)域。

　　圖形控制擴(kuò)展中控制動(dòng)畫的參數(shù)分別是：disposal method，user input flag，delay time，transparency color。

　　disposal method

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

• disposal method = 1

　　解碼器不會(huì)清理畫布，直接將下一幅圖像渲染上一幅圖像上。

• disposal method = 2

　　解碼器會(huì)以背景色清理畫布，然后渲染下一幅圖像。背景色在邏輯屏幕描述符中設(shè)置。

• disposal method = 3

　　解碼器會(huì)將畫布設(shè)置為上之前的狀態(tài)，然后渲染下一幅圖像。

• disposal method = 4-7

　　保留值

　　user input flag

　　當(dāng)user input flag為1時(shí)，GIF會(huì)在有用戶輸入事件（鼠標(biāo)、鍵盤）時(shí)才會(huì)過渡到下一幅圖像。

　　delay time

　　delay time占兩個(gè)字節(jié)，為無符號整數(shù)，控制當(dāng)前幀的展示時(shí)間，單位是0.01秒。

　　transparency color

　　如果圖形控制擴(kuò)展的透明色標(biāo)志位為1，那么解碼器會(huì)通過透明色索引在顏色列表中找到改顏色，標(biāo)記為透明，當(dāng)渲染圖像時(shí)，標(biāo)記為透明色的顏色將不會(huì)繪制，顯示下面的背景。

　　圖像渲染區(qū)域

　　GIF中圖像描述符指定了當(dāng)前幀需要渲染的區(qū)域，這樣GIF的過渡動(dòng)畫就只用繪制兩幀之間不同的區(qū)域，前提是diposal method的值為1。

　　實(shí)驗(yàn)

　　根據(jù)上面的知識，將第一幀的圖形控制擴(kuò)展改為：

21F90409 0A000900

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

標(biāo)簽： isp 互聯(lián)網(wǎng)

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。