svga文件预览_直播礼物SVGA格式如何优化

d3784e66cd6aa743a398f1970bde1845.png

最近在直播间礼物动效设计中,用到了SVGA格式作为输出文件,但是这部分内容在网上的资料比较少,而且很多文章里面介绍的并不详细,在实际操作过程中又碰到了很多的麻烦,这也是我把导出SVGA的经验总结并分享给大家的原因,希望能够帮助到大家。

01

关于SVGA文件 

1

SVGA文件支持的特效

SVGA文件具有较低的运行内存和较好的稳定性的优点。但是SVGA文件比较傲娇,能够支持的效果很少,我们先大概了解一下

(1)SVGA能够支持的特效有: 

● 位移

● 缩放

● 旋转

● 透明度变化 

● 蒙版

目前发现的只有这几个基础变化   

(2)SVGA不支持的特效:

● 粒子效果

● 羽化

● 遮罩

● 颜色替换

● 3D图层效果

● 操控点工具

● 表达式

● 流体效果

● 高斯模糊

● 描边

● 位移曲率

...

基本上主流的特效,SVGA都不支持 

总结来说,SVGA基本上只支持一些基本的变化效果;而对于复杂一些的特效,基本都不支持。但是值得一提的是,SVGA是支持导出PNG序列的,这个先划个重点,我们后面会再谈到。

2

SVGA的参数和尺寸规范

●  文件大小:影响app下载文件的速度,文件过大的话容易导致加载时间过长,一般我们控制在2M以内。 ●  运行内存:影响动效播放的性能,过大会出现卡顿从而无法正常播放。理想小于8M,经过测试15M以内在APPapp里面不会卡顿。 ●  尺寸规范:根据项目设计稿尺寸决定

8dc1ce133b4ea85d71e6d35e8f30e992.png

  文件大小

ba32eea460bff57fccee79ce26a459af.png

运行内存

02

SVGA文件导出方法及问题

1

直接导出

关于导出方法,我们能够想到的最简单的方法肯定是直接导出呗。但是我们刚刚在上面提到了,SVGA支持的变化效果是非常有限的。直接导出的话,很多特效就直接被吃掉了。

以“樱花树下”为例:在AE中预览是这样的

c422fddcbbf1d7092131ade8c4941f16.gif

AE中预览效果

结果直接导出来就变成这样子了

ef6064470177bbde5822ac00ce052dda.gif

 直接导出效果

我之前加上的吊坠的流体动效、花瓣的粒子动效全没了,只剩下收音机和音符的拉伸、位移等基础的变化。显然这样肯定是不可以的,那还有其他的办法吗?有!在上面我们提到了,SVGA是支持PNG序列的,所以就有了第二种的方法。

2

帧动画

我们可以在AE里面将所有特效的变化先导成PNG序列,再拉进AE工程文件变成帧动画的形式,然后再导出SVGA格式,这样的SVGA文件就可以展示复杂动效了。

339292d4698d39677e499d19478b223c.png

导出动效PNG序列

4e7f6f7584f3da0f18eb55105b45d758.png

 导入AE后的PNG序列

用这种方法就可以实现那些酷炫的效果了,然而却也出现了另外一个问题,这样导出的文件,文件的大小变得很大,运行内存更是大得夸张。(图中例子的大小24M,运行内存200M)

所以,我们要对导出的方法进行优化,既要保证有足够丰富的效果,还要保证文件大小和运行内存足够小。

03

 影响SVGA参数的因素 

在介绍优化方法之前,我需要先介绍一点知识,就是为什么刚才第二种方法所使用的PNG序列会导致文件大小和运行内存这么大,讲完原理之后我们可以更清楚如何来进行优化。

1

文件大小

取决于下面两种因素:

a、图片的大小;

b、图片的数量;

两个关键因素对SVGA文件大小的的影响均等,文件里像素用的越多文件越大,因此压缩文件大小的关键就是减少图片像素。

2

运行内存

取决于下面三种因素:

a、图片质量(影响较小)

b、PNG图片数量(影响中等)

c、图片的透明区域(影响严重)

其中图片的透明区域占用了很大的运行内存,举个例子:

(1)在未加入花瓣前,运行内存是10M

(2)再加入文件大小100kb以透明像素为主的花瓣PNG序列后,文件的运行内存飙升到了56M

caa3673c6bafc76dbc58cec223a80f50.png

图片中的透明像素

这个素材中无用的透明像素巨多,但是却占用了大量的内存。因此,控制文件运行内存的关键就是减少图片的透明像素。

04

 优化方法 

1

优化帧动画

根据上面我们提到的原理,我们可以有如下的优化帧动画的方法

      优化方法      

a、压缩图片的分辨率

使用这个熊猫网页进行图片压缩  https://tinypng.com/。还可以使用pp鸭,本地压缩。

b、缩小图片有效像素的长宽范围

图片有效像素长宽范围缩小,SVGA文件的大小和运行内存会成比例减少。图片有效像素长宽范围缩小到原来的75%,文件大小和运行内存也会减低20-30%。因此在动效视觉感受可接受条件下,把图片长宽缩小到最新尺寸。

c、控制帧频

一般我们在做动效时候都是采用25帧频,也就是每秒播放25张图。因此我们可以通过减少帧频,来减少每秒钟播放图片数,从而压缩svga文件的大小。

   ●  保留1/2,动效运行基本流畅(导出大小还是比较大,所以一般不使用)

   ●  保留1/3,有有一点点卡顿,但是还算可接受范围

   ●  保留1/4,大图片动效有明显的卡顿,小图片动效还算可接受范围

基本上,我在导出svga时候,对于大图片会保留1/3的序列帧,对于小图片会保留1/4。

导出png序列的注意点(都是血泪史)

●  导出PNG序列帧最好是同一个版本的AE,比如2019版本导出的png序列帧,最好还是在2019版本上导进。(我之前用2019版本导出的序列帧,导在2018版本AE上,输出SVGA文件时候出现了不知原因的跳帧)

●   序列帧图片压缩一次就好,如果图片反复压缩,也会出现不知原因的跳帧

●   降低帧频,最好是导出序列帧后,在导出的序列帧图片上进行抽帧。这种方法是基本不会出错的,而且如果觉得图片会有卡顿,还可以再改抽取的数量。之前尝试在AE修改帧频,导出序列帧文件,但是如果运用多种帧频导出的png图片,会有概率性发生不知原因的错误,导出SVGA文件后会发生跳帧。

483fda0b2eae5e0e0c5b6342bdcafaaf.png

 帧序列抽取1/3

但是单单使用优化帧动画的方法,虽然很有效降低了大小和运行内存。但是还是远远不能达到APP的要求。因为还是使用了过多的图片素材以及包含太多无用的透明像素。

2

优化帧动画+基础变化

所以我现在要介绍终极武器——拆分优化,使用优化帧动画+基础变化进行拆分优化,接下来是划重点的部分。

还是以刚才的“樱花树下”为例:

c422fddcbbf1d7092131ade8c4941f16.gif

ca62eae6bafdb8a68ec9c98777f4909b.png

第一步

我们在原本的动效上,保留能动的效果:收音机拉伸、音符移动;这两个元素的运行内存只有1.31M。

ca62eae6bafdb8a68ec9c98777f4909b.png

第二步

我们开始处理樱花树的帧动画。

71a8cebe1226612a462c4ff4d527aaef.png

拆分“动”与“静”

樱花树只有树顶是动的,树干、地面、花都是静止的,因此如果我们把樱花树导出png序列,那么这些静止部分,在每一个序列帧里都是多余的部分,无形会增加很多的文件大小和运行内存。因此我把这两部分拆分。只保留树干导出序列帧(注意要把周围的透明区域都裁切掉,减少运行内存),底部静止部分只导一张位图。

e470ed28f9aec24d95e4f67ffa827109.png

 拆分后的樱花树

这里在导树顶序列帧有一个技巧:

樱花树下动效持续6s,所以导出后序列帧有150张图片。就算是抽帧、压缩最后导出文件也是很大的。因此我在做树顶树叶飘动,让树顶飘动在2.32s(也就是58个序列帧)时候形成一个闭环,之后的动效就是一直在循环这个闭环。所以只要把这个闭环的序列帧提取出来,这样就能减少了这个序列帧62%的大小和可观的运行内存。

15cac7fb885538cc3d0f7d043d2ce70c.png

动效闭环

经过抽帧后,把这些抽取后的序列帧放进ae导出svga,大小是660KB,运行内存10M。(忘记截图了)如果我们不进行循环播放,那么运行内存和文件大小会成倍的上涨。

ca62eae6bafdb8a68ec9c98777f4909b.png

第三步

我们开始挂在树干上的挂坠。树上的吊坠是使用流体动效做的,用SVGA导出就变成静止的了。所以我们也得重新导出png序列。每一个吊坠都要导成单独的png序列,把透明像素尽可能去除掉。不要偷懒,看的到吊坠文件大小不大,就把全部吊坠一起导出png序列,里面的空白像素会造成很大的运行内存。

cf2dd3eefefcff3b511872797849b227.png

 处理吊坠

挂坠动效也是采用闭环,只要保留闭环的2s的动效即可,和树顶动效一样。这样处理完全部的吊坠导出svga,大小是800KB,运行内存10.86M。

ca62eae6bafdb8a68ec9c98777f4909b.png

第四步

我们开始做花瓣了,也是最麻烦的。大家看看我用原本花瓣导出PNG序列。只加了一半的花瓣就高达56M的运行内存,全部加上高达86M。说明透明像素真是运行内存的大敌。

1f062ea0c2076e55f8065cbce46d7b40.png花瓣素材中的大量透明像素

接着我想采用位移+3d效果的方式来做花瓣雨,但是发现svga不支持3d效果。所以只能采用3d效果导出PNG序列,再把序列导进ae做成预合成,在预合成的基础上做位移动作。

266f498b0297c719d20481d19a8838d5.png

预合成位移

这里要注意的是,序列帧-预合成-基础动画的组合会造成电脑内存的运行负担,我加了30个花瓣飘落的动作后,导出SVGA时候,ae就一直会出现卡死失败。换了一台配置比较高的电脑就能导出,但是也花了10多分钟的时间。所以要慎用。

以上只是我个人在工作中总结出的一些方法,不同的动效会有不同的情况发生,需要大家灵活运用。如果有发现什么更好的方法,欢迎大家一起交流指正。感谢大家阅读!

#本期编辑: ourom

UDC精彩文章,你可能感兴趣

【微课堂】一步打造高级焦散投影

【微课堂】PS抠图-神奇的抠发丝技能

【微课堂】PS调色-调色工具的简单应用

UI设计中的视觉层次

实习生这一年

4399商学院-设计训练营第2期

致匠心 I 走进陶艺世界

无处不在的版式设计

疫情下的UDC

遇见另一种台湾

53b52a7528535bb5c2237bfcdf977183.png

已标记关键词 清除标记
表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页