編者按：騰訊某位同學設(shè)計的動態(tài)表情上線后，發(fā)現(xiàn)鋸齒問題特別嚴重，向工程師請教，前端小哥@又壹顆貓餅干 拿出自家研究的神器，原文《再回眸，麗影如初》。立刻解決了問題，而且還可以批量搞定喲，已經(jīng)有大量好評了，現(xiàn)在知道還來得及！

優(yōu)設(shè)最好用的神器人氣榜！

• 《PS摳圖神器：KNOCKOUT 2.0漢化版下載及教程》
• 《這效果超火！教你創(chuàng)建高大上的多邊形字體》
• 《PS 參考線插件GUIDEGUIDE下載及使用說明》

本文提到最多的網(wǎng)站Github，是工程師的標配，設(shè)計師們現(xiàn)在也得跟上步伐咯！《超方便！專為設(shè)計師而寫的GITHUB快速入門教程》

設(shè)計師：怎么我設(shè)計的動態(tài)表情，上線以后周圍多了這么多白色的噪點！

全部動態(tài)表情地址：http://isparta.github.io/compare/#15

前端：GIF本來就會有鋸齒，跟我沒關(guān)系呀。

設(shè)計師：太丑了，你不是萬能的前端么？這個問題我用ps解決都是分分鐘的事情呀！

前端： ……（you can you up） 其實，在很久很久以前…

2004年，mozilla社區(qū)也意識到這個問題，所以當時他們提出了一種新的圖片格式——APNG。

APNG又叫動態(tài)PNG（Animated PNG），第1幀為標準PNG圖像，剩余的動畫和幀速等數(shù)據(jù)放在PNG擴展數(shù)據(jù)塊里，因此只支持原版PNG的軟件會正確顯示第1幀。更多資料請查看：wikipedia.org

由于APNG是PNG的擴展，所以它支持半透明，自然就不會有鋸齒的問題。設(shè)計師：能說人話么？

前端：- -！?APNG比GIF牛逼多了，媽媽再也不用擔心鋸齒的問題了。

設(shè)計師：那就趕緊用起呀！

這時產(chǎn)品出現(xiàn)了…

產(chǎn)品： 不會有鋸齒，那是不是APNG會比GIF的體積大呀！

前端：just try it…拿一組圖片進行測試，會發(fā)現(xiàn)有些APNG比GIF要大，如下圖：

再通過大批量的圖片對比可以發(fā)現(xiàn)，APNG平均會比GIF的體積大一點點（3%左右）。更多請查看：http://isparta.github

產(chǎn)品：只是大一點點而已，那也很不錯了呀！

前端：卻多嘛得，如果APNG可以比GIF還要小，這樣用戶體驗不就更好了。先看看APNG的原理：

前方燒腦，做好準備。

APNG對于動態(tài)圖片的處理算法類似GIF，可以將一組大小相同的PNG圖片合并為一張APNG圖片，原來的每一張PNG圖片變成APNG圖片的每一幀，并且每一幀會按照約定的規(guī)則來記錄與前一幀變化區(qū)域的數(shù)據(jù)到相應(yīng)數(shù)據(jù)塊，并保存變化區(qū)域在圖片中的坐標與大小(如圖一所示)。解析的時候，應(yīng)用程序會根據(jù)每一幀變化區(qū)域的坐標和大小，將變化區(qū)域替換前一幀的相應(yīng)區(qū)域來還原當前幀，從而生成動態(tài)圖片，并達到壓縮效果。說起來有點繞口，直接看下面的圖會更清晰些：

由于鄰近幀間共用了相同的像素信息，所以可以有效節(jié)省動態(tài)圖片的體積。

而由于我們生成APNG的圖片是PNG24（為了保證Alpha通道），而PNG24與GIF相比，體積上本來就沒有優(yōu)勢，所以生成的APNG自然也沒有優(yōu)勢。

不就是PNG24比較大嘛，那就將PNG24先有損壓縮（pngquant），再轉(zhuǎn)換為APNG不就可以了，喜大普奔呀！^_^最后按這種方式折騰出來了，卻發(fā)現(xiàn)APNG比之前更大了(如下圖）！- -，知道真相的我眼淚掉下來呀！請查看：isparta.github?的對比。

仔細想了一下，因為我們對PNG24進行了有損壓縮，造成圖片信息的重新排布，本來跟臨近幀相同的區(qū)域不同了，自然輸出的圖片大小也會比較大。

所以我們只能對跟臨近幀不同的區(qū)域進行壓縮，具體過程見下圖：

按照這種方式優(yōu)化以后，生成的APNG的大小平均會比GIF小30%左右，而且也能解決鋸齒問題（如下圖）：

點擊?isparta.github.io?并在chrome下打開可以有更直觀的感受。

設(shè)計：雖然不知道你在說什么，但是感覺很厲害的樣子！

前端：其實簡單來說，就是APNG比GIF小30%左右，而且沒有鋸齒。

設(shè)計：那現(xiàn)在我們可以使用么？會有什么限制么？

前端：額，APNG的平臺兼容性不是特別好，不過也是有辦法解決的。APNG的經(jīng)歷還是蠻忐忑的，而且最后還是沒有形成標準，所以很少應(yīng)用程序（對于瀏覽器，目前有firefox與opera支持，還有IOS8下的Safari）支持這種格式，但是不支持的應(yīng)用程序會顯示APNG的第一幀。

對于原生應(yīng)用，我們可以根據(jù)?官方說明文檔?（https://developer.mozilla.org）編寫解碼邏輯，目前PC QQ客戶端已經(jīng)支持APNG。

對于HTML5應(yīng)用，已經(jīng)有比較成熟的開源框架?apng-canvas（https://github.com）可供使用，我們在近期的『禮物』項目中就使用了APNG，做到了精細的動畫體驗（如下圖）：

產(chǎn)品：那怎么生成APNG呢？如果有大批量的圖片需要轉(zhuǎn)換怎么辦？

前端：這個不用擔心，由于業(yè)內(nèi)暫時沒有APNG批量有損壓縮的工具，所以我們就自研了iSparta圖片轉(zhuǎn)換工具，它有以下特性——

1，批量處理

根據(jù)規(guī)則對文件和文件夾進行批量轉(zhuǎn)換。具體操作請查看（isparta.github.io）。

2，APNG有損壓縮

直接集成PNG的有損壓縮，可以將文件體積降低到最小（一般輸出的文件比GIF小30%左右）。

3，跨平臺

支持windows和Mac系統(tǒng)。

可以點擊 http://isparta.github?下載體驗， 目前該工具也在github（https://github.com）上開源了，關(guān)于工具的建議與bug可以在issues（https://github.com）上反饋，也歡迎大家的加入。

任何事情都不是一成不變的，有時候只要跳出常規(guī)，再認真一點點，這個世界其實可以更美好！

再回眸，麗影如初…

【設(shè)計師快速成長教程】

UI同學的快速進階指南！
《UI設(shè)計新手？7條實用法則幫你迅速進階！（一）》
《UI設(shè)計新手？7條實用法則幫你迅速進階！（二）》

幫你一分鐘學會PS路徑描邊！
《輕松畫圖標！教你一分鐘玩轉(zhuǎn)PS路徑描邊》

原文地址：騰訊 ISUX
作者：@又壹顆貓餅干

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計師學習平臺，專注分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量87萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設(shè)計教程、經(jīng)驗分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計 微信號：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：