背景
最近接到一個Android端支持apng和webp動圖播放的需求厦凤，所以對apng枢纠、webp圖片格式進行了詳細的學習肤寝，今天在這里針對webp格式的圖片進行一下簡介当辐。
WebP圖片簡介
WebP是Google于2010年提出的一種新的圖片壓縮格式。它為網絡圖片提供了無損和有損壓縮能力鲤看，同時在有損條件下支持透明通道缘揪。根據Google較早的測試，WebP的無損壓縮比網絡上找到的PNG檔少了45％的文件大小义桂，即使這些PNG檔在使用pngcrush和PNGOUT處理過找筝，WebP還是可以減少28％的文件大小。
同時慷吊，谷歌于2014年提出了動態(tài)WebP呻征，拓展WebP使其支持動圖能力。動態(tài)WebP相比GIF支持更豐富的色彩罢浇，并且也占用更小空間陆赋，更適應移動網絡的動圖播放。
動態(tài)WebP詳解
下面進入我們的主題嚷闭，動態(tài)webp攒岛，這里我會對其文件格式用于解析播放的部分做一下講解。
播放原理
webp的播放原理類似于gif和apng胞锰，都是逐幀播放灾锯，記錄每一幀變化區(qū)域的長寬、坐標嗅榕、播放延時顺饮，來還原播放
文件格式
首先我們來看一個示例：
上面就是一個動態(tài)webp該有的文件格式吵聪，下面我們來分析一下。
首部：webp首部包含12字節(jié)兼雄，分別為RIFF吟逝、File Size以及WEBP，其中File Size為文件大小赦肋，WEBP為文件標示块攒，我們可以根據WEBP來判斷其文件格式
擴展格式：擴展格式包括：VP8X用于指明使用的特性、可選的‘ICCP’用于色彩配置佃乘、可選的‘ANIM’用于動畫控制囱井、可選的‘EXIF’用于EXIF元數據、可選的‘XMP’用于XMP元數據趣避。對于靜態(tài)webp圖片庞呕，其只包含1幀的數據，而動態(tài)webp包含多幀程帕。
l:當圖像包含透明數據時置位千扶。
a:動態(tài)WebP置位，此時ANIM和ANMF數據塊中的數據將會被使用來控制動畫骆捧。
Canvas Width Minus One:畫布的真實寬度是該數值+1澎羞。
Canvas Height Minus One:畫布的真實高度是該數值+1。
可以看出敛苇，我們可以通過此數據塊拿到透明度妆绞、animation動畫標記以及畫布的寬高。
動畫：動畫我們主要關注ANIM和ANMF塊枫攀。
其中ANIM Chunk定義了動畫的全局參數括饶，包括backgroundColor以及l(fā)oopCount。
而對于ANMF Chunk来涨，其包含了一幀的圖像數據图焰，一個動畫里面會包含多個ANMF Chunk。它內部定義了：
Frame X: 該幀數據左上角X坐標為該值 * 2蹦掐。
Frame Y: 該幀數據左上角Y坐標為該值 * 2技羔。
Frame Duration: 播放該幀后的延時時間。
Blending method (B): 標識如何混用前面畫布的相應透明像素點卧抗。置0時藤滥，需要清空前一幀。置1時社裆，不清空拙绊，直接渲染這一幀數據。
Disposal method (D): 標識該幀數據在被顯示后如何處理畫布。置0時不處理标沪；置1時將畫布矩形區(qū)域轉換成ANIM定義的背景顏色榄攀。
Frame Data:以2字節(jié)為單位，包含圖像比特流數據以及可選的透明度數據金句。
總結
作為一種新興的圖片格式檩赢，webp在壓縮算法上進行了優(yōu)化，同時有著不錯的顯示效果趴梢。對于動圖，它的體積比gif小币他，但是顯示效果比gif強坞靶，但是支持廣泛度上不如gif。
