写在前面

前面写了两篇关于GIF的文章,大致的我们对GIF也有了一定的了解。我们都知道它是最早的动图格式,加上它几乎支持所有的主流浏览器,实现起来比较简单。因此被大家广泛的使用。但是,GIF本身缺陷也很多,它不仅是一种有损格式,并且不支持半透明,甚至会出现大量的白边,所以在产品的使用中,经常被无情的吐槽

因此,这次我为大家讲解另外一种动效落地格式。由于它们的落地文件可以同时输出,我就给大家梳理一遍APNG/WebP格式

本节知识点

一、APNG/WebP格式

二、APNG/WebP的优势和劣势

三、两种实现方式的安装方法

四、两种实现方式的实操演示

一、APNG/WebP格式

APNG

APNG(Animated Portable Network Graphics)是一个基于PNG的位图动画格式,扩展方法类似主要用于网页的GIF89a,仍对传统PNG保留向下兼容。第1帧是标准的单幅PNG图像,因此只支持原版PNG的软件能正常显示第1帧。剩余的动画帧和帧速数据储存在符合原版PNG标准的扩展数据块里。

APNG是由Mozilla在2004年推出的,其目的是试图替代GIF文件格式,同时增加一些GIF文件不具备的特性。其实早在1995年,为了避免专利影响,以及Unisys公司根据它在GIF格式中使用的LZW数据压缩算法的软件专利开始商业收费。APNG的前生MNG动图格式就已经诞生了,由于结构复杂的MNG程序库,使用过程会占用大量的资源,早期只有较少的浏览器支持,Chrome、IE、Opera、Safari 则从未支持过。即使APNG发展2007年也未能通过官方标准认证。但是不影响Mozilla继续支持APNG。

WebP

WebP(发音"weppy")是一种同时提供有损压缩与无损压缩的图文格式,扩展方法派生自影像编码格式VP8,被认为是WebM多媒体格式的姊妹项目,是由Google在购买On2 Technologies后发展出来,以BSD授权条款发布。

WebP是由谷歌于在2010年推出的,意图改变web图片JPG、PNG、GIF三分天下局势的一种图片格式。它不仅支持无损或有损压缩、alpha通道,还支持动画演示。目前,在当前网页浏览器当中,Google Chrome和Opera原生支持静态与动态的WebP格式,而Google Chrome自12版开始支持WebP的渐进式解码功能。除此之外,移动端Android4.0以上也支持webp格式图片。

二、APNG/WebP的优势和劣势

APNG/WebP的优势

1. 图片质量

与GIF相比,APNG/Webp格式的图片,不仅支持支持透明像素。

并且,APNG/WebP文件格式的图片边缘没有白边

2. 体积

GIF采用LZW压缩算法,而APNG采用的是 Deflate压缩算法,WebP使用的是基于VP8视频格式的帧内编码,并以RIFF作为容器格式。在相同的情况下APNG/Webp文件体积会更小,并且效果更佳。

3. 颜色

GIF是以8位色(256种颜色)重现真彩色的图像,而APNG/WebP支持24位真彩色(共有1670万种颜色),能承载比GIF更丰富的颜色细节。

APNG/WebP的劣势

兼容性

GIF几乎支持所有的浏览器,而APNG/WebP兼容性就要差很多。APNG目前只有firefox、opera以及ios8以上的原生支持。WepP则只有opera、Chrome以及安卓的支持

三、两种实现方法的安装方式

BX-WebP/Apng Exporter 插件

1. 首先下载BX-WebP/ApngExporter文件

2. 根据自己的操作系统下载ZXP安装工具

     https://aescripts.com/learn/zxp-installer/

3.然后将BX-WebP/ApngExporter.zxp文件 拖进安装工具(或者通过file->Open 选择该文件)进行安装

iSparta

下载iSparta安装包,根据自己的系统直接安装即可

四、两种实现方法的实操演示

BX-WebP/Apng Exporter 插件

1. 在AE中打开需要导出的合成,在合成中设置好帧率。

2. 找到AE工具栏中的「窗口」-「扩展」中运行安装好的「BX-WebP/ApngExporter」

3. 选择需要导出格式对应导出地址,进行导出。(点击「WebP地址」、「APNG地址」进行选取)

4. 设置画质,取值0-100之间的整数。数值越大画质越好,同时图片也越大。

5. 设置循环次数,取值为整数,0为无限循环

iSparta

1. 使用AE导出做好的动效,AE菜单栏文件 — 导出 — 添加到渲染队列 — 选择PNG序列(默认是QuickTime),保存到比较好找的位置

2. 打开iSparta,找到保存好的序列文件,全选PNG图片文件,直接拖入到iSparta

3. 设置好输出设置,帧频与动画帧数保持一致,避免出错。

4. 选择需要循环的次数,0次代表无限循环

5. 给你的文件取一个跟我一样帅气又有内涵的名字

6. 选择输出格式,勾选或取消WebP地址」、「APNG地址」

7. 设置画质,取值0-100之间的整数。数值越大画质越好,同时图片也越大

总结

我们会因为图片质量去抱怨GIF格式,有白边、内存大,不支持透明像素等。那么APNG/WebP格式无疑对服务器存储是一个很大考验。我们不能抛弃原有格式,那么存储的数据量将会增加大,如果请求时再转换,由于目前转码的效率太低,特别的大文件的PNG速度相当的慢,并且APNG/WebP对兼容的限制,这都是目前实际使用最大的痛点。

最后,我们还是应当根据具体场景具体使用。至于动效,个人认为是一把双刃剑,技能带来创新也能增加产品负荷。作为设计师,我们应到规划好我们创意,让产品保证流畅的同时,又能给用户带来惊喜。

*素材来自网络,不做商业使用(侵删)

*文章未经许可,禁止转载

Powered by Froala Editor