缓动曲线编辑器:拖控制点

cubic-bezier(x1,y1,x2,y2) 由四个数决定:两个端点固定在 (0,0) 与 (1,1), 形状全靠两个控制点 P1=(x1,y1)、P2=(x2,y2)。下面是一块正方形画布, 拖动 P1 与 P2 即可实时重塑曲线, 画布下方的小球按当前曲线循环运动。控制点的 x 被限制在 [0,1](时间必须单调推进), y 可超出 [0,1] 以制造过冲。

正方形画布:横轴 = 时间进度,纵轴 = 值进度;拖动两个控制点

cubic-bezier(…)

小球按当前曲线运动(橙),虚线轨道下是 linear 参考(蓝)

end

P1 — P2 — ease(t) —

为何拖一个点能塑出整条曲线:Bézier 曲线是控制点的加权混合,P1 / P2 像两块磁铁把曲线从对角直线 (linear) 拽向自己。手柄线 (P0→P1、P3→P2) 的斜率即起止瞬时速度: 起点手柄越平,启动越慢 (ease-in);终点手柄越平,收尾越慢 (ease-out)。把控制点的 y 拉到 1 以上或 0 以下,曲线就会越过端点形成过冲 / 回弹。

需要留意:cubic-bezier 是一条以参数 u 描述的曲线,x 与 y 都是 u 的多项式。动画引擎拿到的是时间进度 x,要先反解出满足 sampleX(u)=x 的 u,再代入 sampleY(u) 得到值进度 y。这一步没有闭式解,引擎用 Newton-Raphson 迭代(导数足够大时)、导数过小时退化到二分回退—— 这正是浏览器内部对 cubic-bezier() 所做的求解。本页画曲线时直接对 u∈[0,1] 采样描点, 而驱动小球时走的才是「给定 x 反解 y」的引擎路径。

@vega/anim — 用编辑出的控制点驱动动画

相关:具名缓动与三朝向同源的原理见缓动:把时间重新塑形; 若要的不是一条预设曲线而是有质量、初速度的物理回弹,换成弹簧。