JavaScript操控apng的动画状态

一、带着问题去解决

想要通过js来操控apng，必须要搞清楚以下几点：

1. apng是什么
2. apng动画是怎么实现的
3. 怎样通过js来控制apng的动画 带着以上问题，我们来进一步探究

二、apng是什么

apng全称Animated Portable Network Graphics（便携式网络动画），是PNG的位图动画扩展的动画格式. what?这个不就是gif，就是一个会动的图片嘛！ 存在即是合理的 apng增加了对动画图像的支持，同时加入了24位图像和8位Alpha透明的支持，这就意味着apng画质更加好的原因了。 并不是所有的浏览器都支持这种格式，因此这个图片可能存在兼容性 总结：apng就是一个高质量会动的图片，但是存在兼容性。

三、apng动画是怎么实现的

apng是有多个png图片组成了，每个png图片就是动画中的每一帧。如果遇到不支持apng的浏览器直接显示第一帧动画。 我们再来看看apng实现原理 上面三个图是不同的png的数据格式，最下面的是apng的数据格式，让我们来看看这几个数据格式的组成部分（这里需要特别关注，这个JavaScript控制apng播放的关键点） png格式说明：

• PNG Signature： 是png图片的标识，用它可以识别这个图片是不是png。
  • 字节：0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a
• IHDR： 是文件头数据块，它包含了png图片的宽高、深度、标识等信息
• IDAT： 是图像数据块，存放图像数据，也是图像内容的核心数据
• IEND： 是结束数据块，也是固定的字节[0x00, 0x00, 0x00, 0x00, 0x49, 0x45, 0x4E, 0x44, 0xAE,0x42, 0x60, 0x82] 多个png压缩到apng的时候，增加了3个数据块，acTL、fcTL、fdAT： acTL： 是告诉解析器这个是apng图片，包含apng的循环次数，动画总帧数等(这个也是用来检测是不是apng，以及播放次数等) fcTL： 帧控制块，每一帧都必须有的，属于 PNG 规范中的辅助块，包含了当前帧的序列号、图像的宽高 fdAT： 帧数据块，和 IDAT 意义相同，都是图像数据。但是比 IDAT 多了帧的序列号，因为动画存在多帧。图中可以看到第一帧的图像数据依然叫做 IDAT，第 2 帧以后才叫 fdAT，这是因为第一帧和 PNG 数据的格式保持相同。在不支持 APNG 的浏览器上，可以降级为静态图片，只展示第一帧。 根据上面apng与png的关系和规律我们就更好的用js控制apng了

四、JavaScript操控apng播放的构想

如上流程图，将apng根据的数据块将apng的动图拆分成每一帧，记录下apng的这些数据：

• apng的宽高
• 循环次数
• 每帧的宽、高、距离画布left、top、播放时长，图形内容、以及是否复用绘制过的帧数据标识

注释： 是否复用绘制过的帧数据标识作用： 在png图像有重复的情况下，如果没有重复利用，这样活导致apng的尺寸比较大，为了提高性能，压缩，复用重复的图像

将每张图片转成URL，根据播放状态在canvas上绘制图片。

五、核心代码实现--分析apng-js

数据解析

1. 根据 PNG Signature、acTL判断是不是apng图片

2. 解析的头部数据apng，宽高

3. 获取apng的循环播放次数

4. 解析每帧的属性数据

5. 获取每帧的图像数据

6. 其他数据解析

将每帧数据转成URL，便于后面canvas绘制

▶️准备工作做好了，开始播放了▶️

通过requestAnimationFrame+每帧播放时长、播速、是否开发播放、暂停、停止等控制apng流畅播放 咱们核心看一下renderNextFrame、和play方法

play

renderNextFrame

六、总结

apng通过js控制动画流程： apng解析成每帧的png图像 → 将每个png组装好生成URL → 根据每帧播放时长、播速、是否开发播放、暂停、停止等控制apng的播放