提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
一年前在知乎写过一篇关于制作 lottie 动画的回答,
最近仍然有小伙伴私信我一些问题,所以今天写一篇文章,把关于制作Lottie动画的过程和一些技巧做一个总结,分享给大家。
Lottie 动画是什么,简单地说,就是airbnb提供一种方法,让设计师将AE制作的动画通过一个插件生成一个json文件,开发同学可以直接在软件中解析json文件来实现动画。不需要设计师再导出GIF或者序列帧。
接下来就以一个小动画作为案例,完整的展示一下从绘制动画到实现动画再到最后导出json文件的过程。
searching camera
所需软件和插件:
After Effects 、 Bodymovin(AE插件)、 Sketch、 AEUX(sketch&AE插件)
制作步骤:
01 在sketch中绘制出矢量图形
02 用AEUX插件将矢量图形导入到AE中
03 在AE中制作动画
04 打开bodymovin插件,生成json文件
05 在Lottie 官网预览一下
确认没有问题可以交付给开发。
其实整个过程还是比较简单的,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文件+链接图片文件。
大家还有有什么其他问题,可以在文章下方给我留言。
关注公众号 「隐匿的大V」,回复关键词“动画"可获得文中的插件下载链接
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册