逐帧图新的解决方式

在前端开发中常常会使用到逐帧图，常用的逐帧图处理方式有雪碧图、Gif、animation

在最近的一个项目中，客户想要一个礼花的效果，给了一个gif大小750*1500，58张图片，
尝试用雪碧图，结果太大，pass，于是采用层叠58张图片用animation控制显示隐藏达到逐帧的效果，测试在旧设备上逐帧太卡，不完美。

APNG的特性简介

APNG是种类似GIF的动态图片，开发中使用GIF展现包含透明背景的动态效果往往很糟糕，比如图像边缘的白边、锯齿、色彩失真。
用APNG代替GIF可以完美解决上述问题。APNG的文件后缀为”xx.png”通过专用软件可以将PNG序列帧文件制作成APNG动态图片。

I0S8之后全面支持了APNG,目前iOS12信息iMessage中的各种动态表情使用的即是APNG图，可以在Safari浏览器中打开播放。Android原生并不支持APNG图，可以使用第三方框架便捷实现。Chrome、火狐、Safari 等主流浏览器均已支持APNG。不用担心兼容问题。

GIF虽然支持透明，但他只支持将某个颜色标记成透明，也就是不支持半透明。只支持完全透明或者完全不透明。如果把一一个边缘是半透明的
图片转换成GIF,就会出现令人难以接受的白边、锯齿问题。而APNG由多张PNG图片组成，完全能够胜任半透明图像，透明度可以有256级。

GIF是一个非常古老的格式，1987 年诞生，最后一个版本是1989年，已经29年没有更新过技术。APNG诞生于2004年，十几年的科技进步不容小觑。由于技术硬伤，GIF最多只能显示256种颜色。随着移动应用微动效的普及，透明动态图用得越来越频繁，色彩失真的GIF显然无法
满足产品的严苛需求。APNG完美支持1600多万种颜色。