动效神奇lottie的安装和使用

现在手机性能越发好，各大app也开始用强悍的动效吸引大家的注意。

做动效常用两种方式，一种是导出gif图片给开发，一种是由开发用代码完成。第一种方式弊端在于文件较大，不利于控制，第二种方式在于给开发增加繁重工作量，且效果不一定好。

做gif一般用AE，做完用QuickTime导出，再导进ps里转成gif，整个过程比较痛苦，图太大还会失真。于是爱彼迎团队出了一个移动端动画库Lottie，可以和一个ae插件bodymovin结合起来，做好的动效导出为json格式，轻便好用易控制，兼容性强。

现在就来安装叭！

1. 下载zxp-installer，地址：https://aescripts.com/learn/zxp-installer/

2. 下载bodymovin，地址：https://github.com/airbnb/lottie-web

3. 运行

打开后点击file→open，载入bodymovin.zxp，这个文件在

bodymovin\lottie-web-master\build\extension\bodymovin.zxp

4. 找到bodymovin.zxp，双击安装，，注意关闭ae软件

5. 打开ae，编辑-首选项，勾选允许脚本写入

6. 窗口-扩展。就能找到bodymovin了

7. 使用它

点击插件，选择你要导出的文件，设置存储路径，点rander就行啦

到这里就结束了，，，想要尝试代码的继续往下看↓↓↓↓

我用的软件是webstorm

新建好文件，，需要引入jquery.js和Lottie.js文件

新建一个html文件，把刚才导出的json文件复制进来

Html文件中引入以上两个js

设置下容器的宽高，随意就好

我这个例子用不上jQuery，可以忽略不计

像上图那样把代码写出来，页面中就出现了，，，更复杂炫酷的使用方法就交给程序猿叭~

不想去找很多网站下载的，，我打包了一份在网盘

感兴趣的私信取链接叭~

我平时很少做动效，今天就遇到个问题，折腾很久，我觉得有必要补充一下。

bodymovin不能渲染图片，bodymovin不能渲染图片，bodymovin不能渲染图片，！

可以通过AI来解决这个问题，具体做法如下：

涉及分层的话请逐个保存ai文件，比如我做这个，放大镜换和手需要动，同时它的图层顺序是在书之下，所以我导了3个ai文件。

导入AI项目

并拖到编辑区域，选中这些文件，鼠标右键--从矢量图层创建形状

然后就能得到这样的图层组。

！！！有透明度的需要在这找到后重新设置，虽然有点难找，但能完美解决问题

接下来该怎么做动画就做，做完直接渲染为json文件。