前端vs图片4 apng 前端动图的新姿势

之前我们怎么做帧动画

• 首先需要排除掉gif
  前文所说，gif只支持8位数，而且因为不支持半透明会出现锯齿，因此需要高色彩的动画的话，gif是不能够用的

• 通过js方法，逐帧轮询

  • 将图片制作成雪碧图，js一直轮询，改变图片的position
  • 将图片按名称顺序排列，js一直轮询，替换图片的background url

• 通过css3的 animation 来实现
  与上述的js方法类似，改变图片的position或者替换图片的background
  只不过不是通过js方法来轮询，是通过css3 animation的step来执行，一共N帧，就需要写steps(N)

apng是个啥

现在我们不需要用上面的那几种复杂方式来实现帧动画了，因为有了apng这种图片格式

APNG（Animated Portable Network Graphics）是一个基于PNG（Portable Network Graphics）的位图动画格式，扩展方法类似主要用于网页的GIF 89a，仍对传统PNG保留向下兼容……APNG与Mozilla社区关系密切，格式标准文档就放在Mozilla网站。——源自百度百科

apng可以称为 支持动画的png，目的就是为了替代画质低劣的gif动画

apng 是基于 png 格式扩展的一种位图动画格式，增加了对动画图像的支持，同时加入了 24 位真彩色图像和 8 位 Alpha 透明度的支持，动画拥有更好的质量

apng 对传统 png 保留向下兼容，当解码器不支持 APNG 播放时会展示默认图像。（也就是说浏览器不支持时，会展示第一帧的静态图片）

apng的扩展名就是.png，从文件名上看不出差别，直接在网页上引用图片地址，就完成了帧动画的引用
如下图，图片地址为 https://img-blog.csdnimg.cn/img_convert/e9d91dceef852e9fbc9b4b570ec86c4e.png

上图摘自 apng vs gif demo，可点击网页查看其具体差异

apng的优点

• apng支持的色彩多、支持半透明
  apng可以做更精细的动图，这个刚好弥补gif的最大短板

• apng支持无限循环播放，也支持只循环1-N次
  由于gif只能支持无限循环播放，所以这个特性在特定场景下还是很有用的
  比如一个经典的视频红心收藏动画，你想让动画只执行一次，这个时候ui同学设置apng的循环次数只循环1次就比较适合

apng的不足

• 兼容性不如gif好
  相对比gif来说，apng还比较新，一些比较旧的浏览器（如Chrome 40），对apng还不支持
  不支持的话就是不会正常展示动图，只能展示第一帧

• 未成为png标准
  让人惊讶的是，这么好用的apng，居然一直未成为png的标准
  这里面有几大组织在博弈，因为目前apng属于Mozilla，而png组织之前也推出过mng这种动图图片格式，但是未能成功，但应当仍未放弃，所以一直阻挠apng的标准化

• 浏览器外的使用少
  由于上述两个原因，apng在除了浏览器的应用中，使用程度也比较低，比如在PPT编辑、预览模式下，均无法像gif一样展示动图，制作的软件比gif图少的多

apng如何获得

由于apng的未普及性，很多UI的同学也不知道这种图片如何生成

其实UI同学将帧动画制作完成之后，通过相关工具合成出apng出来即可

个人推荐一款apng制作工具，APNGb Mac版，可以调整帧的频率、循环次数等，各位可以自行搜索操作一下，比较简单

个人实践心得

虽然上面说的 相对比gif来说兼容性不是那么好，不过对于目前主流的浏览器，基本上足够用了
先来看一下can i use上的数据

不出意外的，IE系列全军覆没，不过微软自己都放弃IE了，我们早就不需要兼容IE了

上图后面的UC、QQ、百度浏览器是提示不兼容的，这个其实网站统计的过时了

个人测试的结果，UC、QQ、百度、夸克、华为自带浏览器等一众国产浏览器，都支持apng

包括小程序也支持，个人在2018年最早在小程序上使用apng来展示动图，后来在手机、PC等几个项目上也都使用过

总结 - 推荐使用

虽然未成为png的标准，不过从上文所述，apng优势很明显，实际兼容性良好

很重要的是它对前端开发良好，不用写之前的那段js轮询，想使用gif一样方便

从个人几年来的实践来看，放心的用！