动画应用的五个阶段
第一阶段：上古阶段
第二阶段：轻应用阶段
第三阶段：脚本动画时代
第四阶段：富媒体精细呈现阶段
矢量脚本动画的集大成者-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类动画的能够表现得更加细腻，也就更加深受欢迎。
矢量脚本动画的集大成者-Bodymovin和Lottie
在矢量化呈现阶段中，最优秀的应当属Bodymovin和Lottie方案，这是facebook团队的一个开源项目 。
APNG方案
什么是apng
下面开始祭出本文的主题，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.图像质量
c92cc27e26c9422fbd99229b0ba59636.jpeg
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 帧间优化
APNG 会通过算法计算帧之间的差异，只存储帧之前的差异，而不是存储全帧，使得 APNG 文件大小有显著的减少。
预览APNG
目前最方便的预览apng的方式，是使用电脑上的浏览器来浏览。
制作APNG
已经有很多工具支持制作 Animated PNG 图片，相信将来也会越来越多。
使用在线工具制作
如果只是想体验一下制作的效果，可以使用这个站点来快速生成： assembler
使用AE插件制作
BX-Webp/Apng Exporter插件
Adobe After Effects强大的视频制作能力，天下能有出其右者。
基原理是通过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 安装工具：
(注：如果不能打开，说明是外网，不代表URL无效)。
使用步骤：
1、AE 中打开需要导出的合成，在「合成设置」中设置好帧率。
2、在「窗口」-「扩展」中运行「BX Webp/Apng Expoter」。
3、选择要导出的格式的对应导出地址，并根据情况勾选「是否导出」。
4、设置画质，取值为0-100之间的整数，数字越大画质越好，图片越大。
5、设置循环次数，取值为整数，0为无限循环。
[图片上传失败...(image-b8931d-1654325261767)]
工具原理
下面是一段插件运行时，在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工具为例，则可以直接将序列PNG合并成APNG动画。
其使用方法如下：
二、导入文件
导入文件：将序列化好的文件（或者包含序列化好的文件的文件夹）拖到 iSpata 面板，或者直接点击面板中心区选择目录。
三、 参数配置
（1） 这些配置项更改后均会保存起来，下次打开应用程序时会恢复上一次的设置。
（2）其中，压缩比越高输出的质量越好，如果对输出的图片质量不满意，可以尝试修改压缩比来提高输出的图片质量。
（3）如果某些帧之间需要延时，可以将需要延时的帧图片复制几张（按延时长短决定复制数量），然后再重新按序列命名图片。
（4）输出目录默认是在每帧 png 图片所在的目录。也可以通过点击 C 区重新选择输出目录。
四、 输出
五、 查看
或者使用浏览器（chrome）打开APNG在线查看器，将生成的apng图片拖入即可查看。
囿于时间，关于APNG图片的介绍就写到这里， 更多信息请访问Zoomla!逐浪CMS官网，我们将不断更新方面的知识，为同行提供优秀的开发工具和中间件。
