聊一聊：关于SVGA礼物动画设计制作方法

renliangyat

首先想说下为啥要写这篇文章，最近接到个项目任务制作直播间礼物赠送视觉效果，由于之前没有接触过此类设计，因此在多方打听，并在上到处探索后发现SVGA是个不错的选择，在与开发同学沟通并尝试了另外几种格式输出文件后，我们最终敲定了用SVGA。艺术字体设计的相关问题可以到网站了解下，我们是业内领域专业的平台，您如果有需要可以咨询，相信可以帮到您，值得您的信赖！

在上搜索了很多相关资料学习，发现上关于SVGA的资料相当少，而且很大部分还是介绍关于开发的，关于设计制作的少的可怜，这也是我打算写这篇内容的的原因，我觉得或许应该有这么一篇文章，帮助到一些正在做这个事儿的设计同学，如果有什么表达有问题的地方欢迎大家指正 礼物动效输出方法 A：导出关键帧动画制作礼物动效 缺点：需要把图片带到安装包中，增大了安装包体积 B：使用属性动画 缺点：开发代价较大，每一套礼物动画基本都不一样，开发人员需要去细细调参，花在业务上编码的时间会变得非常有限，从代码复用率极低 C：输出GIF文件 缺点：输出效果差，并且资源占用高 D：使用SVGA，SVGA支持位图，并且输出后直接封装打包好的，直接给开发SVGA文件就OK，并且SVGA更贴合直播类应该场景，SVGA所提供的动态文本、动态图像功能都是其它库所不能提供的，在实现炫酷动画的基础上，性能表现也比较棒。 SVGA是开源工具可以跨平台使用，支持A、OS、RN、W、微信小程序，但是在微信小程序上表现会差一些。 什么是SVGA SVGA是由YY团队开发出来的一种跨平台的开源动画格式，同时兼容OSAW。SVGA除了使用简单，性能卓越，同时让动画开发分工明确，各自专注各自的领域，大大减少动画交互的沟通成本，提升开发效率，动画设计师专注动画设计，通过工具输出动画文件，提供给开发工程师在集成之后直接使用。 SVGA不同于L，L需要在P一层完整地将AE所有逻辑实现，而SVGA则将这些逻辑免去。也因此，SVGA可以同时支持F。SVGA做的事情，实际上，非常简单，C会负责从F或AE源文件中提取所有动画元素（位图、矢量），并将其在时间轴中的每帧表现（位移、缩放、旋转、透明度）导出。P会负责将这些信息还原至画布上。 AE基础属性制作输出SVGA 笔者常用的动效制作软件是AE，因此主要讲如何通过AE制作导出SGAV动效，利用AE制作基础属性动画，基础属性动画包括（位移、缩放、旋转、透明度）。 第一步：从或者PS中将礼物和礼物效果元素切图导出，根据个人需可以将礼物拆分成几块分别导出，方便AE中制作动态效果。 第二步：将导出的切图素材导入AE中，利用AE制作基础属性动画，制作完成后结果如下 第三步：将背景隐藏在窗口-扩展中找到SVGAC_A 第四步：用SVGAC_AE插件导出SVGA文件，输出SVGA时记得把背景调成透明背景，输出后如下通过下图可以看到SVGA输出格式后文件大小仅为145KB，如果是序列帧的话文件大小高达10几M AE预设效果制作输出SVGA 接触过SVGA的同学应该都知道，SVGA支持位图、矢量和一些基础属性动画，很多时候我们制作礼物特效的时候，都是用自己做好的位图素材导入AE进行一些基础属性的动画制作，这次我将利用序列帧位图制作出一些更炫的礼物特效。 第一步：在AE中用预设效果制作出自己满意的礼物特效 第二步：将制作的特效动画导出序列帧，然后在将序列帧从新导回AE中，新建预合成将每一帧拼接起来，这样做的目的是因为SVGA无法识别AE的表达式和效果预设，所以我们将特效转为序列帧后在重新放进AE，序列帧是位图所以SVGA可以识别并导出特效。 第三步：接下来将制作好的序列帧预合成放置到礼物特效合成中，打开SVGA插件输出SVGA礼物特效动画 AE插件制作输出SVGA 这次我用AK大佬的插件为大家做案例，是一款很不错的光效制作插件，也比较容易上手，视觉表现力也非常棒，本篇文章主要是将SVGA，所以就不给大家具体说明如果做礼物特效了。 第一步：根据礼物的轮廓利用插件制作出火焰燃烧效果。 第二步：和刚才所说的预设效果特效动画一样，我们通过AE将特效动画导出PNG序列帧，然后在将序列帧导回AE，并将每一帧拼接起来，这里有个小技巧给大家说下，用过的同学都知道的用法是利用AE的图层样式屏幕将光效合成在图里，其实也可以导出透明背景的PNG的，方法很简单，将当前图层复制一层，然后对复制出来的副本进行用亮度遮罩。 第三步：接下来将制作好的序列帧预合成放置到礼物特效合成中，打开SVGA插件输出SVGA礼物特效动画。 总结 最后聊一下关于用其他软件制作的礼物动画，根据上面所说的几种方法可以发现，我们想要在SVGA中想要得到更好的效果，就是将制作的特效输出为序列帧后在AE中重新拼接起来，换一种说法就是我们可以不仅限于AE来制作，也可以使用C4D或者其他设计软件来做，只需要我们将最终效果已序列帧的形式进行输出即可。 并且我们也可以利用关键帧、基础属性和插件相结合来做，值得注意的是如果视觉效果做的太过复杂会导致文件过大，同时也会产生性能方面的问题，在制作的过程中大家还时要把握好一个度。

nb1003

佛山h型钢