svga插件_SVGA实例讲解|UI|教程|xinjiebi - 原创文章 - 站酷 (ZCOOL)

至从发了一篇《使用SVGA优化礼物动画》之后，

很多小伙伴一直在问我相关实现的问题、以及碰到了一些问题怎么解决？

趁现在时间上比较富裕的时候写一篇关于SVGA的实例

使用SVGA实现上图效果

使用AE中的SVGA的插件，插件的下载

与安装就不做多余的描述了，官方都有详细的方法

文章下方有官方地址

在窗口中找到SVGA插件并打开，选择输出路径之后就可以开始转换

SVGA导出后发现与想要的效果有比较大的差别

·开启车头灯的效果与实际效果不一致

·礼物跑动时加速度的模糊效果与实际效果不一致

车头灯的效果，我在制作过程中使用了AE效果中的描边的效果(按照路径逐渐点亮)。

发现导出的SVGA不没有想要的这种想要的效果了

车身移动的效果，我在制作过程中使用了AE效果中的高斯模糊的效果和调整了一下位移的曲率(会显得车在移动中的速度感)。

发现导出的SVGA中也不支持这种效果

如果是碰到这种问题怎么去解决呢？

之前在交流过程中也提到过可以使用png序列帧的方式进行反向制作(当然这只是我个人建议，如果您那边有更好的实现方式可以大家相互学习一下)。

这次我准备在车头灯的制作中使用序列帧反向导入。

但是车身的移动加速度动画我准备用其他的方式来进行制作。

首先我想要的SVGA肯定不能太大，这样的话就不能使用太多的序列帧来实现动画，位图越少对于文件的体积肯定有一定的优化。

因此我在加速度移动时使用了模糊，于是我就直接做一张模糊的位图通过明度的变换，是否就满足了需求？

首先使用PS或者Sketch对图片进行处理(模糊处理)

把图片叠加到原有的图片上，在移动的过程中把已经模糊的图片做一个透明度的变化

上图是两个SVGA的对比

当然这种实现的方法肯定会比直接使用AE效果的更加麻烦。不过最终还是为了达到理想的效果就需要花更多的时间

其实对于礼物特效个人的感觉，主要的思考点是在于礼物想要实现什么样的效果。

如果不能使用AE自带效果时，能不能用其他的方式去做代替达到预期的效果。同时需要考虑到文件的大小。

毕竟SVGA可以直接走服务器下发，文件太大的话有点得不偿失。使用SVGA主要就是想更加的便捷。

svga官网： http://svga.io/

推荐一个图片压缩网站：https://tinypng.com/

希望本文作为抛砖引玉，可以给您带来更多灵感与思路。如果您有更好的解决方案可以互相探讨。

附件中包含本例子中的.aep文件