ui动效的落地-lottie

airbnb出了一个叫做lottie的库给动效设计带来了福音

这篇文章记录一下自己利用lottie实现动效讲解一下动效的落地。

Lottie一个库，简单来说web前端 ios Android开发用了这个库就能把我们做的动效实现出来，

Lottie github地址：https://github.com/airbnb/lottie-web

而我们设计师只要安装一个叫做bodymovie的ae插件将我们的动画导出json文件交给开发就可以

不过要注意是否支持ae的效果

Lottie对ae属性的支持：http://airbnb.io/lottie/#/supported-features

这里不讲怎么安装插件网上一大堆

开始

ae做出简单的动效如下图

然后用bodymovie插件导出一个json文件留着备用

我这里用vue创建的一个项目并且安装vue-lottie

安装好后再在新创建的test.vue文件中引入vue-lottie，并且把刚开始ae导出的json文件也放入项目文件夹中并且引入

注册组件

在页面中使用组件

配置传入参数也就是上图中的options

写入一些方法

最后的界面

点击stop按钮停止动画 

点击play运行动画

-通过实践可以看出动效尺寸是可以配置的所以我们作动效的时候可以选择合适的尺寸做，只要在设计标注icon最终大小和位置就行，

-通过lottie可以做比如底部tab的切换动效、启动页动效、icon点击动效如点赞、加载动效。

-做底部icon切换动效的时候最好让未选中状态和选中状态直接过度，这样开发可以再未选中状态时时候让json文件的动效停在第一帧就好