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的构成原理啦!首先,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往往在这两者图形动画上质量很糟糕: 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的资源,你只要去这一个地方就好了:http://littlesvr.ca/apng/. 几乎有所有的APNG制作软件(目前9个),还有APNG转GIF, GIF转APNG以及反编译APNG的软件(页面偏下位置)。 逗比是使用下面这个软件制作我的:APNG Anime Maker. 这个页面下载的(最后一个)。软件很小巧,直接打开免安装。步骤如下:

How To Use: Delay: Enter a number in delay box and click “msec” or “fps” to set the delay time for the selected frames, you can set “All” apply to all frames. Offset and Increment: Offset is X and Y position at which to render the selected frames, Increment X and Y auto increase the offset for the following selected frames. Dispose method:

  • None: No disposal is done on this frame before rendering the next; the contents of the output buffer are left as is.
  • Background: The frame’s region of the output buffer is to be cleared to fully transparent black before rendering the next frame.
  • Previous: The frame’s region of the output buffer is to be reverted to the previous contents before rendering the next frame.

Blend method:

  • Source: All color components of the frame, including alpha, overwrite the current contents of the frame’s output buffer region.
  • Over: The frame should be composited onto the output buffer based on its alpha, using a simple OVER operation.

Optimize: It optimize the file size of the animation. It is designed for movie clip with small scene change. Set “Lossy” to have more compression, “Tolerance” affect between file size and quality. Set “Selected Region Only”, then drag a region in the image preview with scene change. Optimize will only search in the region selected. It can give more compression for lossy movie. “Selected Image Only” optimize the image selected only. Loop: Number of times to loop the animation. 0 indicates infinite looping. Compression Level: Set the compression level of the PNG.

我知道都看不懂,这里是中文教程:
1.打开软件,点击open, 选中序列图片们,

  1. 可以调整每张图片间隔时间(默认100毫秒),总播放次数等信息。 如上,调成1000毫秒,点击箭头所示按钮,应用在所有图片上。loop为0表示无限循环。
    3.点击save保存图片 于是就有下面这几种APNG动图:

五、参考资源



技术  

APNG FireFox GIF IE iOS Mozilla PNG webP 免费 动图

本博客所有文章除特别声明外,均采用 署名-非商业性使用 4.0 国际 (CC BY-NC 4.0) 协议进行许可。转载请注明出处!