0.0°

Lottie在实战项目中落地经验分享

关注

3106 5 9 2018-09-13

如果你也希望能把Lottie制作动效的方式用在实际项目中，希望我的这篇文章能给你一些启发

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

Lottie官网效果图

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

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

改版前后

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

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

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

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

Image title

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

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

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

Image title

三：制作icon动效

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

Image title

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

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

Image title

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

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

Image title

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

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

全部评论：5条

迷途恶少
2020-06-22 17:33
@JulyWang: 我发现原因了不能用表达式
JulyWang
2020-06-10 09:03
@迷途恶少: 没缩放了吗？
迷途恶少
2020-05-30 17:53
我导出的jsn 开发用了之后少了弹动是什么原因？
JulyWang
2019-08-22 11:07
@biubiubiu11111: 谢谢~~我就是用的基础的放大缩小，只是速度曲线那里调成了弧线。让动起来时有加速度的感觉。
biubiubiu11111
2019-08-20 16:57
想问下你的这个动效弹性参数是咋调的啊，感觉你的这个弹性特别自然！超级好看~
JulyWang
2018-11-01 13:55
@JiaSen: 1.AE里的新建合成建大一些可以方便观察动画效果，开发在做的时候控制了前端显示的大小，一般来说等比例导出图都能重合；2你是说在AE里导入png吗？不支持的
JiaSen
2018-10-26 13:28
你好，感谢分享。两个问题。1.在AE里新建合成为什么不和导出的icon同样大小（除了方便绘制），这的同比例放大后导出的json文件实现的动画会不会出现不对齐的问题呢？ 2.直接导入png素材可以吗？影响开发实现吗？