几种动画方案GIF、MP4、APNG、WEBP、LOTTIE、SVGA(笔记+总结)转

一、GIF

GIF全称Graphics Interchange Format,图像互换格式,采用8位压缩,最多只能处理256种颜色,不宜应用于真彩色图片。GIF体积大,颗粒感,有锯齿,尤其透明效果动画慎用。

GIF导出

  • 视频+PS导出:AE输出视频—PS打开视频—存储为WEB所用格式(旧版)—存储导出GIF。
  • 序列帧+PS导出:AE导出PNG序列帧图—PS打开序列帧——存储为WEB所用格式(旧版)——存储导出GIF。
  • AE插件GIFGUN导出:方便快捷,缺点是限制在30FPS内,输出质量差,容易掉帧。

  • PS导出GIF失败后的替代方案:

存储为WEB所用格式(旧版)—点击左下角的预览—自动打开Chrome浏览器—复制网址,将网址粘贴到Safari浏览器中—拖出来就行。

  • GIF压缩方式:PPduck、docsmall。

二、视频

MP4能够直接播放视频、音频的有损文件,实现成本低,兼容性强,体积一般。一般用在宣传、开屏、演示如app的开屏动画。

MP4导出

  • 视频+PS导出:AE输出视频—PS打开视频—PS文件导出选择渲染视频—命名—选择输出的文件夹—选择品质高中低—点击渲染。

  • 视频压缩方式:Handbrake、格式工厂、Adobe Media Encode。

  • 视频转GIF:Gifski。

三、APNG/WEBP

  • APNG是基于PNG格式的动画格式图片,它的动图后缀依然是.png,因为兼容性的问题没有像GIF那样普及。

WEBP目标是减少文件大小,达到和JPGE格式相同的图片质量。WEBP基本兼容所有的主流浏览器,同时也兼容所有的安卓设备,不过像一些iOS设备需要通过一定的方式才可以支持,相同效果的WEBP格式要比PNG格式小大概一半大小。

  • APNG/WEBP导出

1、iSparta软件导出:将AE导出的序列图拖到iSparta软件中,点击开始即可导出APNG/GIF/WEBP(注:GIF通过此软件导出质量偏差)。

iSparta下载地址:http://isparta.github.io/how.html

2、网页ezgif.com转换:将GIF格式动图转化成APNG动图,网址为https://eagif.com/gif-to-apng

3、BX-WebpApngExporter插件导出:下载BX-WebpApngExporter.zxp,拖进ZXP安装工具安装插件,在AE窗口-扩展中运行BX Webp/Apng Exporter,选择要导出的格式的对应导出地址,根据情况勾选是否导出,点击生成。

四、LOTTIE/SVGA

LOTTIE是基于JSON格式的动画文件格式,满足很多种类的矢量动画和图片动画,它是多平台的,可以在iOS、Android、Web和React Native上使用,并且按比例放大缩小不会出现像素化;它是小文件,显著提高了下载速度。

LOTTIE导出

Bodymovin插件导出:下载bodymovin插件,安装成功后,在窗口-扩展-Bodymovin打开,设置导出路径,渲染动画,点击完成。

6f99cdbb690597f981cdb4348f192ed6.png

SVGA是同时兼容iOS、Android、Web的动画文件格式,可以支持AE或Animate大部分效果,动画文件体积更小,播放资源更优,还原效果更好。

SVGA导出

SVGAConverter插件导出:下载SVGAConverter插件,安装成功后,在窗口-扩展-SVGAConverter_AE打开,设置输出路径,点击开始转换,成功后会有预览。

五、总结对比

占用内存对比:

从大到小

视频>序列帧>GIF>APNG/WEBP>LOTTIE/SVGA

质量稳定对比:

从差到好

视频<GIF<序列帧<APNG/WEBP<LOTTIE/SVGA

支持AE动效对比:

从多到少

视频>GIF>序列帧>APNG/WEBP>LOTTIE/SVGA

业务方案:

  • gif虽然体积小、兼容性好、但效果差、不推荐使用、除非非常在意多端兼容性与性能!

  • 简单的动图采用webp、比如简单的聊天表情动图(骰子、石头剪刀布等)

  • lottie适合一些复杂的动画、比如复杂的加载动画、引导动画等、不适合做直播间大礼物特效

  • 直播间复杂的大礼物动可以用效用svga,webp还有apng

  • MP4不建议做直播间礼物动画防范

因为她不直接支持alpha,需要通过openGL或者CIFilter方式可以通过两个图层叠加的方式达到效果,但是性能不好,如果取帧的FPS介于:16.7~60 则内存暴涨100~150MB左右,而webp和svga则相对会稳定很多

原文:https://blog.csdn.net/weixin_39962889/article/details/111162511

参考:https://zhuanlan.zhihu.com/p/356719736

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342

推荐阅读更多精彩内容