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

李瑞东 发布于
封面图

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

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

  1. 在 AE 里制作好的合成；
  2. Bodymovin 插件。

开始

按照步骤安装好 Bodymovin 插件之后如果 AE 文件里有合成，将会自动显示在该界面。

Bodymovin 插件界面截图：列表中显示 5 个已选中（绿色圆点）的 AE 合成，均已配置好导出路径（/Volumes/File/…），左上角 Render 按钮为绿色，版本号 5.1.4
Settings 可以做一些客制化的设定，关于这些设定，可以在这里查看详细信息。

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

在导出前请检查 AE 的合成是否有过于炫酷的特效，因为目前 Bodymovin 并未完全支持所有 AE 效果，比如表达式、图层效果、遮罩的混合模式等等。了解更多

导出后会是一份 JSON 文件，我们可以去 Lottie Preview 里预览效果，而且可以用手机端查看，在手机里如果有一些效果不能正常显示的话软件是会提示的。

Lottie Preview 手机端警告弹窗截图：提示 Lottie 不支持图层效果（发现 Rotation-Transform 的 Overshoot、Bounce、Friction 三种效果）及不支持表达式两项警告。
像这里 Lottie 就提示我里面有些效果是不能正常显示而且不支持表达式的。

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

导出带有表达式的合成

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

After Effects 时间轴面板截图，展示 "5 Outlines" 图层的关键帧属性，包含 End、Stroke Width、Opacity、Scale、Rotation 等多个带表达式的属性行，关键帧密集分布在时间轴上。
带有表达式的图层

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

AE 时间轴界面截图：右键点击 Rotation 属性关键帧，在弹出菜单中依次选择「Keyframe Assistant」>「Convert Expression to Keyframes」，将表达式转换为逐帧关键帧。
将带有表达式的属性转换为关键帧

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

🎉 你觉得这篇文章怎样？
我在这里留下了联系方式。如果觉得这篇文章还不错，欢迎分享给朋友！
联系作者
复制链接
© 李瑞东 2017-2026