隐匿的大V
每人每天仅限5票，快给你心仪的作品鼓励的一票。
投票
0.0°
一年前在知乎写过一篇关于制作 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」，回复关键词“动画"可获得文中的插件下载链接
全部评论：6条
更多作品
发表评论