寫在前面

我們先了解下AE導出動效落地格式主要有幾種：

Gif圖

1.最常用的當屬Gif圖，它幾乎兼容所有主流的瀏覽器，實現起來也是比較方便簡單，但是最致命的問題是，Gif圖并不支持半透明/透明圖，甚至會出現大量的白邊。所以在使用中經常會被吐槽。

Apng/Webp圖

2.Apng/Webp格式圖，最大特點可以支持半透明/透明動圖，并且沒有白邊，但是并沒有廣泛使用，由于一些兼容的問題

Json文件

3.json文件格式，設計師將AE制作的動畫通過一個插件生成一個json文件，開發同學可以直接在軟件中解析json文件來實現動畫。不需要設計師再導出GIF或者序列幀。

Part 1

一、GIF的優勢和劣勢

GIF的優勢

優秀的壓縮算法使其在一定程度上保證圖像質量的同時將體積變得很小?？刹迦攵鄮?，從而實現動畫效果?？稍O置透明色以產生對象浮現于背景之上的效果。

GIF的劣勢

GIF的alpha通道只有1bit，換言之，一個像素要么完全透明，要么完全不透明，而不像現在PNG的RGBA的8bit alpha通道，alpha值也可以和RGB一樣都有255個透明值。這導致了所有GIF的圖片帶上透明度以后，邊緣會出現明顯的鋸齒。所以如果你的客戶端需要展示帶透明度的動圖，GIF基本上可以不考慮

如果導出Gif圖？

1.合成-添加到adobe media encoder

2.以下2種方式可導出GIF圖

Part 2

二、APNG/WebP的優勢和劣勢

APNG是什么？

APNG是Mozilla在2008年發布的圖片格式，本質上是在PNG的基礎上加上一個擴展，而且非常簡單即可實現。因此能夠完全支持RGBA。規范可以參見APNG Specification。

雖然這個規范沒有加入PNG開發組，但是很多瀏覽器已經支持了APNG。最主推的是Apple的Safari（OS X 10.10以后的Safari，以及iOS 8以后的Safari和內置WebView），已經完全支持。Firefox親兒子當然一直是支持的。Chrome桌面端已經從Chrome 59開始支持，現在就差Edge了。具體支持程度參見瀏覽器兼容性。

APNG的優勢

在于時間比較長，各種動圖制作工具，優化工具都有相應的項目來支持。而且在iOS上的WebView里面是除GIF外，唯一官方支持的動圖格式，因此如果做移動端開發需要WebView頁引入動圖，APNG還是必不可少的。