SVGA是由YY团队开发出来的一种跨平台的开源动画格式,同时兼容iOS/Android/Web。SVGA除了使用简单,性能卓越,同时让动画开发分工明确,各自专注各自的领域,大大减少动画交互的沟通成本,提升开发效率,动画设计师专注动画设计,通过工具输出SVGA动画文件,提供给开发工程师在集成svgaplayer之后直接使用。
AE制作SVGA动画主要采用两种方式:1、用基础属性做礼物动画,制作出的礼物内存消耗小,制作复杂效果设计成本高;2、添加序列帧动画特效,制作出的礼物内存消耗大,制作复杂效果设计成本低,因为可以利用插件或素材进行制作。如果项目需求不是特别急的情况下,建议大家还是尽量采用基础属性动画进行礼物制作,如果需要加入序列帧动画特效的话,一定要控制好序列帧大小,避免造成礼物内存消耗过大,从而影响产品稳定性。
小结:
SVGA动画在目前直播礼物设计方面相比Lottie更有优势,由于SVGA对位图的素材提取有优势,因此我们可以用位图素材做出一些有趣的基础属性动画,同时我们也可以用序列帧位图做一些特殊效果动画,增强礼物的视觉表现力,需要注意的是大家一定要控制好礼物的内存消耗,不能盲目加入大量序列帧动画,从而影响产品稳定性。
用AE基础属性(位置、缩放、旋转、透明度)动画制作礼物,利用基础属性动画制作礼物是比较常见的一种制作方式,其实我们看到的一些特殊效果其实也可以用基础属性做,需要设计师多思考举一反三,比如我们常见的粒子效果,它有优势也有缺点。
优点:基础属性动画制作的动画比较稳定,输出SVGA文档时基本不会出现一些莫名其妙的报错或动画问题,另外基础属性动画输出的礼物通常内存占用小,在较负责的业务场景,例如直播间中,用户可能大量刷礼物时不会因为礼物内存消耗问题影响产品稳定性。
缺点:制作特效绚丽和较复杂的礼物时需要较高的设计成本。
SVGA相比Lottie来说对位图资源更有优势,因此通过我们可以利用序列帧位图素材资源做一些基础属性动画较难制作的特殊效果,可以通过AE插件或AE自带特效控件进行制作后输出序列帧导入AE输出,值得注意的是序列帧特效会导致输出的礼物内存消耗变大,序列帧动画在AE中的应用方法:1、先将输出好的序列帧素材导入AE中,新建预合成将序列帧素材放入预合成中,并将每个序列帧素材图层剪切为一帧;2、从上往下全选序列帧素材右键在“关键帧辅助”中找到“序列帧图层”;3、在对话框中直接”点击确认
AE脚本动画是一种比较快速出效果的方法,可以直接套用脚本中的成名动画效果添加到礼物中,增加礼物特效氛围,脚本动画需要输出为序列帧后位图才能输出SVGA动画,否则SVGA输出时无法识别动画效果。
优点:因为直接套用的效果库中的特效,可以快速出效果设计成本低。
缺点:需要把特效单独输出序列帧后在使用,因为是使用的序列帧来做SVGA动画特效,因此礼物内存消耗比完全由基础属性制作的礼物内存占用大。
AE插件动画也是一种出效果比较快的一种方式,而且插件动画相比预设动画灵活性更高,可以根据礼物主题进行针对性创作,插件动画的输出也需要像脚本动画一样,输出为序列帧位图后才能输出SVGA动画,否则SVGA插件输出时无法识别动画效果。
优点:AE插件动画相比脚本动画具更强的灵活性,可根据礼物主题针对性创作。
缺点:学习成本高,如果用插件来制作礼物特效你至少要掌握一款制作特效插件的工作方式,插件特效也需要输出序列帧位图来制作礼物,因此礼物的内存占用也会偏高。
SVGA也可以制作三维礼物,利用序列帧位图的原理,设计师可以在三维软件中做好三维效果后输出为序列帧导入AE中添加氛围效果进行输出。
优点:用3D软件制作的礼物具有更强的立体感和空间感,这是在AE里较难做到的,三维礼物视觉冲击更强。
缺点:C4D制作礼物学习成本高,至少需要掌握一定的建模和渲染知识,同时还需要了解C4D动态效果的制作方法,和脚本、插件动画一样需要输出成序列帧来制作礼物,礼物的内存占用会偏高。
粒子效果是AE插件的一种特效制作方式,为什么要把粒子效果单独拿出来说呢,首先粒子效果比较常见,粒子效果通常对礼物起到氛围烘托作用,其次粒子是序列帧中非常占用内存的元素,接下来为大家说下粒子制作方式,大家可以根据业务需求节点调整输出方案。
1、用AE插件进行输出,插件制作设计成本相对低一些,通常使用“Particular”插件来制作,制作完成后输出为序列帧位图后放回AE中输出SVGA动画,通常这种方式输出SVGA会导致内存消耗很大,建议大家在输出时粒子序列帧时缩小它的尺寸大小,粒子是氛围营造元素模糊一点对整体效果影响不大,另外如果序列帧过多可以采用抽帧的方式(隔几帧删一张位图)
2、用基础属性动画制作粒子效果,这种做法内存消耗低,但设计成本相对来说会高很多,因为你需要用基数属性来将一个个元素来模拟粒子的效果。
SVGA中也是可以使用AE蒙版动画的,不过它只能识别路径蒙版,并且路径动画也有限制,只能识别“相加”属性如果没有制作好,会导致输出SVGA动画时出现错误的动画,如果你是直接给素材建立路径蒙版,那你需要一帧一帧去调整路径蒙版,工作量变的很大,作者是用另外一种方式,例如:给徽章做扫光1、先将素材导入AE;2、扫光素材打预合成(注意预合成的画板大小应和徽章素材画板一样大)在用钢笔工具勾出徽章轮廓给刚才打的扫光预合成做一个路径蒙版;3、在预合成中给扫光素材做“位移”动画但是有一点大家需要注意的是,预合成里的位图元素不能做“旋转”和“缩放”的属性变化,否则输出SVGA时会出问题。
SVGA动画的制作方式多种多样,无论你是用AE基础属性动画制作还是用AE的脚本和插件,或者三维软件制作,这些都是制作方式,具体用什么方式来做取决于业务的需求节点以及设计师对礼物的创作要求,最后说一下无论怎么样做,礼物是服务于产品的因此一定要考虑到产品稳定性的问题,对于不同的业务场景(直播间、IM、一对一视频…等)以及用户手机的性能,要合理控制好礼物内存消耗,避免因为礼物内存消耗严重造成的应用闪退和卡顿现象。
压缩位图资源是控制SVGA礼物动画内存消耗的有效方法,通过压缩位图资源我们可以大大缩减礼物内存消耗的问题,压缩位图资源的几个方法:
1、减少位图素材资源的留白区域,尽可能让切图贴合位图素材切
3、在保持主视觉元素清晰的情况下,将辅助类元素缩小位图素材原始尺寸,在AE中制作时放大,可能会有一些模糊,因为是辅助类元素对礼物整体影响不会很大,具体缩小多少视情况而定。
关于序列帧动画输出SVGA礼物会出现闪烁丢帧的情况,主要出现在序列帧元素比较复杂的情况,比如做粒子类效果时经常会出现这种情况,如果不知道如何解决,将导致设计师礼物设计时受很大限制,序列帧动画闪烁问题处理方式1、分别给每个素材图层做三帧“透明度”属性“0-100-0”2、将所有关键帧转为定格关键帧。
序列帧做礼物特效时,经常会出现内存过大的现象,为了尽可能控制礼物内存消耗,可以采取抽帧的形式,将现有序列帧进行隔几帧删一帧的方式控制序列帧帧数来尽可能控制礼物内存消耗,需要注意的是,序列帧删的太多导致礼物帧数过低,可能会导致序列帧效果不自然。
有些设计师为了偷懒,用大量序列帧做礼物特效,会导致两个结果:
1、礼物内存消耗非常大,影响产品性能稳定性
在使用序列帧做礼物时素材一定要做好分类和命名,尽量避免两个素材用同一个命名,当礼物动画中序列帧存在不同素材使用同一个命名输出时会导致礼物素材出现问题。
在制作SVGA礼物时,经常会遇见一些问题导致礼物输出和落地时出现问题,特别是礼物内存消耗问题,如果产品业务以直播间为主的话,要对礼物的内存做好控制,避免直播间大量刷礼物时导致内存消耗过大影响产品稳定性,一些用户硬件设备比较老旧的话会使应用程序闪退甚至导致手机死机,因此在制作SVGA礼物时要结合产品业务场景做好内存优化,也可以多和开发沟通看能否对现有缓存机制进行优化,提高产品稳定性
SVGA动画在直播间打赏礼物中应用比较广,礼物打赏动画也是在项目中使用SVGA频率较高的场景。
悬浮球动画也是社交直播类产品应用比较广的地方,用SVGA动画制作悬浮球的运营活动入口,和重要的ICON相比静态图在直播间这种热闹场景中更能吸引用户眼球。
4.3会员徽章动画
用SVGA动画制作会员徽章动画,使用动态形式表现会员徽章能更好的体现出尊贵感。
用SVGA动画制作会员标签动画,在用户列表中更能体验出VIP用户与普通用户的差异化,让VIP用户有更强的尊贵感。
SVGA还有一个很棒的地方,可以制作匹配和飘屏类动画效果,开发可以调用相应方法替换SVGA中的图层文件。(比如:在匹配时不同用户的头像和名称以及用户上线通知等)