寫在前面

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

Gif圖

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

Apng/Webp圖

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

Json文件

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

Part 1

一、GIF的優勢和劣勢

GIF的優勢

優秀的壓縮算法使其在一定程度上保證圖像質量的同時將體積變得很小。可插入多幀，從而實現動畫效果。可設置透明色以產生對象浮現於背景之上的效果。

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了。具體支持程度參見瀏覽器兼容性。