转载

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动画的整体形象

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

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

下载地址如下：

百度云盘: https://pan.baidu.com/s/16x9eWkLUk51COXvMVfHzkg 密码:5jf7
官方详细教程：https://google.github.io/sketch2ae/

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

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

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