恭喜你成为UI中国推荐设计师 (详情)

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反??!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
动效落地: APNG/WebP篇
88.8°
原创文章 / 经验/观点 / / 举报
11843 252 330 21

2021-09-06

关于动效落地,APNG/WebP文件格式的解析和教程?;队蠹医涣鳌?/p>


写在前面

前面写了两篇关于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地址」进行选?。?/p>

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

经验分享gif插件教程

创建于:2021-09-06
收藏

252人已收藏

Jies_L

不乱于心, 不困于情. 不畏将来, 不念过往.

  • 17

    作品

  • 2704

    粉丝

  • 133

    关注

  • 4种GIF变小的方法解析
  • 3种AE常用导出GIF方法解析
  • 2020年下半年合集
  • 2020年上半年工作合集

猜你喜欢

    Jies_L

    Jies_L

    不乱于心, 不困于情. 不畏将来, 不念过往.

    人气明星首页达人砖家小有见解原创达人
    • 2704

      粉丝

    • 1387.2

      人气

    • 3.6w

      颜值

    作品

      最新推荐

      职业化设计师的自我修养(二)

      167 0 1

      相关佳作
      换一换

        Jies_L

        点赞:330

        收藏:252

        评论:21

        动效落地: APNG/WebP篇

        你确定要举报动效落地: APNG/WebP篇?

        如果查出恶意举报,十天内禁止提交任何举报申请。

        0/200

        上传证据: 超过10M的附件请使用网盘地址

        点击上传附件

        对谁可见:

        全部设计师
        • 全部设计师
        • 推荐设计师和认证设计师

        您确认要推荐?

        该作品发布时间:2021年09月06日

        评分

        完整度

        启发性

        勤奋性

        排版布局

        推荐心得

        建议20-200字以内

        0/200

        账号或密码错误,请重新输入

        账号或密码错误,请重新输入

        登录

        账号或密码错误

        发送验证码 120s 验证码错误

        登录
        全网福利资源合集搜索处解压码