APNG--PNG的另一种表现方法，GIF的改版？

Chrome 59 开始支持 apng，至此，仅 IE 浏览器不支持。

APNG 制作可以试试 screenToGif ，可以录屏转 gif，视频，以及 apng，很强大。

一、初来乍到，先做自我介绍#

APNG, 全称是 “Animated Portable Network Graphics”, 是 PNG 的位图动画扩展，可以实现 png 格式的动态图片效果。但是，我的爸爸 PNG 一直都不认可我，认为我是个野种。唉，往事说起来就长了。想当年，爸爸 PNG 亲手带过一个孩子，名叫 MNG 的图像格式，希望可以成为 PNG 动画的标准，主流。可惜，MNG 不争气，过多浪费社会资源，以至于爸爸他自己都懒得管他。

好在 Mozilla 并不嫌弃我，一直乐此不疲抚养我长大，希望有朝一日能够代 GIF 成为下一代动态图的标准。对了，我今年 10 岁了，我是 2004 年出身的，由于大家（诸多浏览器）不支持我，尤其我爸爸 PNG 坚决不认我可是亲生的，还死守着那个不中用的 MNG, 所以之前我一直都是默默无闻的成长，但是，最近发生了一件事情让我开始受到大家的关注。

虽然说 Chrome 等 Blink/webkit 内核浏览器忙着宠爱自己的孩子 webP, 而对 APNG 依然不闻不问，但是，有了 iOS 的支持，APNG 仿佛看到了一统江湖的曙光！

二、戒骄戒躁，基本特性介绍#

由于下面 APNG 的称述有很多的 APNG 的实地示例，如果你想看到真实的动画效果，建议使用 FireFox 浏览器，或者 Safari 8 浏览器，或者安装 APNG 解码插件

为什么不同浏览器 APNG 会显示不同的面目呢！这就是 APNG 比较赞的特性啊，超自然向下兼容。要问原因，就要讲讲 APNG 的构成原理啦！首先，APNG 是个 PNG 动图，跟 Gif 动图一样，是由很多帧构成的。其中，第 1 帧就是一张标准的 PNG 图片，后面的帧不仅包含 PNG 图片，还有剩余的动画和帧速等数据。于是，如果浏览器不认识 APNG 后面的动画数据，没关系，因为第 1 帧是标准的，可以无障碍显示；如果支持，自然就后面的帧走起，动画效果就有了！

拿 APNG 靓丽的头像举例，APNG 的头像是个 2 帧的 APNG 图片，第 1 帧就是一张标准的 “你的浏览器不支持 APNG” 字样的 PNG 图片，第 2 帧为 “你的浏览器支持 APNG” 字样的图片以及帧播放间隔时间、播放次数等数据。于是，Chrome 浏览器就显示帧 1（因为不认识 APNG），FireFox 显示帧 2（动画仅播放 1 次）。pingwest 上的一篇译文

一些特有名词大家不必关心（实在有兴趣，可以看这里），主要看 SVG 图形中的三个箭头（没错，是 SVG, IE7/IE8 绕行），可以看到第 1 帧 IDAT 还是 IDAT (png 还是那个 png, 所有浏览器都认识的 png), 但是后面第 2 帧和第 3 帧 IDAT 变成了 fdAT, 乱入了其他些东西 (不是标准 png 了)。

说了这么多，还没大肆宣扬下 APNG 和 gif 相比的好处呢。虽明显的差别在于图片质量，gif 最多支持 256 种颜色，不支持 Alpha 透明通道。这两个问题导致 gif 往往在这两者图形动画上质量很糟糕:

色彩丰富的图片，例如视频 gif 截图（颜色不够使啊）;
含半透明效果的图片（要么全透要么实色）。大家可以看下面的对比图（来自 APNG 养父 mozilla 官方）感受下，免得说 APNG 小女子卖瓜 —— 屌丝皆夸

细腻的效果牺牲的是图片的大小，但这只是对色彩丰富、含 Alpha 半透明的图片（色彩不丰富，可以使用 FireWork 保存为 png8 Alpha 透明，大小跟 gif 一样甚至更小）。

说到对比，不得不提 APNG 的竞争对手 webP. 其也可以实现高质量的图片动画。其浏览器支持统治了 Chrome 以及 Android. 每个爸爸都有私心，APNG 爸爸不鸟 webP 这个孩子，webP 的爸爸不鸟我。唉，未来 APNG 和 webP 谁更受一筹，还真不得而知。目前来看，APNG 支持 FF/Sarari 和 iOS, webP 是 Chrome/Opera 和 Android. 可谓各得半壁江山。鹿死谁手，还真不好说。

三、大家同心、其利断金#

iOS8 对 APNG 的支持意义深远，表明，高质量的动态图片可以开始占领移动端了（PC 端由于 IE 什么都不支持，呵呵，阻碍了发展）。于是，一些以前不太好处理的功能就有了新的技术选项。

OK, 举个例子，之前国际版 QQ 有一个闪屏动画，较复杂，细腻，动感。由于 Gif 动画图片质量堪比罗玉凤，于是放弃，最后还是客户端内嵌视频实现的效果。但是，现在，iOS8 支持了 APNG, 于是，高质量的动画效果有了新的技术解决方案。设计师直接自己做好 APNG 动画图片给开发，一个简单的内嵌页，动画可以随时更新（节日什么的），效果又很赞，牛！至于 Android, 可以使用 webP.

对于普通的 web app 页面，我们也可以让 APNG 和 webP 双剑合璧，通过判断，显示不不同的动画格式实现我们想要的细腻动画效果，赞不赞？嗲不嗲？