动图
说到动图，首先我们想到的 GIF 格式，GIF 在网络上流行已久，各种动态表情包都是 GIF 图做的。 但是 GIF 的缺点也很明显，透明背景的 GIF 无法做到像素的绝对平滑过度，于是乎我们可以看到带透明的 GIF 图周围杂边非常明显，如下：
通常解决这种问题是在外面加上一圈白色的描边，这样在白色背景下可以掩盖杂边问题，但是在深色背景下依然无解：
APNG 完美的解决了这个问题。
APNG
APNG 全称是 Animated Portable Network Graphics ， 是 PNG 格式的动画扩展。APNG 的第1帧为标准PNG图像，剩余的动画和帧速等数据放在PNG扩展数据块里。这里有点类似于视频的关键帧，关键帧有完整的图像信息，而两个关键帧之间只保留了变化的信息。
简单来说，APNG 支持全彩和透明，无杂边问题，如丝般润滑：
不过，APNG 的标准化之路相当坎坷，2004年创立以来，知道今天依然没能被纳为 PNG 的标准。不过真金不怕红炉火，酒香不怕巷子深，越来越多的软件开始支持 APNG，也有很多开源库可以让我们用上 APNG。
Android 上有APNG View 等，iOS 上有 APNGKit 等。
而 Web 上，Firfox 和 Safari 是支持 APNG 的，不过 Chrome 不支持。 Chrome 支持自己的亲儿子 WebP，不支持 APNG，而苹果支持 APNG，不支持 WebP，真是好任性，可以一人让一步都支持吗？
不过，Web 上想用 APNG 还是有办法的，我们有强大的 Canvas 啊！
Canvas & APNG
Web 上我们用 Canvas 来渲染 APNG，主要用到一个开源库 apng-canvas 。
简单写了个 Demo ：
html如下：
代码语言：javascript复制<body>
<img class="apng" id="apng-basketball" src="./apng-basketball.png">
<div>
<img src="./elephant.gif">
<img class="apng" id="apng-elephant" src="./elephant.png">
</div>
<div>
<div class="color-item" style="background-color:red"></div>
<div class="color-item" style="background-color:yellow"></div>
<div class="color-item" style="background-color:black"></div>
<div class="color-item" style="background-color:white"></div>
</div>
<script type="text/javascript" src="./apng-canvas.min.js"></script>
</body>比较简单，这里用了两张 APNG 图片和一张 GIF 图，下面写了几个 div 用来改变背景色。最后引入了 apng-canvas 这个库。
javascript代码如下：
代码语言：javascript复制 var imgs = document.querySelectorAll(".apng");
APNG.ifNeeded().then(function(){
for (var i=0; i < imgs.length; i ) {
APNG.animateImage(imgs[i]);
};
});
var colorItems = document.querySelectorAll(".color-item");
for (var i=0; i < colorItems.length; i ) {
colorItems[i].onclick = function(){
var color = this.style.backgroundColor;
document.body.style.backgroundColor = color;
}
};代码很简单，APNG 这个对象就是 apng-canvas 这个库提供的，ifNeeded() 函数用来判断浏览器是否支持APNG，如果支持，后面的事情我们就不用干了。
APNG.animateImage(imgs[i]); 这里传入一个 Image Element，之后什么插入 Canvas 什么渲染之类的活就全部帮我们做完了，简直是太方便了，太方便了（口水已经流出来了）。
效果如下：
这里录的可能不是很清晰，推荐直接访问线上 Demo:
http://imbeta.cn/demo/apng/apng.html
制作APNG
已经有很多工具可以制作 APNG 了，可以参考张鑫旭大大的博客APNG历史、特性简介以及APNG制作演示 以及 http://littlesvr.ca/apng/。
另外，我们组也有一款 APNG 制作和压缩工具，isparta，制作人是 jeakeyliang 和 hahnzhu 。
在说几句关于和 GIF 体积的比较，无损 APNG 大概是比 GIF 稍微大一点，有损压缩之后，APNG 可以比 GIF 小约 30% 而且也没有杂边问题。
另外，Line 的的动态贴图，还有 iOS 10 iMessage 中的各种动态表情也都是使用 APNG 的，看来前途还是光明的嘛。
Demo 的源码地址： https://github.com/bob-chen/canvas-demo/tree/master/basic/apng
参考
https://davidmz.github.io/apng-canvas/
http://www.zhangxinxu.com/wordpress/2014/09/apng-history-character-maker-editor/
https://isux.tencent.com/introduction-of-apng.html
https://www.zhihu.com/question/27201109
