之前我们怎么做帧动画

  • 首先需要排除掉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://i-blog.csdnimg.cn/blog_migrate/9f54a3957a222800cc8ea0f333edbaba.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一样方便

从个人几年来的实践来看,放心的用!

Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐