APNG替代GIF制作完美动效

GIF介绍

GIF是一种很古老的格式，制霸浏览器几十年（1987年至今），特点有：

1. 它采用无损压缩存储，在不影响图像质量的情况下，生成很小的文件
2. GIF文件可以制作动画
3. 支持透明色，但是只支持全透明
4. 几乎所有浏览器都支持（远古时期没得选）
5. 制作简单

同时GIF也有很多缺点：

1. 每个像素只有8bit，最多只有256种颜色，颜色过渡效果差
2. 不支持Alpha通道，导致无法渐变透明，只支持全透明或不透明

APNG

APNG是Mozilla在2004年设计的，想了解发展历程的可以去考古，但是，十几年的磨练使它已经很成熟了，下面是浏览器对APNG的支持程度，可以看出大多数主流浏览器已支持APNG格式。

APNG相对于GIF有哪些优势：

1. GIF每个像素只有8bit，最多只有256种颜色，使GIF体积变小但是牺牲了很大的画质，而APNG完全不受这方面限制
2. GIF 虽然也支持透明，但是他只支持将某个颜色标记成透明，也就是说他不支持半透明，只支持完全透明或者完全不透明。如果把一个边缘是半透明的图片转换成 GIF，就会出现另一个答案中提到的杂边问题。 而 APNG 和 WebP 都支持 8 bit alpha channel，透明度可以有 256 级。

举个栗子

观察上面图片，很明显可以看到左边GIF的拖尾显示不全，边界非常明显，而右边APNG的拖尾完美展现。

APNG制作

制作方法分两步：

第一步

使用AE制作需要的动效，并导出PNG序列帧，导出时一定要设置视频输出通道为RGB+Alpha通道

第二步

将PNG序列帧合成APNG，推荐使用APNG Anime Maker，可以点击下载，也可以到本项目仓库下载，下面是它的界面。

使用方法：

1. 点击open选择PNG序列帧
2. 右侧设置Delay，即动效帧数
3. 点击save保存，生成成功

本项目仓库地址: https://github.com/jiaicon/practise/tree/apng