AE 导出 Apng/Webp 从未如此轻松

西西
UX motion designer
107 人赞同了该文章

注意！！！导出地址千万不要设为桌面！！！！
部分朋友反馈导出到桌面导致了数据丢失！！！

点击「生成」前请查看两个导出地址最后是不是「/.webp」或者「/.png」，如果是，请改成「/xxx.webp」或者「/xxx.png」再导出！

AE 导出 Apng/Webp - 图3
——————原文————————
（忽略那个劣拙的苹果风文案标题
说到「动图」，很多人第一反应可能是 GIF ，但是GIF这个格式十分古老且低效，不仅体积大，而且画质差，尤其致命的是带透明的 GIF 那无法消除的「毛边」，就算是不透明的 GIF，对于渐变、投影等效果的表现也是灾难级的。总之，GIF 已经跟不上时代了，唯一的优势大概就是良好的兼容性以及创作工具比较友好吧（用 Photoshop 就可以一帧帧画然后直接原生导出动态 GIF，Sketch 、AE 也有相应插件制作。）
那么如果想输出高质量动图，除了GIF还有什么选择呢？APNG / WEBP 可以了解一下~

这俩格式在画质表现上是碾压 GIF 了，在实际项目中主要还是不同设备之间的兼容性问题需要考虑（这也是他们还没取代 GIF 的原因，巨头之间争夺话语权的结果。。。）
好了兼容性交给研发小哥哥去头疼吧，对应我们设计师，最主要还是得把他们做出来对吧？
之前的做法都是先用 AE 制作好动画——导出序列帧——通过工具转换成对应格式，转换工具除了官方提供的命令行程序，我之前也写过一个 Mac 下的简易脚本

还有一些软件比如 iSparta :

但是实际使用中我们发现 iSparta 经常出问题，有时卡死、闪退，有时导出的图有闪烁现象，而看了一下项目主页它有 2 年没更新了（难道被放弃了？），而且每次都要先导出序列帧再用它倒腾一次也是挺麻烦的，能一次到位就好了。
嗯，现在你可以优雅地从 AE 直接导出 APNG / WEBP 动图了，向大家介绍一下 BX-Webp/Apng Exporter :

BX-Webp/Apng Exporter

如何安装

下载 BX-WebpApngExporter.zxp 文件，点击这里下载.
根据自己的操作系统下载 ZXP 安装工具：
https://aescripts.com/learn/zxp-installer/
然后将 BX-WebpApngExporter.zxp 拖进安装工具（或者通过 File -> Open 选择该文件安装）
使用步骤：
1、AE 中打开需要导出的合成，在「合成设置」中设置好帧率。
2、在「窗口」-「扩展」中运行「BX Webp/Apng Expoter」。
3、选择要导出的格式的对应导出地址，并根据情况勾选「是否导出」。
（点击「WEBP 地址」、「APNG地址」按钮来选取，也可以手动输入、修改。）
4、设置画质，取值为0-100之间的整数，数字越大画质越好，图片越大。
5、设置循环次数，取值为整数，0为无限循环。
插件包含了以下开源软件:
img2webp
https://developers.google.com/speed/webp/docs/precompiled/
apngasm
http://apngasm.sourceforge.net/
pngquant
https://pngquant.org/