Lottie在工作中的运用
一些工作总结，希望可以帮到大家，文章详细写到了Lottie如何在工作中使用以及需要注意的点。（附件提供示例的AE工程文件下载）
在以往的工作中，遇到有动画效果的设计需求时，设计师通常会制作一个动画效果示例以及标注相关的动画参数提供给开发，此时开发通常会采用GIF、帧动画、纯代码等方案来实现动画效果，但最终实现效果难免与设计稿有出入，且沟通成本大，工作效率低。在工作项目中使用Lottie以后，设计师只需要将导出的json文件输出给开发，不需要标注任何动画参数，开发就可以直接使用这个json文件来完成动画效果，极大的提高动画效果还原度，减少沟通成本，提升工作效率。
| 如何在工作中使用？
接下来我将通过工作中的实例来讲解如何将AE中的动画效果导出为json文件，只需要4步就可以完成。
1-安装Bodymovin插件
首先要确保你已经安装了AE。如果没有安装，这里[点我跳转]有详细的安装教程。
安装好AE之后，你需要下载两个东西：
2.下载ZXP安装程序[点我跳转下载]，下载后解压得到文件 “ZXP Installer”。
接下来依次打开文件夹“bodymovin-master”【bodymovin-master ＞build＞extension】可以看到一个名为bodymovin.zxp的文件。
接着打开文件 “ZXP Installer”可以看到一个弹窗。
然后将文件bodymovin.zxp直接拖拽到窗口中。
将文件拖拽进窗口后，窗口反馈下图中的样式，就表明插件安装成功了！
如果还不明白如何安装插件，可以查看这里[点我跳转]。
2-使用AE制作动画
动画中的图形元素均使用路径来绘制完成，动画效果也只使用了缩放、不透明度、路径的位置。（为了方便后期开发对json文件尺寸的调整，建议AE合成的尺寸和你设计稿需要的尺寸保持一致，例如我以750*1334尺寸做设计稿，动画的尺寸是400*400px，那么我AE的合成大小也是400*400px。）
很多小伙伴会遇到导出的json文件无法正常渲染播放等问题，那很有可能是因为使用了Lottie还未支持的效果。这里需要注意的是，Lottie并不完全支持AE中所有的效果，如果使用了不支持的效果，会导致最后的动画渲染播放出现问题。具体已经支持的效果和更新动态可以关注这里[点我跳转]。如果你有一些想要Lottie尽快支持的效果,可以尝试在它的GitHub项目中留言，说不定下一版本的Lottie就可以支持你需要的效果了。
（小提示：图中我是使用英文版的AE来制作动画，是由于之前遇到过使用中文版AE导出json会有一些问题。具体是否一定会因软件的语言版本而导致一些问题，我也不是很确定。不过近期我和项目组的开发验证了一下，同样的动画效果，分别使用中英两个版本的AE制作并导出json文件，开发分别使用这两个json文件，都是可以实现动画效果的，没有任何问题。大家可以根据自己的情况来选择。）
3-导出json文件
首先要记得在AE中，依次选择【After Effects CC＞Preferences(首选项)＞General（常规）】勾选 Allow s cripts to Write Files and Access Network（允许脚本写入文件和访问网络），不然在导出json时会报错。
接下来在AE中依次选择【Window(窗口)＞Extensions(扩展)＞Bodymovin】来打开Bodymovin的工作窗口。
接下来依次在工作窗口中 Selected(选择)一栏选里选中你要导出的项目，选择导出的路径，最后点击Render(提交)就可以导出json文件了。
这里值得一提的是，Settings(设置)里选中Demo这一项可以导出一个html文件，用浏览器打开可以直接查看你制作的动画效果。其他的选项可以根据自己的需求来选择。
导出完成后在刚才选择的导出路径下就可以看到这两个文件了，其中后缀为json的文件就是开发所需要的文件。
4-输出资源给到开发
| 小结
如果有帮到你记得点个赞～
