5、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。
6、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格式图片。
AE中Apng/WebP 导出插件:BX-WebP/Apng Exporter
BX-WebP/Apng Exporter 插件,可以实现输出WebP和Apng格式
插件安装
① 首先下载BX-WebP/ApngExporter文件
② 根据自己的操作系统下载ZXP安装工具,官方下载地址:https://aescripts.com/learn/zxp-installer/
③ 然后将BX-WebP/ApngExporter.zxp文件 拖进ZXP安装工具(或者通过file->Open 选择该文件)进行安装
④ 菜单栏选择 > 窗口 > 扩展 > BX-WebP/ApngExporter.zxp
插件使用
① 在AE中打开需要导出的合成,在合成中设置好帧率。
② 找到AE工具栏中的「窗口」-「扩展」中运行安装好的「BX-WebP/ApngExporter」
③ 选择需要导出格式对应导出地址,进行导出。(点击「WebP地址」、「APNG地址」进行选取)
④ 设置画质,取值0-100之间的整数。数值越大画质越好,同时图片也越大。
⑤ 设置循环次数,取值为整数,0为无限循环
7、MP4
MP4大家都知道的音视频格式,但是AE是不能直接导出的。在实际项目中普遍应用在礼物大动画上,因为MP4能够附带声音,所以使用场景也非常广泛,但是使用一般的MP4会内存非常大。
AE 导出小巧高清的MP4插件:Aftercodecs
AE本身不支持直接导出MP4,很多时候只能先导出体积庞大的MOV格式,再通过第三方软件转成MP4,操作繁琐不说,还损失画质;如果要导出PM4,需要Adobe自家的多媒体编码软件Media Encoder 才能完美导出MP4,在ME软件中选中 H.264格式,就可以导出MP4;不过这款软件本身体积较大,每次打开都要运行很久。
所以导出MP4格式,推荐使用更实用的MP4导出插件— Aftercodecs,轻松搞定。安装后在输出模块设置里,就能找到对应的导出项了,并且导出的MP4也是小巧高清的。
使用前后对比:
使用前:AE(不能直接导出) - 添加到ME - 导出MP4
使用后:AE - 输出模块设置 - Aftercodecs.mp4 - 导出MP4
三、几种动效落地方式的优缺点
1、优缺点对比
2、总结
① 图片质量:与GIF相比,APNG/Webp格式的图片,不仅支持支持透明像素。并且,APNG/WebP文件格式的图片不会有锯齿,颗粒感等问题。
② 体积:GIF采用LZW压缩算法,而APNG采用的是 Deflate压缩算法,WebP使用的是基于VP8视频格式的帧内编码,并以RIFF作为容器格式。在相同的情况下APNG/Webp文件体积会更小,并且效果更佳。
通过个人长期的对比得出,7种格式的从大到小依次为:MP4 > PNG序列 > APNG/Webp > GIF > Lottie > SVG
json文件和SVG动画文件大小比较接近,因此可以根据实际考虑决定即可,GIF虽然可以压缩到比较小,但是本身图片质量也较差,因此建议慎重考虑。
③ 颜色:GIF是以8位色(256种颜色)重现真彩色的图像,而APNG/WebP支持24位真彩色(共有1670万种颜色),能承载比GIF更丰富的颜色细节。
④ 兼容性:GIF几乎支持所有的浏览器,而APNG/WebP兼容性就要差很多。APNG目前只有firefox、opera以及ios8以上的原生支持。WepP则只有opera、Chrome以及安卓的支持。
3、使用场景建议
GIF动图:简单的视觉动图,小尺寸Banner、活动页装饰动效、界面悬浮的动态入口等
PNG帧序列:变化较少的动态效果,操作引导、入口闪动提示、部分加载效果等
SVGA:较为复杂的视觉动效,礼物特效、酷炫开场动效等
WebP/Apng:大尺寸的banner、活动氛围背景、活动页头图等
JSON:简单的交互动效,按钮icon交互、logo启动效果、矢量插图动效等
MP4:启动界面动画、大型活动的宣传介绍(如淘宝双11、京东618 做任务瓜分现金红包活动)
最后
所有插件我已经打包好了,请点击下方链接即可下载哦!