71 lines
7.5 KiB
Markdown
71 lines
7.5 KiB
Markdown
---
|
||
title: APNG--PNG的另一种表现方法，GIF的改版？
|
||
date: 2018/8/7 20:10
|
||
tags: [APNG, Firefox, GIF, IE, PNG, 动图]
|
||
categories: 技术
|
||
permalink: 268.html
|
||
index_img: https://xtaolink.cn/f/panda-waving.png
|
||
---
|
||
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浏览器，或者 <a href="https://xtaolink.cn/404/go.php?url=https://chrome.google.com/webstore/detail/apng/ehkepjiconegkhpodgoaeamnpckdbblp">安装APNG解码插件</a>
|
||
|
||
为什么不同浏览器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次）。<a href="https://xtaolink.cn/404/go.php?url=http://www.pingwest.com/why-apng-standard-is-doomed-to-fail/">pingwest上的一篇译文</a>
|
||
|
||
一些特有名词大家不必关心（实在有兴趣，可以看<a href="https://xtaolink.cn/404/go.php?url=http://www.pingwest.com/why-apng-standard-is-doomed-to-fail/">这里</a>），主要看SVG图形中的三个箭头（没错，是SVG, IE7/IE8绕行），可以看到第1帧IDAT还是IDAT(png还是那个png, 所有浏览器都认识的png), 但是后面第2帧和第3帧IDAT变成了fdAT, 乱入了其他些东西(不是标准png了)。
|
||
|
||
说了这么多，还没大肆宣扬下APNG和gif相比的好处呢。虽明显的差别在于图片质量, gif最多支持256种颜色，不支持Alpha透明通道。这两个问题导致gif往往在这两者图形动画上质量很糟糕:
|
||
|
||
1. 色彩丰富的图片，例如视频gif截图（颜色不够使啊）;
|
||
|
||
2. 含半透明效果的图片（要么全透要么实色）。大家可以看下面的对比图（来自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双剑合璧，通过判断，显示不不同的动画格式实现我们想要的细腻动画效果，赞不赞？嗲不嗲？
|
||
|
||
## 四、APNG制作，火火火火(这是令人激动的，因为上面没人看)
|
||
|
||
关于APNG的资源，你只要去这一个地方就好了：<a href="https://xtaolink.cn/404/go.php?url=http://littlesvr.ca/apng/">http://littlesvr.ca/apng/</a>. 几乎有所有的APNG制作软件(目前9个)，还有APNG转GIF, GIF转APNG以及反编译APNG的软件（页面偏下位置）。
|
||
|
||
逗比是使用下面这个软件制作我的：<a href="https://xtaolink.cn/404/go.php?url=http://sites.google.com/site/cphktool/apng-anime-maker">APNG Anime Maker</a>. <a href="https://xtaolink.cn/404/go.php?url=https://code.google.com/p/apng/downloads/list">这个页面下载</a>的（最后一个）。软件很小巧，直接打开免安装。步骤如下：
|
||
|
||
打开软件，点击open, 选中序列图片们,调整每张图片间隔时间（默认100毫秒），总播放次数等信息。调成1000毫秒，点击箭头所示按钮，应用在所有图片上。loop为0表示无限循环。点击save保存图片
|
||
|
||
于是就有下面这几种APNG动图：
|
||
|
||
<a href="https://xtaolink.cn/f/1.png"><img class="aligncenter size-full" src="https://xtaolink.cn/f/1.png" width="640" height="640" /></a>
|
||
|
||
<a href="https://xtaolink.cn/f/z5.png"><img class="aligncenter size-full" src="https://xtaolink.cn/f/z5.png" width="480" height="360" /></a>
|
||
|
||
<a href="https://xtaolink.cn/f/panda-waving.png"><img class="aligncenter size-full" src="https://xtaolink.cn/f/panda-waving.png" width="278" height="248" /></a>
|
||
|
||
## 五、参考资源
|
||
|
||
<li><a href="https://xtaolink.cn/404/go.php?url=https://developer.mozilla.org/en-US/docs/Animated_PNG_graphics">Animated PNG graphics</a></li>
|
||
<li><a href="https://xtaolink.cn/404/go.php?url=https://wiki.mozilla.org/APNG_Specification">APNG Specification</a></li>
|
||
<li><a href="https://xtaolink.cn/404/go.php?url=http://zh.wikipedia.org/wiki/APNG">wiki-APNG</a></li>
|
||
<li><a href="https://xtaolink.cn/404/go.php?url=http://www.pingwest.com/why-apng-standard-is-doomed-to-fail/">低画质的GIF横行网络20年了，更优秀的APNG为什么没能取代它？</a></li>
|
||
<li><a href="https://xtaolink.cn/404/go.php?url=http://littlesvr.ca/apng/">http://littlesvr.ca/apng/</a></li> |