恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
SVGA实例讲解
0.0°
2019-04-29 原创文章 经验/观点 举报 8293 37 20 2

使用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文件



更新:2019-04-29

下载
收藏

37人已收藏

ChrisBi

https://dribbble.com/xinjiebi

  • 33

    作品

  • 87

    粉丝

  • 6

    关注

  • Figma icon library 设计开源 资源更新
  • Figma icon library 设计开源
  • Sketch Libraries设计团队协同合作
  • 使用SVGA优化礼物动画
相关标签
设计经验分享

    猜你喜欢

      2019-04-29 原创文章 经验/观点 举报 8293 37 20 2

      SVGA实例讲解

      0.0°

      你确定要举报SVGA实例讲解

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2019年04月28日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      20
      37
      2

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录