如何将AE动画导出为json文件

前言

最近在工作当中需要制作一些简单的图标动画，但是总感觉导出的GIF动画有点模糊，跟开发同学沟通了一下，可以尝试一下导出json文件。这之后，自己就开始百度搜索解决这个问题。

 

在AE导出到json文件中，自己也遇到了一些问题，现在把这些问题做一下总结分享出来，希望大家遇到类似的问题，也都可以快速解决。

工作当中自己是使用 Sketch 制作图标，因此需要把sketch文件导入到AE当中。

所需软件和插件：

After Effects 、 Bodymovin（AE插件）、 Sketch、 AEUX（sketch&AE插件）

我已经安装AE CC2019和Sketch 版本58，所以只需要安装插件。

 

我都是在官网下载的插件：

Bodymovin下载网址：https://airbnb.design/lottie/

AEUX下载网址：https://aeux.io/guide/download.html

 

安装步骤

先安装插件Bodymovin

01 首先需要安装aescripts + aeplugins zxp installer 这个程序，这个是打开ZXP后缀需要安装的程序。

02 打开安装器ZXP Installer，拖动bodymovin.zxp到安装器上；按照提示安装即可，步骤很简单；下边是自己已经安装过的插件。

03 安装成功后打开AE，设置在首选项 ->常规 ，将允许脚本写入文件和访问网络选项勾选上。否则后面导出时会报错。

安装插件AEUX

01 由于刚才已经安装过安装器ZXP Installer，因此只用打开安装器ZXP Installer，拖动AEUX的插件到安装器上；按照提示安装即可，步骤很简单，安装成功以后，在sketch 插件中就可以查看到AEUX。

案例展示

以一个图标优惠的小动画作为案例，展示一下从绘制图标到实现动画再到最后导出json文件的过程。

下面是过程展示：

01 在sketch中绘制出矢量图形， 注意要在在sketch中把描边和文字轮廓化，要不然导出json文件会出问题。

02 用AEUX插件将矢量图形导入到AE中,需要注意，AE也必须打开，如果不打开，sketch的文件不能导入到AE中

03 在AE中制作简单的缩放动画

04 制作完成以后，打开bodymovin插件，生成json文件

• 打开bodymovin插件

• 然后出现下面这个界面，首先需要把这个勾选一下Settings — Assets — Include in json，要不然导出json文件预览之后是空白页。之后选择导出位置，点击Render,即可导出成功啦

05 在Lottie 官网预览一下，网址为：https://lottiefiles.com/preview，在这个网站上还能直接导出GIF图片

需要注意的是：中文版不能导出渐变色，有些自带的图层效果也无法导出。