APNG面向移动与未来的新动画图片格式揭秘与制作全技巧

• 动画应用的五个阶段
  • 第一阶段：上古阶段
  • 第二阶段：轻应用阶段
  • 第三阶段：脚本动画时代
  • 第四阶段：富媒体精细呈现阶段
• 矢量脚本动画的集大成者-Bodymovin和Lottie
• APNG方案
  • 什么是apng
  • APNG 简史
    • MNG
    • APNG
    • libpng程序库
    • 首次支持
    • 标准化申请
  • 为什么GIF能存活这么长时间
  • 为什么要取代它？
  • APNG 的组成
  • APNG 帧间优化
• 预览APNG
• 制作APNG
  • 使用在线工具制作
  • 使用AE插件制作
    • BX-Webp/Apng Exporter插件
    • 如何安装：
    • 使用步骤：
    • 工具原理
    • iSparta及其它工具

动画应用的五个阶段

众所周知，动画，这一表现形式，作为web与移动开发的重要展现形式，一直占据着很重要的地位。
纵观互联网时代的动画，经历过以下五个阶段：

第一阶段：上古阶段

这阶段的动画以flash（.swf格式）等为表现形式，重在富媒体。

第二阶段：轻应用阶段

随着人们对flash带来的不开放、安全以及大文件反感，人们纷纷将动画转向了gif为代表的轻动画阶段，虽然早在macromedia公司的网页三剑客中，就分别提供了swf、gif两大格式的制作工具，分别为flash、fireworks，但swf后期在网页上的泛滥成灾，一渡以“动图”作为表现，深受欢迎。

第三阶段：脚本动画时代

以纯web（web即os、云计算）为代表的时到来，Google登上时代舞台的中央，提出ajax等一系列理念，引导行业以javascript、jquery为代表的脚本动画时代。

第四阶段：富媒体精细呈现阶段

全球互联网设施大幅改进、4G+时代到来，进入了mp4视频动画时代，这主要体现在本世纪20年代，由于mp4类动画的能够表现得更加细腻，也就更加深受欢迎。
同时诸如svg、cavans等矢量格式也走上了舞台的中央。
这其中集成了包括 JS、CSS的最新技术 。

矢量脚本动画的集大成者-Bodymovin和Lottie

在矢量化呈现阶段中，最优秀的应当属Bodymovin和Lottie方案，这是facebook团队的一个开源项目 。
为此，我们做了全部复盘，写在：
《看逐浪CMS技术小哥做SVG动画（附使用Bodymovin和Lottie将Adobe After Effects(AE)程式转为 HTML5/Android/iOS原生的动画全过程-即AE转svg\canvas\html5动画）》
一文中，也是目前在知乎上答案点赞最多的方案。
https://www.z01.com/blog/products/3524.shtml

APNG方案

什么是apng

下面开始祭出本文的主题，APNG。

之前诸多方案，要么是文件过大，要么是呈现过差，要么安全性不足，要么就是跨平台性不够。
于是21世纪20年代后期，APNG正式登上舞台。

说到动图，大家首先想到的肯定是 GIF。但 GIF 最大的缺点是，图像是基于颜色列表的（存储的数据是该点的颜色对应于颜色列表的索引值），最多只支持 8 位（256 色）。这使得使用 GIF 格式不可能得到高清的动画图片。

APNG 是 Mozilla 在 2008 年发布的一种图片格式，旨在替换掉画质低劣的 GIF 动画。它实际上只是相当于 PNG 格式的一个扩展，所以 Mozilla 一直想把它合并到 PNG 标准里面去，但它目前并没有获得 PNG 组织官方的认可。

APNG 简史

MNG

在 APNG 之前它还有一个老冤家叫 MNG（Multiple-image Network Graphics）即多图像网络图形，1996 年 6 月提出 PNF（Portable Network Frame）草案，同年8月更名为 MNG ，2001 年 1 月 31 日发布 MNG 规范 1.0 版本，MNG 是出自 PNG 开发组之手，但由于结构复杂的 MNG 程序库，使用过程会占用大量的资源，早期只有较少的浏览器支持，Chrome、IE、Opera、Safari 则从未支持过。

APNG

2004 年，由 Mozilla 公司两位 Mozilla 程序员 Stuart Parmenter 和 Vladimir Vukićević 共同设计出 APNG，他们希望 Mozilla 社区能使用它，但提案未能通过。

libpng程序库

2006 年，Google Summer of Code 活动中，加拿大圣力嘉学院的学生为 libpng 程序库加入了对 APNG 支持，此后开发者再次推荐给 Mozilla 社区，不过仍然遭到拒绝。

首次支持

2007 年 3 月 23 日，Mozilla 后知后觉，在 Mozilla Firefox 3.0 中 首次支持 APNG 格式。

标准化申请

2007 年 4 月 20 日，Mozilla 希望 APNG 能成为官方标准，因此 PNG 组织发起投票，最终以8：10的票数否决了 APNG 进了官方标准，因为 PNG 组织决心继续推广 MNG，但这不并影响 Mozilla 继续支持 APNG。

为什么GIF能存活这么长时间

诞生于 1987 年的 GIF 为什么能存活这么久？

主要有四个原因：

• 几乎所有的主流浏览器都支持 GIF
• 早期选择不多，GIF 几乎是唯一选择（GIF - 1987、JPEG - 1992、PNG - 1996、APNG - 2004、WebP - 2010）
• 实现起来简单，制作的工具多
• 采用 LZW 数据压缩算法，使得 GIF 体积小，在早期慢速的互联网易于传播

为什么要取代它？

1.图像质量
下面两个文件，不用说，图2清晰的那个是apng

apng与gif对比

如果你使用的是非 Firefox、Safari 浏览器，那 APNG 格式的图片会向下兼容显示为静态图，你可以更换 Firefox、Safari 浏览器或者在 Chrome 浏览器安装 APNG Extension for Google Chrome 扩展来兼容，通过两者对比能总结出以下区别：

GIF：

• 最多支持 8 位 256 色，色阶过渡糟糕，图片具有颗粒感
• 不支持 Alpha 透明通道，边缘有杂边

APNG：

• 支持 24 位真彩色图片
• 支持 8 位 Alpha 透明通道
• 向下兼容 PNG

2.图片体积

从几组 GIF、APNG、WebP 的对比中可以发现，无论在纯色的图片或是多彩的图片，大部分情况下 APNG 依旧能比 GIF、WebP 以及有损的 WebP 的体积小。

APNG 的组成

APNG 是基于 PNG 格式扩展的，首先需要了解一个简单的 PNG 文件组成结构：

PNG Signature | IHDR | IDAT | IEND

PNG 由 4 部分组成，首先以 PNG Signature（PNG签名块）开头，紧接着一个 IHDR（图像头部块），然后是一个或多个的 IDAT（图像数据块），最终以 IEND（图像结束块）结尾。

APNG 规范引入了三个新大块，分别是：acTL（动画控制块）、fcTL（帧控制块）、fdAT（帧数据块），下图是三个独立的 PNG 文件组成 APNG 的示意图。

• acTL 块必须在第一个 IDAT 块之前，用于告诉解析器这是一个动画 PNG，包含动画帧总数和循环次数的信息
• fcTL 块是每一帧都必须的，出现在 IDAT 或 fdAT 之前，包含顺序号、宽高、帧位置、延时等信息
• fdAT 块与 IDAT 块有着相同的结构，除了 fcTL 中的顺序号
  从图中可以发现第一帧与后面两帧不同，那是因为第一帧 APNG 文件存储的为一个正常的 PNG 数据块，对于不支持 APNG 的浏览器或软件，只会显示 APNG 文件的第一帧，忽略后面附加的动画块，这也是为什么 APNG 能向下兼容 PNG 的原因。

APNG 帧间优化

APNG 会通过算法计算帧之间的差异，只存储帧之前的差异，而不是存储全帧，使得 APNG 文件大小有显著的减少。

预览APNG

目前最方便的预览apng的方式，是使用电脑上的浏览器来浏览。
当然推荐使用chrome或edge现代浏览器，而IE是显然不支持的。
也正是因为预览apng动图需要拖拽到浏览器中才可以查看动画，所以传播性没有GIF图强。

制作APNG

已经有很多工具支持制作 Animated PNG 图片，相信将来也会越来越多。

使用在线工具制作

如果只是想体验一下制作的效果，可以使用这个站点来快速生成： assembler

使用AE插件制作

BX-Webp/Apng Exporter插件

Adobe After Effects强大的视频制作能力，天下能有出其右者。
而基于ae的插件，自然是不少设计师、开发者的首选。

基原理是通过BX-Webp/Apng Exporter插件在AE软件中来实现。

如何安装：

• 1.下载 BX-WebpApngExporter.zxp 文件，点击这里下载.https://raw.githubusercontent.com/bigxixi/webp_apng_exporter_for_AE/master/BX-WebpApngExporter.zxp
• 2.根据自己的操作系统下载 ZXP 安装工具：
  https://aescripts.com/learn/zxp-installer/
  然后将 BX-WebpApngExporter.zxp 拖进安装工具（或者通过 File -> Open 选择该文件安装）

(注：如果不能打开，说明是外网，不代表URL无效)。

使用步骤：

• 1、AE 中打开需要导出的合成，在「合成设置」中设置好帧率。
• 2、在「窗口」-「扩展」中运行「BX Webp/Apng Expoter」。
• 3、选择要导出的格式的对应导出地址，并根据情况勾选「是否导出」。
  （点击「WEBP 地址」、「APNG地址」按钮来选取，也可以手动输入、修改。）
• 4、设置画质，取值为0-100之间的整数，数字越大画质越好，图片越大。
• 5、设置循环次数，取值为整数，0为无限循环。

工具原理

下面是一段插件运行时，在e:\desktop目录下产生的一个临时bat脚本：

@echo off
setlocal enabledelayedexpansion
set SrcFolder="E:\华为主题\0531学习\a01"
set DstFileApng="E:\华为主题\0531学习\a01.png"
set apngasm="C:\Program Files (x86)\Common Files\Adobe\CEP\extensions\com.bigxixi.WebpApngExporter\apps\win\apngasm64.exe"
set pngq="C:\Program Files (x86)\Common Files\Adobe\CEP\extensions\com.bigxixi.WebpApngExporter\apps\win\pngquant.exe"

set /a loop = 0
set /a fps = 20
set /a q = 80
set /a fDuraton = 1000/%fps%

cd /d %SrcFolder%
for /f "delims=" %%i in ('"dir /a/s/b/on *.png*"') do (  
  echo %%i
  %pngq% "%%~nxi" --speed 1 --quality %q% -f --ext .png
  set "imgs=!imgs!"%%i" "
) 
echo %imgs%

%apngasm% %DstFileApng% %imgs% 1 %fps% -l%loop%

cd ..
rd /s /Q %SrcFolder%

cd "E:\华为主题\0531学习"
start .
del %0

iSparta及其它工具

也有朋友觉得使得BX-Webp/Apng ExporterAE插件过于麻烦（是的，这个插件有时会最终无法合成）。
那没关系，我们还有iSparta等工具。
以iSparta工具为例，则可以直接将序列PNG合并成APNG动画。

其使用方法如下：
一、下载iSparta
在此链接：https://github.com/iSparta/iSparta/releases 下载对应电脑系统的 iSparta ，也可以通过本文档附带的“iSparta安装包”来获取，并安装好。目前支持windows、mac、linux 三个系统版本。安装后打开iSparta。

二、导入文件
1、文件序列化：将需转换的每一帧PNG（每一帧的图片尺寸必须相同）的文件名按照序列来命名（如xxx01.png、xxx02.png、xxx03.png…xxx11.png）。注：数字的位数要保持一致，比如有15帧，第一帧的数字应该是01，以此类推

导入文件：将序列化好的文件（或者包含序列化好的文件的文件夹）拖到 iSpata 面板，或者直接点击面板中心区选择目录。

三、 参数配置
把 png 图片拖进去后，“输出设置”面板也就是下图的 A 区会自动出现，也可以手动点击右下角的设置icon，也就是下图的 B 区打开。可配置参数为：帧频（默认26帧/秒）、循环次数（默认无限循环）、输出文字、输出格式、压缩质量（默认为80%）。

（1） 这些配置项更改后均会保存起来，下次打开应用程序时会恢复上一次的设置。

（2）其中，压缩比越高输出的质量越好，如果对输出的图片质量不满意，可以尝试修改压缩比来提高输出的图片质量。

（3）如果某些帧之间需要延时，可以将需要延时的帧图片复制几张（按延时长短决定复制数量），然后再重新按序列命名图片。

（4）输出目录默认是在每帧 png 图片所在的目录。也可以通过点击 C 区重新选择输出目录。

四、 输出
点击“开始”按钮，转换过程会花费一定的时间，请耐心等待。面板会提示转换进度。

五、 查看
在相应的输出目录找到输出的APNG图片，使用chrome、edge、firefox等现代浏览器打开该图片即可看到图片动态效果。

或者使用浏览器（chrome）打开APNG在线查看器，将生成的apng图片拖入即可查看。

囿于时间，关于APNG图片的介绍就写到这里， 更多信息请访问Zoomla!逐浪CMS官网，我们将不断更新方面的知识，为同行提供优秀的开发工具和中间件。