Lottie 中文文档 下载 App

AE 表达式预烘焙——为什么要把表达式转成关键帧

问题:Lottie 看不懂表达式

After Effects 的表达式(Expression)是 AE 专属的 JavaScript 片段,用来让一个图层的属性跟随另一个图层运动、或者实现 procedural 的程序化动画。比如:

// 让图层跟随另一个图层的 X 位置
thisLayer.position[0] = thisComp.layer("Controller").position[0]

问题在于:Bodymovin 和 Lottie SDK 都不支持这些表达式。JSON 文件里不会包含表达式逻辑,渲染引擎看到的就是一堆静态数值——表达式动画就"死"了。

解决方案:预烘焙关键帧

AE 自带一个内置功能,把表达式"展开"成标准关键帧:

  1. 在时间轴上选中所有用到表达式的图层属性。
  2. 右键 → 选择 "Convert Expression to Keyframes"(把表达式转换为关键帧)。
  3. AE 会把表达式在整个合成时长范围内求值,生成标准关键帧。
  4. 预览一遍确认效果没丢,然后再打开 Bodymovin 导出。

什么情况下需要预烘焙

只要你用到了以下任何东西,就必须预处理:

什么表达式通常可以直接导出

Lottie 对一小部分常用表达式做了原生支持:

但最保险的做法是:不管是什么表达式,导出前一律 Convert to Keyframes——几秒钟的事,能避免最头疼的"在 AE 里好好的,到 Lottie 上不对"的问题。

其他预处理建议

在 Bodymovin 导出之前,还可以做这些事让 JSON 更干净: