一键解决GIF锯齿-设计篇

APNG代替GIF解决杂边、锯齿、颜色失真等问题，输出动态效果。

---

在制作简单动效GIF图是总会有失真的问题，设计师很头疼，下面讲一下怎么解决这个问题

APNG的应用场景

举个栗子一个常见的动效需求：保护半透明的动态图，例如loading加载，使用场景在app内，动图要叠加在内容上。下面叠加的额内容不确定，这就要求动图必须支持半透明图层。如下图图书翻页会有阴影，而且是个半透明渐变的投影

加载loading

APNG制作步骤

做好的透明背景，在AE做好动效
AE-文件-导出-添加到渲染对列----格式改为“PNG”序列------通道RGB+Alpha

AE渲染好的PNG序列图会按照顺序编号会自动放在文件夹

打开imparta将文件拖入输出APNG格式，设置好导出路径点开始运行就成

压缩率

GIF 采用的是 LZW，而 APNG 采用的是 Deflate，再加上 APNG 继承了 PNG 的 filter，利用相邻像素的相似性使压缩率大大提高

原 GIF 文件大小为 1.2 MB，但是一般的 GIF encoder 都不会拼命的去优化文件大小。

如果让 gifsicle 利用各种奇淫技巧进行优化，可以将文件无损的压缩到 978 KB

gifsicle -O3 Rotating_earth_(large).gif -o Rotating_earth_(large)_gifsicle.gif

而随随便便转换一个 APNG 才 479 KB 而已

gif2apng Rotating_earth_(large).gif

如果不在乎压缩时间的话，使用奇淫技巧（zopfli）来压缩 APNG，还可进一步压缩到 811 KB

兼容性

几乎所有的浏览器都支持 GIF，而支持 APNG 的浏览器只有 Firefox 和 Safari， Chrome 58 开始也会支持 APNG，目前支持 WebP 的只有 Chrome 和 Opera， Firefox 也即将支持 WebP， Safari 也在测试 WebP 的支持。至于 IE 和 EDGE 嘛，呵呵，还是换浏览器吧

下载地址
链接: https://pan.baidu.com/s/1wR6h4jqazRrn_WCm7DJUeQ 密码: fubi