> ## 文章索引
> 在这里获取全部文章的索引：https://lrd.im/blog/llms.txt
> 这是 lrd.im 的个人博客，记录设计、技术与思考。

# 重燃动效激情之 AE 动效导出为 JSON！

![封面图](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2018-01-18-5fe20d63f09f/01.jpg)

今天正想把毕设的一些图标动效做好，突然间想到可以用 Bodymovin 导出 JSON 还没试过，于是就现场捣鼓了一番。现在发现其实非常方便！

通过 Bodymovin 导出 AE 所制作的动画需要：

1. 在 AE 里制作好的合成；
2. [Bodymovin](http://airbnb.io/lottie/after-effects/bodymovin-installation.html) 插件。

## 开始

按照[步骤](http://airbnb.io/lottie/after-effects/bodymovin-installation.html)安装好 Bodymovin 插件之后如果 AE 文件里有合成，将会自动显示在该界面。

![Bodymovin 插件界面截图：列表中显示 5 个已选中（绿色圆点）的 AE 合成，均已配置好导出路径（/Volumes/File/…），左上角 Render 按钮为绿色，版本号 5.1.4](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2018-01-18-5fe20d63f09f/02.png "Settings 可以做一些客制化的设定，关于这些设定，可以在这里查看详细信息。")

在右侧设置好保存路径后点左上角的 Render 即可导出，

在导出前请检查 AE 的合成是否有过于炫酷的特效，因为目前 Bodymovin 并未完全支持所有 AE 效果，比如表达式、图层效果、遮罩的混合模式等等。[了解更多](http://airbnb.io/lottie/supported-features.html)

导出后会是一份 JSON 文件，我们可以去 [Lottie Preview](https://www.lottiefiles.com/preview) 里预览效果，而且可以用手机端查看，在手机里如果有一些效果不能正常显示的话软件是会提示的。

![Lottie Preview 手机端警告弹窗截图：提示 Lottie 不支持图层效果（发现 Rotation-Transform 的 Overshoot、Bounce、Friction 三种效果）及不支持表达式两项警告。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2018-01-18-5fe20d63f09f/03.jpg "像这里 Lottie 就提示我里面有些效果是不能正常显示而且不支持表达式的。")

这样看上去整个过程非常简单，基本上 AE 里做出来的都能导出。

---

## 导出带有表达式的合成

Bodymovin 不支持导出带有表达式的合成，但如我我们有一些效果真的非常需要表达式来完成，那该怎么办呢？

![After Effects 时间轴面板截图，展示 "5 Outlines" 图层的关键帧属性，包含 End、Stroke Width、Opacity、Scale、Rotation 等多个带表达式的属性行，关键帧密集分布在时间轴上。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2018-01-18-5fe20d63f09f/04.png "带有表达式的图层")

我们选中带有表达式的那一栏属性的关键帧中右键选择“关键帧辅助”>“将表达式转换为关键帧”，AE 会计算表达式，在每个帧创建一个关键帧，然后禁用该表达式。

![AE 时间轴界面截图：右键点击 Rotation 属性关键帧，在弹出菜单中依次选择「Keyframe Assistant」>「Convert Expression to Keyframes」，将表达式转换为逐帧关键帧。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2018-01-18-5fe20d63f09f/05.png "将带有表达式的属性转换为关键帧")

在这种情况下 Bodymovin 就可以正常导出之前带有表达式的图层了！