我们在展示动画的时候通常采用陈旧的GIF格式。老旧的GIF格式有很多我们难以忍受的问题。首先就是alpha通道GIF只支持显示和不显示，不支持半透明。这就导致了GIF的边缘会有杂边。

使用APNG也就是PNG格式的动画可以无损的展现动画，体积和GIF相差不大。

图来自知乎郑插插

图来自知乎郑插插

那么如何制作APNG图呢，可以搜索相关的APNG制作工具。这里仅以mac环境下使用AE制作动画为例。

渲染动画

选择好要渲染的预合成之后，选择文件->导出->添加到渲染队列

添加到渲染队列

然后输出模块中渲染PNG序列，在输出到中选择导出位置之后再点击渲染。

更改输出模块设置

然后我们就可以在访达中看到PNG序列了。

PNG序列

合成为APNG或者WEBP

使用序列帧转webp + apng动画小工具这个工具进行转换。

立即下载

安装之后返回到上级文件夹，右键单击，服务中选择对应的功能即可。

  1. 将png序列帧放在一个文件夹里，文件夹里不要有其他文件。
  2. 对着存放序列帧的文件夹右键-> 服务-> 序列帧转 webp + apng，根据提示操作即可。也可以单独导入webp或apng格式。
  3. 可以选择多个序列帧文件夹进行操作，导出的webp或apng动画放置在序列帧文件夹所在的目录。

合成APNG

大功告成

你已经成功生成了一个APNG动态图像

使用Tinypng可以对APNG进行压缩。