一、Lottie介绍

Lottie 是 Airbnb 开源的一套跨平台的完整的动画效果解决方案，设计师可以使用 Adobe After Effects 设计出漂亮的动画之后，使用 Lottic 提供的 Bodymovin 插件将设计好的动画导出成 JSON 格式，就可以直接运用在 iOS、Android、Web 和 React Native之上，无需其他额外操作。

 官方地址：https://airbnb.design/lottie/

 官方文档：http://airbnb.io/lottie/#/

 中文文档（@习常）：https://www.yuque.com/lottie/document

1.Lottie/Bodymovin介绍

使用Lottie首先要在AE中安装Bodymovin插件，Bodymovin是After Effects的插件，可以导出json数据格式的动画供Lottie使用。

2.下载Bodymovin插件

1.通过aescripts+aeplugins下载，官方推荐做法，aescripts+aeplugins是一个类似商城的软件买卖网站，需要注意Bodymovin插件是自定义价格，如果在价格区域输入0，即可免费下，缺点需要注册比较麻烦。

Bodymovin（aescripts+aeplugins）官方地址：http://aescripts.com/bodymovin/

① 进入下载网站，在价格区域输入0即可免费下载。（建议使用谷歌浏览器翻译网站原版网站为英文）

② 接下来点击右上角购物车标志进入下一步操作。

③ .进入购物车页面，然后会看到此刻购物车里面已经添加了插件而且价格免费，然后进行结算。接下来就需要登录账户输入一些基本信息，完成下单后插件下载地址会发送到注册账户所添加的邮箱内或者在账号详情内也能找到。

2. 通过Adobe官方商店下载，官方版本保证安全，缺点需要登录账户如果没有账户比较麻烦。

bodymovin（Adobe）下载：https://exchange.adobe.com/creativecloud.details.12557.html

3. 按照Bodymovin插件汉化版本，汉化版本由@Bigxixi大佬提供，只需要下载即可使用。

Bodymovin（汉化@Bigxixi）下载：https://github.com/bigxixi/bodymovin_cn

3.安装ZXP install（一个AE插件与脚本安装工具）

ZXP install官方下载地址：https://zxpinstaller.com/ （选择对应的平台下载即可）

1.以Mac平台为例，将附件中的Mac文件夹下的“ZXPInstaller.dmg”文件打开，然后将程序拖入到应用程序中完成安装。

2.打开ZXPInstaller程序，将下载好的bodymovin.zxp文件拖入其中然后中途需要输入电脑密码然后等待片刻即可完成AE插件的安装。

3.打开AE在窗口-扩展中找到bodymovin，然后打开即可出现程序主页面。

4.为保证插件可用性，需要在AE首选项-脚本和表达式中打开允许脚本写入文件和访问网络以及启用JavaScript调试器。

4.Lottie/Bodymoving 支持的AE属性

官方文档（最新版支持功能）：https://airbnb.io/lottie/#/supported-features

图片源自@Bigxixi

5.Bodymoving插件功能介绍

尽量使用汉化版本，每个功能都有解释方便理解和使用。

二、AEUX介绍

AEUX是一个用于After Effects和Sketch 52+的AE以及Sketch插件，以及一个用于Figma 的转换器，用于将图层从视觉设计导入到AE中能完整展现。对于Sketch导入到AE中有着很强大的表现，是目前市面上最佳的选择。

 AEUX官网：https://aeux.io/

 AEUX0.6.9官方下载：https://github.com/google/sketch2ae/releases/download/0.6.9/AEUX.zip

1.安装Sketch插件

通过官网下载AEUX最新版本，得到一个压缩包里面包含“AEUX.sketchplugin”和“AEUX.zxp”文件前者是Sketch插件后者是AE插件。Sketch插件直接点击即可完成自动安装。安装完成后可在Sketch顶部菜单-插件中找到“AEUX”。

2.安装AE插件

AE插件是zxp格式，需要按照先安装文中提到的ZXP install软件，然后将插件拖入ZXP install即可完成AE插件的安装，完成后可在AE菜单面板-窗口-扩展中找到AEUX。

3.Sketch AEUX插件功能介绍

1.发送选择好的图层或者画板同步到Ae中。

2.输出一个AEUX.json文件，输出后预览并无任何东西，具体用法待研究。

3.图像到组件，会把图像转换成一个组件。

4.字面翻译是展平形状，具体用法待研究。

5.将Sketch中的组件分离出来。

4.AE AEUX插件功能介绍

1.通过Sketch AEUX插件同步后的设计文件会显示在AE插件内，点击后即可同步到AE项目中。

2.这里是画板的倍数，可根据需求进行切换，1x=一倍图 2x=二倍图以此类推。

3.默认选项，未知功能待考究。

4.会将Sketch中的组在导入AE自动转换成预合成状态。

5.选中此选项后，在Sketch中同步设计文件后，无需在AE手动同步，会执行自动同步操作。

6.可以为AE中的文件进行预合成操作

7.可以将预合成的文件释放。

8.可以将Sketch中导入的隐藏文件进行显示和隐藏操作（默认状态下Sketch的组导入到AE中会变成图层自动隐藏）

9.对于组的文件进行删除。

三、Lottie+AEUX使用演示

1.Sketch导出演示

首先选择要导入的图层或者画板点击“Send selection to Ae”导出到AE

2.AE导入演示

进入AE打开AEUX插件点击“BUILD COMP”即可将Sketch导出的设计文件导入到AE项目中。

3.Bodymovin渲染演示

在完成动效设计后，打开Bodymovin插件选择要渲染的合成，设置好保存路径，然后点击渲染即可完成动效的渲染。

如需预览动效点击“渲染动画”旁边的“预览”即可进入预览界面，点击“预览当前文件”选择刚刚合成的文件即可预览（因插件预览可能存在问题，预览结果以lottiefiles为主）

4.lottiefiles平台介绍

LottieFiles 是出于对动画师和设计社区的热爱，也是为了让你能够给他人带去灵感。 LottieFiles是以Lottie为主的动画展示与内部测试的在线网站，其中包含很多专业动画作者分享的各种类型动画，可供学习参考，同时对于Lottie导出的json文件预览有着很好的支持，为了保证动画的可用性，以 LottieFiles最终预览为主。

 lottiefiles官网：https://lottiefiles.com/

LottieFiles的使用非常简单，首先登陆网站，注册账户，然后进入我的界面点击上传新动画进入上传界面，将需要预览的.json上传即刻完成。

四、常见问题

1.图层命名尽量以英文为主，例如comp_XXX。

目前已知命名如果使用中文可能会造成不同的问题，如果在使用Lottie中出现问题首先先确认图层命名是否是英文依次进行排查。

2.渐变填充生成后导出json是黑白效果

解决方法需要修改对应图层渐变填充命名为“Grandient”（注意：修改命名非图层命名是图层内部的渐变填充名称，具体位置对应图层-内容-图层名称-渐变填充）为保证不发生冲突或者其他问题命名后面最后添加序号进行区分，可以以此扩展，如果其他效果无法显示可以改为英文版本AE中的名称。

修改命名方法由@NorthSea 大佬提供，原文中提到的“Gradient”少了一个n，正确为“Grandient”。

 Lottie中渐变填充 简化版 @NorthSea 

https://www.zcool.com.cn/article/ZOTkwNTM2.html

3.修改命名后渐变填充效果变成红色背景或者其他颜色（非黑白颜色）

在实际项目中只有部分出现了这种问题，在修改渐变填充后原有的黑白渐变变成了红色背景，其中有一部分渐变填充是有透明效果，但是在改掉透明后依然不能实现渐变。去除了是因为渐变透明导致的问题后经过不断的测试，最终得出如下解决方法：

① 修改图层命名为英文如“comp_XXX”

② 渐变填充命名发生冲突在原来名称后面添加序号如“Grandient 1”

③ 先备份一份图层，然后在删除原有渐变填充效果，在图层中重新添加渐变填充，渐变颜色以及“起始点”“结束点”数值按照备份中添加，完成以上操作后重新生成json如果依然不能实现效果需要保持ae文件，重启ae后再次生成就会实现效果。

具体什么原因导致的还不得而知目前我所描述的这种方法可以解决此类问题，如果渐变中带有透明，导出出现went当然也可以用站酷@NorthSea 大佬的方法来解决渐变透明效果。

 Lottie中渐变透明的实现研究 @NorthSea

https://www.zcool.com.cn/article/ZOTYwMTc2.html

4.图形出现残缺不完整效果

通过AEUX导入Sketch到AE中，有部分图形会出现残缺或者不完整的效果，出现这样的问题是在Sketch设计过程中有些图形做了布尔运算但是最终没有合并所以才产生这种问题。（注：如果在Sketch部分图形执行合并效果不能操作可以在ai中进行合并）

Sketch通过AEUX导入到AE中出现图形缺失，在AE中有相关图层但是确不显示，解决方法在Sketch中整理好图层，尽量不适用图层打组操作可避免出现相关问题。

文章参考：

思文大佬：https://mubu.com/doc/explore/17880

知乎：https://www.zhihu.com/question/55315505

NorthSea：https://northsea.zcool.com.cn/

往事惘逝：https://juejin.im/post/5b62e2bae51d4534c34a65e3

官方/插件下载：

ZXP install官方下载地址：https://zxpinstaller.com/

Lottie官网：https://airbnb.design/lottie/

Lottie英文版本插件：https://github.com/airbnb/lottie-web

Lottie汉化版本插件（@Bigxixi）：https://github.com/airbnb/lottie-web

AEUX官网：https://aeux.io

Powered by Froala Editor