AE 表达式预烘焙——为什么要把表达式转成关键帧
问题:Lottie 看不懂表达式
After Effects 的表达式(Expression)是 AE 专属的 JavaScript 片段,用来让一个图层的属性跟随另一个图层运动、或者实现 procedural 的程序化动画。比如:
// 让图层跟随另一个图层的 X 位置
thisLayer.position[0] = thisComp.layer("Controller").position[0]
问题在于:Bodymovin 和 Lottie SDK 都不支持这些表达式。JSON 文件里不会包含表达式逻辑,渲染引擎看到的就是一堆静态数值——表达式动画就"死"了。
解决方案:预烘焙关键帧
AE 自带一个内置功能,把表达式"展开"成标准关键帧:
- 在时间轴上选中所有用到表达式的图层属性。
- 右键 → 选择 "Convert Expression to Keyframes"(把表达式转换为关键帧)。
- AE 会把表达式在整个合成时长范围内求值,生成标准关键帧。
- 预览一遍确认效果没丢,然后再打开 Bodymovin 导出。
什么情况下需要预烘焙
只要你用到了以下任何东西,就必须预处理:
- 自定义表达式链(不只是简单的
loopOut()和time表达式) - Duik 等第三方脚本生成的控制器表达式
- 依赖其他图层属性的联动动画
- 数学函数生成的程序化动画(比如三角函数的 sine wave 运动)
什么表达式通常可以直接导出
Lottie 对一小部分常用表达式做了原生支持:
time/t—— 按时间做动画value—— 保持当前值valueAtTime(t)—— 其他时间点的数值查询- 简单的数学运算(加、减、乘、除)
effect()函数查询特效参数(Bodymovin 可能会读取)
但最保险的做法是:不管是什么表达式,导出前一律 Convert to Keyframes——几秒钟的事,能避免最头疼的"在 AE 里好好的,到 Lottie 上不对"的问题。
其他预处理建议
在 Bodymovin 导出之前,还可以做这些事让 JSON 更干净:
- 预合成:把内部结构复杂的图层组预先 Precompose 成一个合成,Bodymovin 能更好地处理。
- 合并路径:如果有多个形状图层共用同一组路径参数,考虑合并。
- 减少表达式依赖:尽量用标准关键帧动画代替表达式,设计阶段就考虑到导出约束。