简要
兼容png格式,在png格式的基础上加入额外的信息描述动画序列,在不支持apng的地方可以显示第一帧内容。帧间无损压缩,有效降低存储大小。
结构
APNG与PNG相同,由若干个Chunk组成。每个Chunk的结构如下:
Length(4B) + Type(4B) + Data + CRC(4B)
(refs: https://www.w3.org/TR/PNG/#5Chunk-layout)
Type 的四个字节,分别为四个英文字母,大小写分别代表不同的意义,除文档已定义名字外可以自由命名(如 oRIg)
- 1字母:大写/小写 重要数据/附加数据
- 2字母:大写/小写 标准有定义的类型/自定义类型
- 3字母:大写/小写 未使用
- 4字母:大写/小写 非复制安全/复制安全 (对于编辑器来说复制安全的数据可以直接复制)
Data 长度为 Length
一般的PNG结构形如:
PNGSignature(8B) + IHDR(25B) + IDAT + IEND(12B)
PNGSignature
:固定值 0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0aIHDR
:PNG信息IDAT
:图像数据IEND
:结束标识,数据长度为0
`IHDR数据结构`
Width 4 bytes
Height 4 bytes
Bit depth 1 byte
Colour type 1 byte
Compression method 1 byte
Filter method 1 byte
Interlace method 1 byte
(refs: https://www.w3.org/TR/PNG/#11IHDR)
一般的APNG结构形如:
PNGSignature(8B) + IHDR(25B) + acTL + fcTL + IDAT + [ fcTL + fdAT ... ] + IEND(12B)
其中
第一帧:fcTL + IDAT
后续帧:fcTL + fdAT
acTL
:动画控制块(Animation Control Chunk),记录总帧数和循环次数,其中循环次数0表示无限循环fcTL
:帧控制块(Frame Control Chunk),记录每一帧的信息,fdAT
:帧数据块(Frame Data Chunk),每帧图像数据
`acTL数据结构`
byte
0 num_frames (unsigned int) Number of frames
4 num_plays (unsigned int) Number of times to loop this APNG. 0 indicates infinite looping.
`fcTL数据结构`
byte
0 sequence_number (unsigned int) Sequence number of the animation chunk, starting from 0
4 width (unsigned int) Width of the following frame
8 height (unsigned int) Height of the following frame
12 x_offset (unsigned int) X position at which to render the following frame
16 y_offset (unsigned int) Y position at which to render the following frame
20 delay_num (unsigned short) Frame delay fraction numerator
22 delay_den (unsigned short) Frame delay fraction denominator
24 dispose_op (byte) Type of frame area disposal to be done after rendering this frame
25 blend_op (byte) Type of frame area rendering for this frame
`fdAT数据结构`
0 sequence_number unsigned int Sequence number of the animation chunk, starting from 0.
4 frame_data X bytes Frame data for this frame.
(refs: https://developer.mozilla.org/en-US/docs/Mozilla/Tech/APNG)
相关资料
https://www.w3.org/TR/PNG - png格式文档
https://developer.mozilla.org/en-US/docs/Mozilla/Tech/APNG - apng格式文档
https://wiki.mozilla.org/APNG_Specification - apng格式文档
https://en.wikipedia.org/wiki/APNG
https://baike.baidu.com/item/APNG/3582613
https://aotu.io/notes/2016/11/07/apng/index.html - 写得不错的apng介绍文章