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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
如何将AE动画转为json文件?
0.0°
2019-06-23 原创文章 经验/观点 举报 13076 62 35 6


一年前在知乎写过一篇关于制作 lottie 动画的回答,


最近仍然有小伙伴私信我一些问题,所以今天写一篇文章,把关于制作Lottie动画的过程和一些技巧做一个总结,分享给大家。



Lottie 动画是什么,简单地说,就是airbnb提供一种方法,让设计师将AE制作的动画通过一个插件生成一个json文件,开发同学可以直接在软件中解析json文件来实现动画。不需要设计师再导出GIF或者序列帧。




接下来就以一个小动画作为案例,完整的展示一下从绘制动画到实现动画再到最后导出json文件的过程。

 searching camera

searching camera





所需软件和插件:


After Effects 、 Bodymovin(AE插件)、 Sketch、 AEUX(sketch&AE插件)





制作步骤:


01 在sketch中绘制出矢量图形

Image title





02 用AEUX插件将矢量图形导入到AE中

Image title





03 在AE中制作动画

Image title





04 打开bodymovin插件,生成json文件

Image title





05 在Lottie 官网预览一下

Image title





确认没有问题可以交付给开发。




其实整个过程还是比较简单的,AE和sketch插件的安装方法都比较简单,我在文章中就不做赘述了。


如果需要查看插件安装方法的话,可以看我之前的这篇知乎回答——如何看待 Airbnb 新发布的 Lottie?


文中的动画的json文件和AE文件我已经上传到 lottiefiles 网站,需要的可以点击链接下载 searching camera



两个需要注意得到点:


01 如果动画中含有渐变颜色,bodymovin导出json时会动画的颜色会变成黑白。


解决这个问题的办法是:把AE切换成英文版,亲测可用!



02 AEUX插件目前不支持最新版本的sketch,最好使用53.1以下的sketch版本。



补充更新(20190623):


目前bodymovin插件最新版(5.5.5)可以将AE中的图片内置到json中,这样的好处就是,如果你是在Ai里画的插画,然后在AE中做动画的话,现在可以直接生成单独一个json文件了,不需要以前会生成一个json文件+链接图片文件。

Image title




大家还有有什么其他问题,可以在文章下方给我留言。


关注公众号 「隐匿的大V」,回复关键词“动画"可获得文中的插件下载链接







更新:2019-06-23

收藏

62人已收藏

隐匿的大V

WX:17183467735

  • 8

    作品

  • 49

    粉丝

  • 75

    关注

  • 分享骨骼动画最常用的三个插件
  • 8大系列34款免费可商用中文字体分享
  •  Sketch中10个惊为天人的骚操作
  • 如何给sketch自定义快捷键

    猜你喜欢

      2019-06-23 原创文章 经验/观点 举报 13076 62 35 6

      如何将AE动画转为json文件?

      0.0°

      你确定要举报如何将AE动画转为json文件?

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2019年06月10日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      35
      62
      6

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

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

      登录

      手机号

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

      登录
      第三方账号登录