cubic-bezier() 在 Composer 中不被原生支持,它不是 Motion 或 Compressor 的动画系统核心机制;你看到的“Bezier 曲线优化”实际是指底层动画引擎对 tween 插值的数学建模,界面中“Smooth”“Bezier”等插值类型对应三次贝塞尔控制逻辑,但仅通过拖动手柄(P₁、P₂)可视化调节,不提供 CSS 式四参数输入框,x 值限制在 [0,1] 内,y 值可超范围实现超调,所有调节必须手动完成,无法直接粘贴或导入 cubic-bezier(a,b,c,d) 数值。

直接说结论:cubic-bezier() 在 Composer 中不被原生支持,它不是 Motion 或 Compressor 的动画系统核心机制;你看到的“Bezier 曲线优化”实际是指底层动画引擎(如 Core Animation)对 tween 插值过程的数学建模,而你在 Composer 界面里调的“缓动”“关键帧插值类型”,本质是预设的贝塞尔参数映射,不是手写 cubic-bezier(0.42, 0, 0.58, 1) 这类 CSS 式表达式。
Composer 里没有 cubic-bezier() 输入框,但有等效控制点
Composer 的关键帧编辑器中,“插值类型”下拉菜单里的 Smooth、Linear、Hold、Bezier 等选项,对应的是贝塞尔曲线的控制逻辑,但不暴露四参数。选 Bezier 后,你可以拖动关键帧两侧的“手柄”——这就是三次贝塞尔的两个中间控制点 P₁ 和 P₂ 的可视化调节。起点 P₀ 和终点 P₃ 固定为 (0,0) 和 (1,1),所以你调的其实是 (x₁, y₁) 和 (x₂, y₂)。
- 手柄越往左上拉,动画开头越“慢入”(类似
cubic-bezier(0.1, 0.8, 0.2, 1)) - 右侧手柄往下拉,结尾越“快出”(注意:y 值可 >1,产生回弹效果)
- 两个手柄完全水平对齐(x₁ = x₂),且 y₁ = y₂,则退化为线性插值
- 若拖出手柄超出 [0,1] 范围(比如 y₁ = 1.3),动画会出现超调(overshoot),这是合法且常用的设计手法
为什么不能粘贴 CSS 的 cubic-bezier() 值到 Composer?
因为 Composer 使用的时间-位移空间(t–v space)和 CSS 的 cubic-bezier() 定义域一致,但它的 UI 不提供数值输入入口,也不校验参数合法性。你无法直接输入 0.25, 0.46, 0.45, 0.94 这样的四元组——它没有文本输入字段,也没有“导入贝塞尔参数”按钮。所有调节必须通过手柄拖拽完成,精度受限于鼠标操作和 UI 缩放比例。
- CSS 的
cubic-bezier(a,b,c,d)要求 a,c ∈ [0,1],但 b,d 可任意(规范允许,浏览器也接受);Composer 的手柄 y 值虽可拖出 [0,1],但 x 值被限制在 [0,1] 内(防止时间倒流) - 如果你有一组想复用的参数,建议先在 cubic-bezier.com 上调试好,再凭视觉近似拖出手柄形态
- 导出为 .mov 或 .mp4 后,这些插值信息已固化进帧数据,无法反向提取原始参数
轨迹平滑 ≠ 关键帧少,而取决于切线连续性
很多人以为“加更多关键帧就能让路径更顺”,其实不然。Composer 中路径平滑的核心是相邻关键帧之间的插值类型与手柄方向是否匹配。例如做圆周运动的摄像机轨迹,如果两个旋转关键帧都设为 Bezier,但左侧手柄朝右、右侧手柄朝左,就会在连接处形成尖角或速度突变。
- 选中多个关键帧 → 右键 →
Match Tangents:强制统一手柄角度与长度,实现 C¹ 连续(一阶导数连续) - 按住
Option拖动手柄:单独调整一侧,适合做“缓入急停”类节奏变化 - 路径视图(Path View)中开启
Show Velocity:能直观看到速度曲线是否出现毛刺,比肉眼盯位置曲线更可靠 - 对位移类属性(如
Position、Rotation),务必关闭Apply to All Dimensions,否则 X/Y/Z 被强行耦合,破坏自然感
真正难的不是调出某条“好看”的曲线,而是理解每个手柄拖动背后对应的物理意义:x 控制时间权重分配,y 控制位移幅度加权。多数人卡在把“视觉顺”和“数学顺”混为一谈——前者靠经验拖,后者靠导数连续约束。Composer 不报错,但导出后播放卡顿或跳变,往往就出在相邻关键帧的手柄没对齐。


















