Jies_L
我竟然沒有聽説過svg格式的動畫 
每人每天仅限5票，快给你心仪的作品鼓励的一票。
投票
0.0°
关于动效落地，APNG/WebP文件格式的解析和教程。欢迎大家交流～
写在前面
前面写了两篇关于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
全部评论：38条
更多作品
发表评论