UE专属-五分钟学会用Lottie配合开发做动效

前言

最近在优化Loading动画，翻看了很多关于Lottie的神奇之处，既免去了使用序列帧丢帧情况又不必担心AE导出的GIF文件各种失真的悲具，又可以减少开发成本让开发小哥哥直接使用，下面就说一下交互设计师该如何与开发小哥哥配合使用Lottie把AE动画转换成HTML5/Android/iOS原生动画

搜罗了各种Lottie相关资料，但大多数都是把设计师的部分和开发小哥哥负责的部分混在一起介绍的，可是作为一枚代码小白的UE，看的也是全程蒙蒙哒，只能叫来开发小哥哥一起研究，各司其责，各取所长才能更快的输出，所以就把设计师负责的这一部步骤单独拿出来详细说明，如果了解过，可直接到文末看步骤总结

Lottie是个什么

Lottie 是一个可应用于Andriod和iOS的动画库，它通过bodymovin插件来解析Adobe After Effects 动画并导出为json文件，通过手机端原生的方式或者通过React Native的方式渲染出矢量动画

其实就是设计师只需要使用 AE设计出动画之后，使用 Lottic 提供的 Bodymovin 插件，将设计好的动画导出成json格式，然后把这个文件交给开发小哥哥，后面的全部交给万能开发小哥哥就可以搞定啦，中间会涉及到动画速度或者颜色相关的问题，这个建议设计师在AE里进行调节再次导出就可以了

具体步骤如下：

1、首先在sketch中确定好需要制作loading动画的整体形象

2、如果形象只是简单的形状可以在AE中直接用钢笔直接画出；如果是比较复杂的形象，可以使用Google的Sketch2AE工具导入AE，选中需要导入所有图层，到“Plugins-Sketch2AE”点击“Cope Selected Layers”

下载地址如下：

百度云盘: https://pan.baidu.com/s/16x9eWkLUk51COXvMVfHzkg  密码:5jf7

官方详细教程：https://google.github.io/sketch2ae/

3、打开AE，点击“文件-脚本-运行脚本文件...”，找到上述插件中的“Sketch2AE.jsx”，点击“打开”，AE中就会看到Sketch2AE的操作面板，点击右边红色button就可导入在Sketch中已复制的所有图层了（如果已运行过此脚本，下次打开AE时到“窗口”菜单最下面就可以看到“Sketch2AE.jsx”）

4、在AE中设计动画，动画设计好，需要安装Lottie的配套插件Bodymovin插件（Bodymovin就是After Effects的一个插件，可以将json数据格式的动画导出为Lottie使用），以下链接是已经过西西大神汉化过的版本及原文安装过程：

百度云盘:https://pan.baidu.com/s/11gMfiaYG_6XNtpJbWo6e6w  密码:jmm8 

原文链接：https://zhuanlan.zhihu.com/p/34700530

5、在AE中到“窗口-扩展”找到已安装好的Bodymovin插件，按以下步骤操作，就可以导出json数据格式的动画了

6、最后一步，把json文件发送给开发小哥哥，配合开发小哥哥调节一些细节，坐等验收最终效果即可

https://dribbble.com/Yuki-Liu

补充

另外官方有单独给出动画中含有图片导出资源的方法，其实总结来说按照上述步骤，就可以提前把图片整合到json文件中，以省去后期开发小哥哥许多开发量

官方方案：http://airbnb.io/lottie/after-effects/artwork-to-lottie-walkthrough.html

大概总结一下，分为以下步骤：

1、如果是sketch设计的可以使用上文提到的Google的Sketch2AE工具导入AE；如果是AI设计，直接导入AE即可

2、在AE中使用导入的图层进行制作动画

3、然后通过 Bodymovin 插件，输出json文件

4、把json文件发送给开发小哥哥

---

希望对大家有所帮助，如有任何疑问都可留言给我哦，后期会跟陆续更新交互相关小心得