SVGA实例讲解

  • 经验类型经验/观点
  • 经验属性原创文章
  • 经验版权署名-非商业性使用-禁止演绎
8796 2 20 2019-04-28

使用SVGA优化礼物动画-第二弹

SVGA动画实现汽车礼物特效

Image title


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

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

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



Image title

Image title

使用SVGA实现上图效果


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

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

文章下方有官方地址



Image title

Image title

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


Image title

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

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

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



Image title

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

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


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

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

Image title

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


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

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


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


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


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


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


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


Image title

上图是两个SVGA的对比


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


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


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


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


Image title


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


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


上篇文章:《使用SVGA优化礼物动画》


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


附件中包含这个动画的.aep文件



全部评论:2

  • baobo

    2021-03-22 21:16

    为什么我安装的插件导不出svga

  • dj_shawn

    2020-06-12 16:01

    SVGAConverter_AE 插件mac的有吗

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票