在前端开发中，动态图片能够增强用户体验，而 APNG 就比 GIF 或者普通的图片格式更加丰富，因为 APNG 支持透明度、帧间延迟时间等等属性。现在，有一个好消息，有一个 npm 包叫做 apng-assembler，它可以帮助我们将多张 PNG 图片合成 APNG 格式的动态图片。
安装 apng-assembler
在使用 apng-assembler 之前，我们需要先安装它。我们可以通过以下方式来安装：
npm install -g apng-assembler
这条命令会把 apng-assembler 安装到全局。
使用 apng-assembler
1. 合成带有循环的 APNG 图片
首先，我们创建几个 PNG 文件，这里用红色和蓝色两个文件作为例子，分别命名为 "red.png" 和 "blue.png"。随后，我们使用以下命令合成它们：
apngasm -o output.png -F 6000 red.png blue.png
上面的 -o 参数指定输出文件，-F 表示每一帧之间的间隔时间。在上面的例子中，我们设置了 6 秒钟间隔时间。
最后一个参数是输入文件的文件名或文件名列表。
运行上述命令后，我们就得到了一个名为 output.png 的 APNG 图片，它会无限循环从帧 1 到帧 2，即从红色过渡到蓝色，然后再从蓝色过渡到红色。
2. 合成带有循环和透明度的 APNG 图片
接下来，我们将创建带有透明度的 PNG 图片 "alpha_red.png" 和 "alpha_blue.png"，并将它们合并成带有透明度的 APNG 图片。我们可以通过以下命令合成它们：
apngasm -o output_alpha.png -F 6000 alpha_red.png alpha_blue.png
运行上述命令后，我们就得到了一个名为 output_alpha.png 的 APNG 图片，它会无限循环从帧 1 到帧 2，即透明度逐渐过渡从红色到蓝色，然后再透明度逐渐过渡从蓝色到红色。
3. 合成带有指定循环次数和播放次数的 APNG 图片
最后，我们创建一个带有指定循环次数和播放次数的 APNG 图片。使用以下命令可以创建一个只播放一次的 APNG 图片：
apngasm -o output_once.png -F 6000 -l 1 -c 1 alpha_red.png alpha_blue.png
上述命令中，-l 和 -c 参数分别用来制定循环次数和播放次数。
总结
我们可以看到，使用 apng-assembler 来合成动态的 APNG 图片非常简单，只需按照上述步骤进行操作即可。使用 APNG 图片来增强应用程序界面的交互性，是一个不错的选择，而且这个库给了我们非常灵活的开发解决方案。
示例代码
# 合成带有循环的 APNG 图片 apngasm -o output.png -F 6000 red.png blue.png # 合成带有循环和透明度的 APNG 图片 apngasm -o output_alpha.png -F 6000 alpha_red.png alpha_blue.png # 合成带有指定循环次数和播放次数的 APNG 图片 apngasm -o output_once.png -F 6000 -l 1 -c 1 alpha_red.png alpha_blue.png
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056c5181e8991b448e5d3d