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

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

01

关于SVGA文件 

1

SVGA文件支持的特效

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

(1)SVGA能够支持的特效有&＃xff1a; 

● 位移

● 缩放

● 旋转

● 透明度变化 

● 蒙版

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

(2)SVGA不支持的特效&＃xff1a;

● 粒子效果

● 羽化

● 遮罩

● 颜色替换

● 3D图层效果

● 操控点工具

● 表达式

● 流体效果

● 高斯模糊

● 描边

● 位移曲率

...

基本上主流的特效&＃xff0c;SVGA都不支持 

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

2

SVGA的参数和尺寸规范

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

  文件大小

运行内存

02

SVGA文件导出方法及问题

1

直接导出

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

以“樱花树下”为例&＃xff1a;在AE中预览是这样的

AE中预览效果

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

 直接导出效果

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

2

帧动画

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

导出动效PNG序列

 导入AE后的PNG序列

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

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

03

 影响SVGA参数的因素 

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

1

文件大小

取决于下面两种因素&＃xff1a;

a、图片的大小&＃xff1b;

b、图片的数量&＃xff1b;

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

2

运行内存

取决于下面三种因素&＃xff1a;

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

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

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

其中图片的透明区域占用了很大的运行内存&＃xff0c;举个例子&＃xff1a;

(1)在未加入花瓣前&＃xff0c;运行内存是10M

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

图片中的透明像素

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

04

 优化方法 

1

优化帧动画

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

      优化方法      

a、压缩图片的分辨率

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

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

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

c、控制帧频

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

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

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

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

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

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

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

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

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

 帧序列抽取1/3

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

2

优化帧动画&＃43;基础变化

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

还是以刚才的“樱花树下”为例&＃xff1a;

第一步

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

第二步

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

拆分“动”与“静”

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

 拆分后的樱花树

这里在导树顶序列帧有一个技巧&＃xff1a;

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

动效闭环

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

第三步

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

 处理吊坠

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

第四步

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

花瓣素材中的大量透明像素

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

预合成位移

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

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

#本期编辑&＃xff1a;ourom

UDC精彩文章&＃xff0c;你可能感兴趣

↓

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

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

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

UI设计中的视觉层次

实习生这一年

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

致匠心 I 走进陶艺世界

无处不在的版式设计

疫情下的UDC

遇见另一种台湾