相信大家对Lottie并不陌生，它是Airbnb 开发的面向 iOS、Android、React Native 的动画库，设计师只需要在 After Effects 设计出想要的动画，然后导出成 JSON文件交给开发工程师，开发工程师就可以将动画 100% 还原到你的产品中。

“100%还原动画”“降低开发成本”听起来仿佛很美好，我也是寄希望Lottie能解决welcome page里的动效。但是我在前期跟开发工程师初步探索Lottie后发现，它仅支持AE里形状动效，在实际的UI项目中，如果限制设计师只用形状图层的方式去做页面，对设计师的表现来说是一种掣肘。

直到今年5月，在封面新闻4.0版本里，底部tab栏优化中Lottie派上了用场。先附上优化前后对比图。

底部tab栏是用户高频操作区域，适当增加点击时的微交互可以让用户更容易感知到自己在app中所在的位置，而且俏皮的动效也能带给用户情感化的体验。最重要的是，tab栏点击的动效是一种微交互，它通过icon的大小、位置、透明度等属性改变而形成，Lottie完全能承载这些属性的变化。

下面就介绍一下具体的实操步骤。

一：在设计稿中对图标的大小做好标注。

具体的开发实现工程中，只有动起来的那部分是靠Lottie实现的，tab栏icon点击前后的静态图还是按照设计规范来切图和标注。

这一步很重要，在AE里新建合成的大小跟静态切图的大小一定是等比例的，不然会出现动效和静态图无法重合的问题。

二：在AE里新建合成重新绘制图形

我给开发工程师的静态图是按照69px*69px的大小切的，我在AE里新建的合成是330px*330px(方便操作的大小即可），为了静态图与动效对齐，我把静态图等比例放大到330px，把图片拖到AE文件里作为底图，我直接在AE里绘制形状，绘制时注意与底图保持一致。

三：制作icon动效

我预想的动效是从左至右展开icon。通过“修剪路径”工具可以实现。在图层下点击“添加—-修剪路径”，调整结束和开始的位置，每个形状图层都需要分开调整。

四：生成预合成放在整体页面中微调

这一步可以从整体页面上观察做出来的动效是否OK，最开始我是想每一个icon的动效都不同，但实际效果并不好。我又返回去调整再观察再调整直致满意为止。

四：用bodymovin导出每一个icon的动效

整体效果OK后，就可以分开把每个预合成里的icon动效导出成json文件，“窗口——扩展——bodymoving”会打开一个操作框，选择好导出文件的地址，点击"render"按钮，就可以生成对应的json文件啦～

希望之后能有更多的实际场景能用Lottie去实现动效，也希望这个Lottie这个产品本身能迭代地更好。如果你也希望能把Lottie制作动效的方式用在实际项目中，希望我的这篇文章能给你一些启发，也欢迎大家一起来讨论。

这篇文章对Lottie支持的AE属性和软件的安装都有详细的介绍，推荐。http://www.ui.cn/detail/199429.html