SVGA 礼物动画设计指南（二）

去年我发布了一篇关于 SVGA 礼物动效设计的相关文章，当时项目需要第一次接触此类设计，而且发现相关的设计资源文档也非常有限，因此通过自己摸索和总结了一些 SVGA 礼物动效经验分享给了大家，希望对项目上有礼物动效设计需求的设计师带来一些帮助。

距文章发布已有一年多时间，由于之前发布的文章主要是介绍关于 SVGA 礼物的制作方面都比较简短没有说很细，期间有很多设计师也私聊问我一些 SVGA礼物制作中遇到的技术问题，因此这次我将整合之前文章内容，并结合项目中一些经验，更新一些在 SVGA 动画制作中常见的问题，以及解决方法和项目上的一些应该，希望对有 SVGA 礼物设计需求的设计师带来帮助，也希望这篇文章能弥补上之前发的 SVGA 礼物设计文档上面的空缺。

目录

1. SVGA 介绍

1.1 什么是 SVGA

1.2 AE 制作 SVGA 动画需要注意事项

2. SVGA 动画制作方法与技巧

2.1 AE 基础属性动画

2.2 序列帧特效动画

2.3 AE 预设脚本动画

2.4 AE 插件动画

2.5 三维软件制作礼物

2.6 礼物中的粒子效果

2.7 SVGA 中蒙版的应用

3. SVGA 常见问题

3.1 关于礼物内存释放机制

3.2 压缩位图资源减少礼物内存消耗

3.3 序列帧动画闪烁丢帧问题

3.4 序列帧帧数过多内存占用大

3.5 避免大量使用序列帧

3.6 文件重名导致动画输出有问题

4. SVGA动画在项目上的应用

4.1 礼物打赏动画

4.2 悬浮球和 ICON 动画

4.3 会员和成就徽章动画

4.4 会员标签动画

4.5 匹配和飘屏动画

1.1 什么是SVGA

SVGA 是由 YY 团队开发出来的一种跨平台的开源动画格式，同时兼容 iOS / Android / Web。SVGA 除了使用简单，性能卓越，同时让动画开发分工明确，各自专注各自的领域，大大减少动画交互的沟通成本，提升开发效率，动画设计师专注动画设计，通过工具输出 SVGA 动画文件，提供给开发工程师在集成 svga player 之后直接使用。

SVGA 不同于 Lottie，Lottie 需要在 Player 一层完整地将 After Effects 所有逻辑实现，而 SVGA 则将这些逻辑免去。也因此，SVGA 可以同时支持 Flash。SVGA 做的事情，实际上，非常简单，Converter 会负责从 Flash 或 AE 源文件中提取所有动画元素（位图、矢量），并将其在时间轴中的每帧表现（位移、缩放、旋转、透明度）导出。Player 会负责将这些信息还原至画布上。

1.2 AE 制作 SVGA 动画需要注意事项

AE制作 SVGA 动画主要采用两种方式：

1、用基础属性做礼物动画，制作出的礼物内存消耗小，制作复杂效果设计成本高；

2、添加序列帧动画特效，制作出的礼物内存消耗大，制作复杂效果设计成本低，因为可以利用插件或素材进行制作。如果项目需求不是特别急的情况下，建议大家还是尽量采用基础属性动画进行礼物制作，如果需要加入序列帧动画特效的话，一定要控制好序列帧大小，避免造成礼物内存消耗过大，从而影响产品稳定性。

小结：

SVGA 动画在目前直播礼物设计方面相比 Lottie 更有优势，由于 SVGA 对位图的素材提取有优势，因此我们可以用位图素材做出一些有趣的基础属性动画，同时我们也可以用序列帧位图做一些特殊效果动画，增强礼物的视觉表现力，需要注意的是大家一定要控制好礼物的内存消耗，不能盲目加入大量序列帧动画，从而影响产品稳定性。

2.1 AE 基础属性动画

用 AE 基础属性（位置、缩放、旋转、透明度）动画制作礼物，利用基础属性动画制作礼物是比较常见的一种制作方式，其实我们看到的一些特殊效果其实也可以用基础属性做，需要设计师多思考举一反三，比如我们常见的粒子效果，它有优势也有缺点。

优点：基础属性动画制作的动画比较稳定，输出 SVGA 文档时基本不会出现一些莫名其妙的 错或动画问题，另外基础属性动画输出的礼物通常内存占用小，在较负责的业务场景，例如直播间中，用户可能大量刷礼物时不会因为礼物内存消耗问题影响产品稳定性。

缺点：制作特效绚丽和较复杂的礼物时需要较高的设计成本。

2.2 序列帧特效动画

SVGA 相比 Lottie 来说对位图资源更有优势，因此通过我们可以利用序列帧位图素材资源做一些基础属性动画较难制作的特殊效果，可以通过AE插件或 AE 自带特效控件进行制作后输出序列帧导入 AE 输出，值得注意的是序列帧特效会导致输出的礼物内存消耗变大，序列帧动画在 AE 中的应用方法：

1、先将输出好的序列帧素材导入 AE中，新建预合成将序列帧素材放入预合成中，并将每个序列帧素材图层剪切为一帧；

2、从上往下全选序列帧素材右键在“关键帧辅助”中找到“序列帧图层”；

3、在对话框中直接”点击确认

2.3 AE 预设脚本动画

AE 脚本动画是一种比较快速出效果的方法，可以直接套用脚本中的成名动画效果添加到礼物中，增加礼物特效氛围，脚本动画需要输出为序列帧后位图才能输出 SVGA 动画，否则 SVGA 输出时无法识别动画效果。

优点：因为直接套用的效果库中的特效，可以快速出效果设计成本低。

缺点：需要把特效单独输出序列帧后在使用，因为是使用的序列帧来做 SVGA 动画特效，因此礼物内存消耗比完全由基础属性制作的礼物内存占用大。

2.4 AE 插件动画

AE 插件动画也是一种出效果比较快的一种方式，而且插件动画相比预设动画灵活性更高，可以根据礼物主题进行针对性创作，插件动画的输出也需要像脚本动画一样，输出为序列帧位图后才能输出 SVGA 动画，否则 SVGA 插件输出时无法识别动画效果。

优点：AE 插件动画相比脚本动画具更强的灵活性，可根据礼物主题针对性创作。

缺点：学习成本高，如果用插件来制作礼物特效你至少要掌握一款制作特效插件的工作方式，插件特效也需要输出序列帧位图来制作礼物，因此礼物的内存占用也会偏高。

2.5 三维软件制作礼物

SVGA 也可以制作三维礼物，利用序列帧位图的原理，设计师可以在三维软件中做好三维效果后输出为序列帧导入 AE 中添加氛围效果进行输出。

优点：用 3D 软件制作的礼物具有更强的立体感和空间感，这是在 AE 里较难做到的，三维礼物视觉冲击更强。

缺点：C4D 制作礼物学习成本高，至少需要掌握一定的建模和渲染知识，同时还需要了解 C4D 动态效果的制作方法，和脚本、插件动画一样需要输出成序列帧来制作礼物，礼物的内存占用会偏高。

2.6 礼物中的粒子效果

粒子效果是 AE 插件的一种特效制作方式，为什么要把粒子效果单独拿出来说呢，首先粒子效果比较常见，粒子效果通常对礼物起到氛围烘托作用，其次粒子是序列帧中非常占用内存的元素，接下来为大家说下粒子制作方式，大家可以根据业务需求节点调整输出方案。

1、用 AE 插件进行输出，插件制作设计成本相对低一些，通常使用 “Particular” 插件来制作，制作完成后输出为序列帧位图后放回 AE 中输出 SVGA 动画，通常这种方式输出 SVGA 会导致内存消耗很大，建议大家在输出时粒子序列帧时缩小它的尺寸大小，粒子是氛围营造元素模糊一点对整体效果影响不大，另外如果序列帧过多可以采用抽帧的方式（隔几帧删一张位图）

2、用基础属性动画制作粒子效果，这种做法内存消耗低，但设计成本相对来说会高很多，因为你需要用基数属性来将一个个元素来模拟粒子的效果。

2.7 SVGA 中蒙版的应用

1、先将素材导入 AE；

2、扫光素材打预合成（注意预合成的画板大小应和徽章素材画板一样大）在用钢笔工具勾出徽章轮廓给刚才打的扫光预合成做一个路径蒙版；

3、在预合成中给扫光素材做“位移”动画但是有一点大家需要注意的是，预合成里的位图元素不能做“旋转”和“缩放”的属性变化，否则输出 SVGA 时会出问题。

小结：

SVGA 动画的制作方式多种多样，无论你是用 AE 基础属性动画制作还是用 AE 的脚本和插件，或者三维软件制作，这些都是制作方式，具体用什么方式来做取决于业务的需求节点以及设计师对礼物的创作要求，最后说一下无论怎么样做，礼物是服务于产品的因此一定要考虑到产品稳定性的问题，对于不同的业务场景（直播间、IM、一对一视频…等）以及用户手机的性能，要合理控制好礼物内存消耗，避免因为礼物内存消耗严重造成的应用闪退和卡顿现象。

3.1 关于礼物内存释放机制

可能大多数设计师认为礼物的内存释放机制就是礼物效果播放完成后就消失了，其实并不是这样，SVGA 礼物的内存释放是需要一段时间后才会将内存释放，并不是我们想象的播完立即就释放了，因此如果制作的礼物对内存消耗较大时，短时间内重复刷礼物会导致内存消耗疯狂增长，导致产品闪退或卡屏，另外你可以与开发人员沟通能否在技术层面对内存释放机制做优化，从而提升产品稳定性。

3.2 压缩位图资源减少礼物内存消耗

压缩位图资源是控制 SVGA 礼物动画内存消耗的有效方法，通过压缩位图资源我们可以大大缩减礼物内存消耗的问题，压缩位图资源的几个方法：

1、减少位图素材资源的留白区域，尽可能让切图贴合位图素材切

2、用在线压缩工具对位图资源进行压缩，给大家推荐给 站（https://tinypng.com/）

3、在保持主视觉元素清晰的情况下，将辅助类元素缩小位图素材原始尺寸，在AE中制作时放大，可能会有一些模糊，因为是辅助类元素对礼物整体影响不会很大，具体缩小多少视情况而定。

3.3 序列帧动画闪烁丢帧问题

关于序列帧动画输出 SVGA 礼物会出现闪烁丢帧的情况，主要出现在序列帧元素比较复杂的情况，比如做粒子类效果时经常会出现这种情况，如果不知道如何解决，将导致设计师礼物设计时受很大限制，序列帧动画闪烁问题处理方式

1、分别给每个素材图层做三帧“透明度”属性“0-100-0”

2、将所有关键帧转为定格关键帧。

3.4 序列帧帧数过多内存占用大

序列帧做礼物特效时，经常会出现内存过大的现象，为了尽可能控制礼物内存消耗，可以采取抽帧的形式，将现有序列帧进行隔几帧删一帧的方式控制序列帧帧数来尽可能控制礼物内存消耗，需要注意的是，序列帧删的太多导致礼物帧数过低，可能会导致序列帧效果不自然。

3.5 避免大量使用序列帧

有些设计师为了偷懒，用大量序列帧做礼物特效，会导致两个结果：

1、礼物内存消耗非常大，影响产品性能稳定性

2、使用过多的序列帧做礼物，输出礼物时会需要很长的时间才能输出礼物效果，甚至会直接导致软件崩溃

3.6 文件重名导致动画输出有问题

在使用序列帧做礼物时素材一定要做好分类和命名，尽量避免两个素材用同一个命名，当礼物动画中序列帧存在不同素材使用同一个命名输出时会导致礼物素材出现问题。

小结：

在制作 SVGA 礼物时，经常会遇见一些问题导致礼物输出和落地时出现问题，特别是礼物内存消耗问题，如果产品业务以直播间为主的话，要对礼物的内存做好控制，避免直播间大量刷礼物时导致内存消耗过大影响产品稳定性，一些用户硬件设备比较老旧的话会使应用程序闪退甚至导致手机死机，因此在制作 SVGA 礼物时要结合产品业务场景做好内存优化，也可以多和开发沟通看能否对现有缓存机制进行优化，提高产品稳定性

4.1 礼物打赏动画

SVGA 动画在直播间打赏礼物中应用比较广，礼物打赏动画也是在项目中使用 SVGA 频率较高的场景。

4.2 悬浮球和 ICON 动画

悬浮球动画也是 交直播类产品应用比较广的地方，用 SVGA 动画制作悬浮球的运营活动入口，和重要的 ICON 相比静态图在直播间这种热闹场景中更能吸引用户眼球。

4.3 会员徽章动画

用 SVGA 动画制作会员徽章动画，使用动态形式表现会员徽章能更好的体现出尊贵感。

4.4 会员标签动画

用 SVGA 动画制作会员标签动画，在用户列表中更能体验出 VIP 用户与普通用户的差异化， 让 VIP 用户有更强的尊贵感。

4.5 匹配和飘屏动画

SVGA 还有一个很棒的地方，可以制作匹配和飘屏类动画效果，开发可以调用相应方法替换 SVGA 中的图层文件。（比如：在匹配时不同用户的头像和名称以及用户上线通知等）

写在最后

大家在制作 SVGA 动画时无论用在什么场景一定要考虑到内存消耗问题，这是个很关键的问题，它会导致产品的稳定性受很大影响，特别是公司产品如果有大量用户使用的移动设备比较差的情况，更需要对礼物的内存消耗这块处理好，建议大家在制作礼物动画时尽量使用基础属性动画进行制作，使用序列帧一定要控制好序列帧大小，序列帧制作礼物动画一定要克制，切勿盲目乱用，在礼物中加入大量序列帧做礼物效果，感谢大家看完文章，希望这篇文章能给一些在工作中会涉及到礼物设计的设计师一些帮助。