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

Pudge
Pudge
Jan 18, 2018 · 3 min read

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

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

  1. 在 AE 里制作好的合成;

2. Bodymovin 插件。

开始:

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

Settings 可以做一些客制化的设定,关于这些设定,可以在这里查看详细信息

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

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

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

像这里 Lottie 就提示我里面有些效果是不能正常显示而且不支持表达式的。

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


导出带有表达式的合成

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

带有表达式的图层

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

将带有表达式的属性转换为关键帧

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

    Pudge

    Written by

    Pudge

    广州 · LRD.IM

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade