APNG--PNG的另一種表現方法，GIF的改版？

Chrome 59 開始支持 apng，至此，僅 IE 瀏覽器不支持。

APNG 製作可以試試 screenToGif ，可以錄屏轉 gif，視頻，以及 apng，很強大。

一、初來乍到，先做自我介紹#

APNG，全稱是 “Animated Portable Network Graphics”，是 PNG 的位圖動畫擴展，可以實現 png 格式的動態圖片效果。但是，我的爸爸 PNG 一直都不認可我，認為我是個野種。唉，往事說起來就長了。想當年，爸爸 PNG 親手帶過一個孩子，名叫 MNG 的圖像格式，希望可以成為 PNG 動畫的標準，主流。可惜，MNG 不爭氣，過多浪費社會資源，以至於爸爸他自己都懶得管他。

好在 Mozilla 並不嫌棄我，一直樂此不疲撫養我長大，希望有朝一日能夠代 GIF 成為下一代動態圖的標準。對了，我今年 10 歲了，我是 2004 年出身的，由於大家（諸多瀏覽器）不支持我，尤其我爸爸 PNG 堅決不認我可是親生的，還死守著那個不中用的 MNG，所以之前我一直都是默默無聞的成長，但是，最近發生了一件事情讓我開始受到大家的關注。

雖然說 Chrome 等 Blink/webkit 內核瀏覽器忙著寵愛自己的孩子 webP，而對 APNG 依然不聞不問，但是，有了 iOS 的支持，APNG 仿佛看到了一統江湖的曙光！

二、戒驕戒躁，基本特性介紹#

由於下面 APNG 的稱述有很多的 APNG 的實地示例，如果你想看到真實的動畫效果，建議使用 FireFox 瀏覽器，或者 Safari 8 瀏覽器，或者安裝 APNG 解碼插件

為什麼不同瀏覽器 APNG 會顯示不同的面目呢！這就是 APNG 比較讚的特性啊，超自然向下兼容。要問原因，就要講講 APNG 的構成原理啦！首先，APNG 是個 PNG 動圖，跟 Gif 動圖一樣，是由很多幀構成的。其中，第 1 幀就是一張標準的 PNG 圖片，後面的幀不僅包含 PNG 圖片，還有剩餘的動畫和幀速等數據。於是，如果瀏覽器不認識 APNG 後面的動畫數據，沒關係，因為第 1 幀是標準的，可以無障礙顯示；如果支持，自然就後面的幀走起，動畫效果就有了！

拿 APNG 靚麗的頭像舉例，APNG 的頭像是個 2 幀的 APNG 圖片，第 1 幀就是一張標準的 “你的瀏覽器不支持 APNG” 字樣的 PNG 圖片，第 2 幀為 “你的瀏覽器支持 APNG” 字樣的圖片以及幀播放間隔時間、播放次數等數據。於是，Chrome 瀏覽器就顯示幀 1（因為不認識 APNG），FireFox 顯示幀 2（動畫僅播放 1 次）。pingwest 上的一篇譯文

一些特有名詞大家不必關心（實在有興趣，可以看這裡），主要看 SVG 圖形中的三個箭頭（沒錯，是 SVG, IE7/IE8 繞行），可以看到第 1 幀 IDAT 還是 IDAT (png 還是那個 png, 所有瀏覽器都認識的 png)，但是後面第 2 幀和第 3 幀 IDAT 變成了 fdAT，亂入了其他些東西 (不是標準 png 了)。

說了這麼多，還沒大肆宣揚下 APNG 和 gif 相比的好處呢。雖明顯的差別在於圖片質量，gif 最多支持 256 種顏色，不支持 Alpha 透明通道。這兩個問題導致 gif 往往在這兩者圖形動畫上質量很糟糕:

色彩豐富的圖片，例如視頻 gif 截圖（顏色不夠使啊）;
含半透明效果的圖片（要麼全透要麼實色）。大家可以看下面的對比圖（來自 APNG 養父 mozilla 官方）感受下，免得說 APNG 小女子賣瓜 —— 屌絲皆誇

細膩的效果犧牲的是圖片的大小，但這只是對色彩豐富、含 Alpha 半透明的圖片（色彩不豐富，可以使用 FireWork 保存為 png8 Alpha 透明，大小跟 gif 一樣甚至更小）。

說到對比，不得不提 APNG 的競爭對手 webP. 其也可以實現高質量的圖片動畫。其瀏覽器支持統治了 Chrome 以及 Android。每個爸爸都有私心，APNG 爸爸不鳥 webP 這個孩子，webP 的爸爸不鳥我。唉，未來 APNG 和 webP 誰更受一籌，還真不得而知。目前來看，APNG 支持 FF/Sarari 和 iOS, webP 是 Chrome/Opera 和 Android. 可謂各得半壁江山。鹿死誰手，還真不好說。

三、大家同心、其利斷金#

iOS8 對 APNG 的支持意義深遠，表明，高質量的動態圖片可以開始占領移動端了（PC 端由於 IE 什麼都不支持，呵呵，阻礙了發展）。於是，一些以前不太好處理的功能就有了新的技術選項。

OK，舉個例子，之前國際版 QQ 有一個閃屏動畫，較複雜，細膩，動感。由於 Gif 動畫圖片質量堪比羅玉鳳，於是放棄，最後還是客戶端內嵌視頻實現的效果。但是，現在，iOS8 支持了 APNG，於是，高質量的動畫效果有了新的技術解決方案。設計師直接自己做好 APNG 動畫圖片給開發，一個簡單的內嵌頁，動畫可以隨時更新（節日什麼的），效果又很讚，牛！至於 Android，可以使用 webP。

對於普通的 web app 頁面，我們也可以讓 APNG 和 webP 雙劍合璧，通過判斷，顯示不不同的動畫格式實現我們想要的細膩動畫效果，讚不讚？嗲不嗲？