SVG动效（SVGA礼物动效设计指南）

婴儿 0 82

SVG动效（SVGA礼物动效设计指南）,第1张


SVG动效（SVGA礼物动效设计指南）,第2张

希望这篇文章对你有帮助，如有表达问题请指正。



首先，我想告诉你我为什么写这篇文章。最近接到一个项目任务，在直播间给礼物做视觉效果。因为之前没有接触过这种设计，所以多方打听，网上到处摸索，发现SVGA是个不错的选择。在和我的开发同学交流并尝试了其他几种格式输出文件后，我们最终决定使用SVGA。

我在网上搜了很多相关资料，发现网上关于SVGA的资料相当少，而且大部分都是关于开发的，关于设计和制作的资料少得可怜，这也是我打算写这篇文章的原因。我觉得应该有这样一篇文章，帮助一些正在做这个的设计生。如有表达问题请指正…




1。什么是SVGA


SVGA是YY团队开发的跨平台开源动画格式，兼容iOS/Android/Web。svga除了使用简单、性能优异之外，使得动画开发分工明确，各有侧重，大大降低了动画交互的沟通成本，提高了开发效率。动画设计师专注于动画设计，通过工具输出SVGA动画文件，集成svga player后提供给开发工程师直接使用。


SVGA和洛蒂不一样。洛蒂需要在玩家层面完全实现After Effects的所有逻辑，但是SVGA消除了这些逻辑。所以SVGA可以同时支持Flash。SVGA做的事情，其实很简单。Converter将负责从Flash或AE源文件中提取所有动画元素(位图、矢量)，并在时间轴中导出它们的每一帧表示(位移、缩放、旋转、透明)。玩家将负责将这些信息恢复到画布上。




2、礼物动效输出方法

答:导出关键帧动画，制作礼物动态效果


缺点:需要将图片带入安装包，增加了安装包的体积。


b:使用属性动画


缺点:开发成本高，每套礼物动画基本都不一样。开发者需要小心翼翼地调整参数，所以花在业务编码上的时间会变得非常有限，代码复用率极低。


c:输出GIF文件


缺点:输出效果差，资源占用高。


d:使用SVGA，支持位图，输出后直接打包打包。直接开发SVGA文件就可以了，SVGA更适合直播场景。SVGA提供的动态文本和动态图像的功能是其他库无法提供的。在实现酷炫动画的基础上，性能也相当不错。


SVGA是一个开源工具，可以跨平台使用。它支持Android、iOS、React Native、Web和微信小程序，但在微信小程序上的表现会更差。




3、AE基础属性制作输出 SVGA

笔者常用的动态效果制作软件是After Effects，所以本文主要讲如何通过AE导出SGAV动态效果，利用AE制作基本属性动画，包括(位移、缩放、旋转、透明)。


第一步:从sketch或PS中剪切出礼物和礼物效果元素，根据个人需求将礼物分成几块分别导出，方便在AE中制作动态效果。



SVG动效（SVGA礼物动效设计指南）,第2张

第二步:将导出的裁剪素材导入AE，使用AE制作基本属性动画。生产结束后，结果如下



SVG动效（SVGA礼物动效设计指南）,第2张

第三步:在窗口-扩展中隐藏背景，找到SVGA Converter _ A。



SVG动效（SVGA礼物动效设计指南）,第2张

第四步:用SVGAConverter_AE插件导出SVGA文件。导出SVGA时，记得将背景调整为透明背景。输出如下所示



SVG动效（SVGA礼物动效设计指南）,第2张

从下图可以看出，SVGA输出格式后的文件大小只有145KB，如果是序列帧，文件大小高达10 m。



SVG动效（SVGA礼物动效设计指南）,第2张

AE预设效果制作输出SVGA


接触过SVGA的同学应该知道，SVGA支持位图、矢量和一些基本的属性动画。很多时候，我们在做礼物特效的时候，会把自己的位图材质导入到AE中，来动画一些基本属性。这一次，我将使用串行帧位图来制作一些更加耀眼的礼物特效。


第一步:用AE中的预设效果制作自己满意的礼物特效。



SVG动效（SVGA礼物动效设计指南）,第2张

第二步:将制作好的特效动画导出为序列帧，然后将序列帧导入回AE，并创建新的预合成来拼接每一帧。这样做的目的是因为SVGA无法识别AE的表情和效果预设，所以我们把特效转换成序列帧，放回AE。序列帧是位图，因此SVGA可以识别和导出特殊效果。



SVG动效（SVGA礼物动效设计指南）,第2张

第三步:接下来，将准备好的序列帧进行预合成并放入礼物特效合成中，打开SVGA插件输出SVGA礼物特效动画。






SVG动效（SVGA礼物动效设计指南）,第2张

AE插件使输出SVGA


这次我用AK Boss的外挂saber给你做个案例。saber是一个非常好的光效制作插件，而且很好用，视觉表现力也很好。本文主要针对SVGA，就不具体解释saber的天赋效果了。


第一步:根据礼物的轮廓用saber插件制作火焰燃烧效果。



SVG动效（SVGA礼物动效设计指南）,第2张

第二步:和刚才说的预置特效的特效动画一样，我们通过AE将特效动画导出为PNG序列帧，再将序列帧导出回AE，拼接每一帧。给你一个小窍门。用过saber的同学都知道，saber使用AE的图层样式“屏幕”，将光效合成一张图片。其实saber也可以导出背景透明的PNG。方法很简单。将saber当前层复制一层。



SVG动效（SVGA礼物动效设计指南）,第2张

第三步:接下来，将准备好的序列帧进行预合成并放入礼物特效合成中，打开SVGA插件输出SVGA礼物特效动画。



SVG动效（SVGA礼物动效设计指南）,第2张

摘要


最后说一下其他软件做的礼物动画。根据上面提到的方法，我们可以发现，我们想要在SVGA中得到更好的效果，就是将制作成序列帧的特效输出，然后在AE中重新拼接。换一种说法，我们不仅可以用AE制作，也可以用C4D或其他设计软件制作，只要我们以序列帧的形式输出最终效果。


我们也可以使用位图、基本属性和插件的组合。值得注意的是，如果视觉效果过于复杂，会造成文件尺寸过大，同时也会造成性能问题。在制作的过程中，大家要把握好一个度。