另一种动效-APNG

1. APNG 是什么

以下来自wikipedia （中文wiki他没更新）

Animated Portable Network Graphics (APNG) is a file format which extends the Portable Network Graphics (PNG) specification to permit animated images that work similarly to animated GIF files, while supporting 24-bit images and 8-bit transparency not available for GIFs. It also retains backward compatibility with non-animated PNG files.

The first frame of an APNG file is stored as a normal PNG stream, so most standard PNG decoders are able to display the first frame of an APNG file. The frame speed data and extra animation frames are stored in extra chunks (as provided for by the original PNG specification). APNG competes with Multiple-image Network Graphics (MNG), a comprehensive format for bitmapped animations created by the same team as PNG. APNG’s advantage is the smaller library size and compatibility with older PNG implementations.

In a comparison made between GIF, APNG and WebP, it was shown that APNG kept lower file size while keeping at least equal quality.

粗略的翻译一下

动画便携式网络图形（APNG）是一种继承自便携式网络图形（PNG）的文件格式，他允许像gif文件一样播放动图，还拥有gif不支持的24位图像和8位透明性。 它还保留了与非动画PNG文件的向后兼容性。

APNG文件的第一帧存储为普通PNG流，因此大多数标准PNG解码器都能够显示APNG文件的第一帧。 帧速度数据和额外的动画帧存储在额外的chunks中（如原始的PNG规范所规定）。 APNG的竞争者是由PNG团队创建的位图动画的全面格式——多图像网络图形（MNG）。与其相比，APNG的优势是更小的存储大小以及对旧的PNG完全兼容。

通过对比 GIF、APNG和WebP，可以看出APNG在质量相同的时候有着更小的体积。

粗略的总结一下

APNG是动的PNG。

补充

APNG的扩展名为 .png 或者 .apng。是的，.png 当然有可能是 APNG 文件

2. 兼容性

在2021年2月的现在，APNG的兼容性如下：
可以看到99%的浏览器都兼容了，所以基本可以放心大胆的使用了。
对于不兼容的浏览器，APNG会显示为动画的第一帧。

3. apng的优势是什么

正如上文的介绍中附上的链接，apng比webp更小，对比数据来源来自：http://littlesvr.ca/apng/gif_apng_webp3.html

GIF = 43 920 bytes	APNG = 34 210 bytes
WebP = 41 064 bytes	Lossy WebP = 73 774 bytes
GIF = 43 132 bytes	APNG = 30 823 bytes
WebP = 55 968 bytes	Lossy WebP = 114 518 bytes
GIF = 200 700 bytes	APNG = 168 411 bytes
WebP = 424 752 bytes	Lossy WebP = 394 118 bytes

4. 在页面上的基础使用

正如简单的png一样，一个img标签足以。

5. 在页面上的动画化使用

可以借助 apng-canvas，将其转成 canvas ，然后以使用canvas的的方式使用它。
apng-canvas 的原理解析，可以参考网易云前端团队的文章：
Web 端 APNG 播放实现原理)

本文参考： APNG 那些事: https://aotu.io/notes/2016/11/07/apng/index.html Web 端 APNG 播放实现原理https://juejin.cn/post/6857678436304388104