Welcome to Jiawei Network Technology!

SVGA踩坑记

2020-12-09 13:20:42

Q1关于svga导出动画闪帧/丢帧的情况

最近制作了一个动画-空气环绕圈,因为部分动作(粒子效果)svga格式不支持,所以用图片序列替代,用24帧/秒倒出来的动画,动作流畅,但是每个循环有3帧画面会突然变得很亮,有闪帧问题。但是AE里面播放是没有任何问题的。


网上资料推测是以下两个可能性:

1、svga本身的问题

2、渲染出序列图配置错误

3、序列图片太多


// 2的可能性很低,因为在AE里面播放是没有问题的

// 1的可能性较高,可能是AE导出图片之后,图片的属性会有几张不同,然而在AE里面看是没有问题的,svga解析不了图片属性的不同导致闪帧

// 3也可能是序列图资源过多,动画导出的序列图有175张==!?


针对这种情况貌似是无解的样子,简单粗暴的方法==就是可以删掉闪帧的那几张图片来解决。


Q2关于序列图层排序的问题

AE渲染出png序列图片,再导入AE进行错帧排布,从而形成视频动画,这里一开始我是用关键帧辅助-序列图层功能,然后会弹出一个时间,这个时间不好算,点击确定后发现图层都没了?。请教了大佬才发现,其实这里的序列帧排布不需要算时间,只要全部裁成一帧(快捷键:option+】),再用序列图层功能就OK了,时间数值完全不需要改。


PS:序列图层错帧的原理,就是把你这组序列的总时长设置成总时长减去你需要错开的帧的时长。即全部序列图层裁成一帧之后,此时图层总时长是1帧,错开一帧,就是1-1=0,所以数值那里不需要处理,默认0就行了,图层自动就排开了。


图层排序除了利用关键帧辅助-序列图层之外,还可以利用AE脚本去排序。

image.png


Q3关于序列图导svga文件的问题

利用序列图片导出的svga文件大小受序列图片影响,所以序列图要尽可能小,尽可能少。

这次的动画序列图导出时设置了二分之一的分辨率,最后导出的svga文件相比之前小了10几m,也是不枉费一番心血==中间尝试了各种办法(帧速率改成24帧/秒、合成设置分辨率改小等,至于序列图片利用PS 导出更小尺寸的方法也想尝试一下的,但后面发现太浪费时间了,主要是序列图过多。。。==)


坑来了==

1.如果文件过大的话,导出的时候会有一个提示是文件超过8m可能导致程序崩溃,这个时候不要关闭svga的导出窗口,耐心等待,因为这个时候程序还是在运作的,如果关闭的话可能就是一个无效的svga文件。

2.svga只能识别基础的运动和动画,不能识别各种效果和非矢量的调整,如果必须有的话,只能用序列图片来替代(不是序列帧,是序列图层排列)


网上有人说最好少用序列图导出svga,如果用序列帧,那svga和webp、apng相比是没优势的。就是说,如果用序列帧,不用svga都可以。svga之所以性能表现好,是因为它可以记录动画的数据,加上资源图去重现动画,而不是每一帧的图片。这里确实存在缺陷。



Q4AE粒子特效如何运用到SVGA动画中

步骤:

1、做好的动画里面含有用AE插件做的粒子特效

2、把粒子特效设置为预合成(根据动画中实际比例的大小/为了节省空间也可以缩小个百分之八十这样不会虚)

3、直接添加到渲染列队导出PNG序列(记得勾选RGB+Alpha这样导出就是透明背景的序列帧)设置位置

image.png

4、把导出的序列图片导入AE的项目管理窗口(注:不要直接拖拽,可能会反向排序)

5、把序列图片拉入时间轴

6、时间轴图层全部裁成一帧,快捷键:option+】(一帧/ 两帧 )

7、commd+A全选,右键-关键帧辅助-序列图层,点击确定即可。变成如下图这样:

image.png

8、利用SVGAConventer_AE 插件导出svga动画

image.png

Taobao store